@@ -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
2323class ApplicationSystemTestCase < ActionDispatch ::SystemTestCase
24- include CapybaraScreenshotDiff ::DSL
2524 include CapybaraScreenshotDiff ::Minitest ::Assertions
2625end
2726
@@ -33,33 +32,41 @@ class HomepageTest < ApplicationSystemTestCase
3332end
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
4244For 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
5751Screenshot 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+
6163Enable 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
8498Capybara ::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