Skip to content

Commit fe38c61

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 fe38c61

1 file changed

Lines changed: 33 additions & 27 deletions

File tree

README.md

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ 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
2726

@@ -33,33 +32,41 @@ class HomepageTest < ApplicationSystemTestCase
3332
end
3433
```
3534

36-
That's it. No configuration needed. Screenshots are saved to `doc/screenshots/` and compared on each test run.
35+
```bash
36+
# Run twice: first run saves baselines, second run compares
37+
bundle exec rake test
38+
git add doc/screenshots/
39+
git commit -m "chore: add screenshot baselines"
40+
```
3741

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.
42+
That's it. Screenshots are saved to `doc/screenshots/` and compared on each test run. CI catches regressions automatically.
4143

4244
For RSpec, Cucumber, or non-Rails setup, see [Framework Setup](docs/framework-setup.md).
4345

4446
## What You Get
4547

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

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:
5650
```text
5751
Screenshot does not match for 'homepage':
5852
({"area_size":1250,"region":[0,19,199,83],"max_color_distance":42.5})
5953
```
6054

55+
And generates diff files for inspection:
56+
57+
| File | Description |
58+
|------|-------------|
59+
| `homepage.png` | Committed baseline |
60+
| `homepage.diff.png` | Visual diff with changes highlighted in red |
61+
| `homepage.heatmap.diff.png` | Heatmap of pixel differences |
62+
6163
Enable the [HTML report](docs/reporters.md) for an interactive dashboard with side-by-side comparison, zoom, and annotation toggle.
6264

65+
**Compare any two images** without a browser — PDFs, generated images, CI artifacts:
66+
```ruby
67+
Capybara::Screenshot::Diff.compare("baseline.png", "current.png")
68+
```
69+
6370
## Installation
6471

6572
```ruby
@@ -74,11 +81,18 @@ Then run `bundle install`.
7481

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

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

79-
**Works out of the box.** `blur_active_element`, `hide_caret`, and `fail_if_new` (in CI) are enabled by default.
93+
**Defaults work for most Rails apps.** `blur_active_element`, `hide_caret`, and `fail_if_new` (in CI) are enabled automatically.
8094

81-
When tests are flaky, add tolerance:
95+
If you see inconsistent results, add tolerance:
8296

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

98112
## Troubleshooting
99113

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

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

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

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

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-
118124
## Advanced Topics
119125

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

0 commit comments

Comments
 (0)