|
4 | 4 |
|
5 | 5 | # Capybara::Screenshot::Diff |
6 | 6 |
|
7 | | -Stop shipping UI bugs. Take screenshots in your Rails tests, commit baselines to git, and let CI catch visual regressions in pull requests — no cloud service, no subscription, runs entirely in your test suite. |
| 7 | +Stop shipping UI bugs. Take screenshots in your Capybara tests, commit baselines to git, and let CI catch visual regressions in pull requests — no cloud service, no subscription, runs entirely in your test suite. |
8 | 8 |
|
9 | | -**Why this gem?** Percy and Chromatic cost money and send your screenshots to a third party. BackstopJS requires Node. This gem integrates directly into your Capybara tests, stores baselines in git, and works offline. |
| 9 | +**Why this gem?** Baselines live in git alongside your code — no external service, no account to sign up for, works offline. Unlike Percy/Chromatic (paid SaaS), this runs locally. Unlike BackstopJS, no Node required. |
10 | 10 |
|
11 | 11 | ## Quick Start |
12 | 12 |
|
| 13 | +> **Prerequisites:** A working Capybara setup with a browser driver (e.g., selenium-webdriver + Chrome). See [Rails System Testing guide](https://guides.rubyonrails.org/testing.html#system-testing) if you don't have one yet. |
| 14 | +
|
13 | 15 | ```ruby |
14 | 16 | # Gemfile |
15 | 17 | gem 'capybara-screenshot-diff' |
@@ -38,19 +40,39 @@ class HomepageTest < ApplicationSystemTestCase |
38 | 40 | end |
39 | 41 | ``` |
40 | 42 |
|
| 43 | +Then run these steps in order: |
| 44 | + |
41 | 45 | ```bash |
42 | | -bundle exec rake test # First run always passes — saves baselines |
| 46 | +# Step 1: Save baselines (first run always passes) |
| 47 | +bundle exec rake test |
| 48 | + |
| 49 | +# Step 2: Commit baselines to git |
43 | 50 | git add doc/screenshots/ |
44 | 51 | git commit -m "chore: add screenshot baselines" |
45 | | -bundle exec rake test # Second run compares against committed baselines |
| 52 | + |
| 53 | +# Step 3: Now comparisons work — change your UI and re-run |
| 54 | +bundle exec rake test |
46 | 55 | ``` |
47 | 56 |
|
48 | | -First run saves baseline screenshots to `doc/screenshots/` (always passes). Commit them to git. Subsequent runs compare against committed baselines — if the UI changed, the test fails. |
| 57 | +After Step 1, you'll see: |
| 58 | +``` |
| 59 | +doc/screenshots/ |
| 60 | + homepage.png <- your baseline (commit this) |
| 61 | +``` |
49 | 62 |
|
50 | | -> **CI note:** `fail_if_new` is `true` by default in CI — new screenshots without a committed baseline will fail. Always commit baselines before pushing. |
| 63 | +If you skip Step 2 and push to CI, the build will fail — `fail_if_new` is `true` by default in CI. |
51 | 64 |
|
52 | 65 | For RSpec, Cucumber, or non-Rails setup, see [Framework Setup](docs/framework-setup.md). |
53 | 66 |
|
| 67 | +### For Non-Rails Projects (Hugo, Jekyll, Static Sites) |
| 68 | + |
| 69 | +```ruby |
| 70 | +require 'capybara_screenshot_diff/static' |
| 71 | +CapybaraScreenshotDiff.serve("_site") # or "public", "build", "dist" |
| 72 | +``` |
| 73 | + |
| 74 | +Then commit baselines to git just like Rails. [Full setup](docs/ci-integration.md#non-rails-projects-hugo-jekyll-static-sites). |
| 75 | + |
54 | 76 | ## What Happens When a Screenshot Changes |
55 | 77 |
|
56 | 78 | The test fails with a clear message and generates diff files: |
@@ -116,39 +138,64 @@ If screenshots differ between CI and local, set a comparison threshold: |
116 | 138 |
|
117 | 139 | ```ruby |
118 | 140 | Capybara::Screenshot::Diff.configure do |screenshot, diff| |
119 | | - screenshot.window_size = [1280, 1024] |
120 | | - diff.perceptual_threshold = 2.0 # Recommended for VIPS — ignores anti-aliasing |
121 | | - # or: diff.tolerance = 0.001 # Default for VIPS, percentage-based |
| 141 | + screenshot.window_size = [1280, 1024] # consistent viewport |
| 142 | + diff.perceptual_threshold = 2.0 # ignore anti-aliasing (VIPS only) |
| 143 | + # or: diff.tolerance = 0.001 # percentage-based (default for VIPS) |
122 | 144 | end |
123 | 145 | ``` |
124 | 146 |
|
125 | 147 | See [Choosing the Right Method](docs/configuration.md#choosing-the-right-color-comparison-method) for detailed comparison options. |
126 | 148 |
|
127 | | -## Common Questions |
| 149 | +## FAQ |
| 150 | + |
| 151 | +<details> |
| 152 | +<summary><strong>The test passed on first run. Did it work?</strong></summary> |
| 153 | + |
| 154 | +Yes. First run saves baselines and always passes. Run tests again to compare against committed baselines. |
| 155 | +</details> |
| 156 | + |
| 157 | +<details> |
| 158 | +<summary><strong>How do I update baselines after intentional UI changes?</strong></summary> |
| 159 | + |
| 160 | +Delete the baseline file and re-run tests: `rm doc/screenshots/homepage.png && bundle exec rake test`. Or update all: `rm -rf doc/screenshots/ && bundle exec rake test`. |
| 161 | +</details> |
128 | 162 |
|
129 | | -**Why did my test pass on the first run?** First run always passes and saves baselines. Run again to compare. |
| 163 | +<details> |
| 164 | +<summary><strong>CSS animations make my screenshots flaky</strong></summary> |
130 | 165 |
|
131 | | -**How do I update baselines?** Delete the baseline file and re-run tests. Or delete all: `rm -rf doc/screenshots/ && bundle exec rake test`. |
| 166 | +Enable `Capybara::Screenshot.disable_animations = true` to freeze CSS animations/transitions before each capture. Or use `stability_time_limit: 1` to wait for animations to finish. |
| 167 | +</details> |
132 | 168 |
|
133 | | -**Animations make screenshots flaky** — `Capybara::Screenshot.disable_animations = true` freezes CSS animations/transitions before each capture. |
| 169 | +<details> |
| 170 | +<summary><strong>CI screenshots differ from local</strong></summary> |
134 | 171 |
|
135 | | -**CI screenshots differ from local** — Set `window_size` for consistent dimensions and use `perceptual_threshold: 2.0` to ignore rendering differences. |
| 172 | +Set `window_size` for consistent dimensions and use `perceptual_threshold: 2.0` to ignore anti-aliasing differences across environments. |
| 173 | +</details> |
136 | 174 |
|
137 | | -**Debug mode** — `DEBUG=1 bundle exec rake test` keeps `.diff.png` files for inspection. |
| 175 | +<details> |
| 176 | +<summary><strong>Will this slow down my tests?</strong></summary> |
| 177 | + |
| 178 | +Comparisons add ~50ms per image with VIPS. Without `ruby-vips`, ChunkyPNG is used (slower but no system dependency). `stability_time_limit` adds wait time — keep it low (0.1-0.5s) or use `disable_animations` instead. |
| 179 | +</details> |
| 180 | + |
| 181 | +<details> |
| 182 | +<summary><strong>Debug mode</strong></summary> |
| 183 | + |
| 184 | +`DEBUG=1 bundle exec rake test` keeps `.diff.png` files for inspection. |
| 185 | +</details> |
138 | 186 |
|
139 | 187 | ## Installation |
140 | 188 |
|
141 | | -**Requirements:** Ruby 3.2+, Rails 7.1+. For the `:vips` driver: [libvips 8.9+](https://libvips.github.io/libvips/install.html). |
| 189 | +**Requirements:** Ruby 3.2+. Rails 7.1+ for Rails integration; non-Rails projects supported via `CapybaraScreenshotDiff.serve()`. For the `:vips` driver: [libvips 8.9+](https://libvips.github.io/libvips/install.html). |
142 | 190 |
|
143 | | -## Advanced Topics |
| 191 | +## Docs |
144 | 192 |
|
145 | 193 | - [Framework Setup](docs/framework-setup.md) — Minitest, RSpec, Cucumber |
| 194 | +- [CI & Non-Rails Integration](docs/ci-integration.md) — GitHub Actions, reusable action, static sites, baseline updates |
| 195 | +- [Configuration Reference](docs/configuration.md) — all options explained |
146 | 196 | - [Image Processing Drivers](docs/drivers.md) — VIPS, ChunkyPNG, perceptual threshold |
147 | 197 | - [Screenshot Organization](docs/organization.md) — groups, sections, cropping, multi-browser |
148 | | -- [Configuration Reference](docs/configuration.md) — all options explained |
149 | 198 | - [Web UI & Custom Reporters](docs/reporters.md) — interactive report, custom reporters |
150 | | -- [CI & Non-Rails Integration](docs/ci-integration.md) — GitHub Actions, reusable action, baseline updates |
151 | | -- [Docker Testing](docs/docker-testing.md) — bin/dtest, recording baselines |
152 | 199 |
|
153 | 200 | ## Development |
154 | 201 |
|
|
0 commit comments