Skip to content

Commit cfd9ed7

Browse files
pftgclaude
andcommitted
docs: improve README conversion — fix Quick Start, reorder sections
- Remove redundant include DSL (Assertions already includes it) - Add git add/commit step to Quick Start (prevents CI failure) - Lead "What You Get" with failure message, not file table - Move standalone compare API into "What You Get" (strong hook) - Rename "Configuration" → "Tuning Flaky Tests" (after Next Steps) - Move Troubleshooting after Next Steps (not before) - Simplify first-run explanation (no conflicting RECORD_SCREENSHOTS) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 180477c commit cfd9ed7

1 file changed

Lines changed: 39 additions & 28 deletions

File tree

README.md

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,47 +19,59 @@ require 'capybara_screenshot_diff/minitest'
1919
```
2020

2121
```ruby
22-
# test/application_system_test_case.rb (or test/system/homepage_test.rb)
22+
# test/application_system_test_case.rb
2323
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
24-
include CapybaraScreenshotDiff::DSL
2524
include CapybaraScreenshotDiff::Minitest::Assertions
2625
end
26+
```
2727

28+
```ruby
29+
# test/system/homepage_test.rb
2830
class HomepageTest < ApplicationSystemTestCase
2931
test "homepage" do
3032
visit "/"
31-
screenshot "homepage" # First run: saves baseline. Next runs: compares.
33+
screenshot "homepage"
3234
end
3335
end
3436
```
3537

36-
That's it. No configuration needed. Screenshots are saved to `doc/screenshots/` and compared on each test run.
38+
```bash
39+
bundle exec rake test # First run always passes — saves baselines
40+
bundle exec rake test # Second run compares against baselines
41+
git add doc/screenshots/
42+
git commit -m "chore: add screenshot baselines"
43+
```
44+
45+
That's it. The first run saves baseline screenshots (always passes). Subsequent runs compare against them — if the UI changed, the test fails. Commit baselines to git so CI catches regressions.
3746

38-
> **First run:** saves baseline screenshots (tests pass).
39-
> **Second run:** compares against baselines. If anything changed, the test fails with a diff.
40-
> **Commit baselines to git** so CI catches regressions too.
47+
> **CI note:** In CI, `fail_if_new` is `true` by default — new screenshots without a committed baseline will fail. Always commit your baselines before pushing.
4148
4249
For RSpec, Cucumber, or non-Rails setup, see [Framework Setup](docs/framework-setup.md).
4350

4451
## What You Get
4552

46-
When a screenshot differs, you get:
53+
When a screenshot differs, the test fails with a clear message:
4754

48-
| File | Description |
49-
|------|-------------|
50-
| `homepage.png` | Committed baseline (in version control) |
51-
| `homepage.base.png` | Runtime copy of baseline (for comparison) |
52-
| `homepage.diff.png` | Visual diff with changes highlighted in red |
53-
| `homepage.heatmap.diff.png` | Heatmap of pixel differences |
54-
55-
The failure message tells you exactly what changed:
5655
```text
5756
Screenshot does not match for 'homepage':
5857
({"area_size":1250,"region":[0,19,199,83],"max_color_distance":42.5})
5958
```
6059

60+
And generates diff files for inspection:
61+
62+
| File | Description |
63+
|------|-------------|
64+
| `homepage.png` | Committed baseline |
65+
| `homepage.diff.png` | Visual diff with changes highlighted in red |
66+
| `homepage.heatmap.diff.png` | Heatmap of pixel differences |
67+
6168
Enable the [HTML report](docs/reporters.md) for an interactive dashboard with side-by-side comparison, zoom, and annotation toggle.
6269

70+
**Compare any two images** without a browser — PDFs, generated images, CI artifacts:
71+
```ruby
72+
Capybara::Screenshot::Diff.compare("baseline.png", "current.png")
73+
```
74+
6375
## Installation
6476

6577
```ruby
@@ -74,11 +86,18 @@ Then run `bundle install`.
7486

7587
**Requirements:** Ruby 3.2+, Rails 7.1+. For the `:vips` driver: [libvips 8.9+](https://libvips.github.io/libvips/install.html).
7688

77-
## Configuration
89+
## Next Steps
90+
91+
- **Crop to element:** `screenshot "form", crop: "#main-form"`
92+
- **Ignore regions:** `screenshot "dashboard", skip_area: [".timestamp"]`
93+
- **Run in CI:** See [GitHub Actions setup](docs/ci-integration.md)
94+
- **HTML report:** `require 'capybara_screenshot_diff/reporters/html'`[details](docs/reporters.md)
7895

79-
**Works out of the box.** `blur_active_element`, `hide_caret`, and `fail_if_new` (in CI) are enabled by default.
96+
## Tuning Flaky Tests
8097

81-
When tests are flaky, add tolerance:
98+
**Defaults work for most Rails apps.** `blur_active_element`, `hide_caret`, and `fail_if_new` (in CI) are enabled automatically.
99+
100+
If you see inconsistent results, add tolerance:
82101

83102
```ruby
84103
Capybara::Screenshot::Diff.configure do |screenshot, diff|
@@ -97,7 +116,7 @@ See [Configuration Reference](docs/configuration.md) for all options.
97116

98117
## Troubleshooting
99118

100-
**"No existing screenshot found"** — First run saves baselines. Record them: `RECORD_SCREENSHOTS=1 bundle exec rake test`. In CI, commit baselines first.
119+
**"No existing screenshot found"** — First run saves baselines. Run `bundle exec rake test` twice, then commit `doc/screenshots/`.
101120

102121
**Screenshots differ between CI and local** — Use `tolerance: 0.001` or `perceptual_threshold: 2.0`. Set `window_size` for consistent dimensions.
103122

@@ -107,14 +126,6 @@ See [Configuration Reference](docs/configuration.md) for all options.
107126

108127
**Debug mode**`DEBUG=1 bundle exec rake test` keeps `.diff.png` files for inspection.
109128

110-
## Next Steps
111-
112-
- **Crop to element:** `screenshot "form", crop: "#main-form"`
113-
- **Ignore regions:** `screenshot "dashboard", skip_area: [".clock"]`
114-
- **Run in CI:** See [GitHub Actions setup](docs/ci-integration.md)
115-
- **HTML report:** `require 'capybara_screenshot_diff/reporters/html'`[details](docs/reporters.md)
116-
- **Compare any images:** `Capybara::Screenshot::Diff.compare("a.png", "b.png")` — no browser needed
117-
118129
## Advanced Topics
119130

120131
- [Framework Setup](docs/framework-setup.md) — Minitest, RSpec, Cucumber

0 commit comments

Comments
 (0)