Migrate visual testing from Playwright to Storybook test-runner#333
Merged
Migrate visual testing from Playwright to Storybook test-runner#333
Conversation
Removes the custom extract-stories.mjs script and hand-rolled Playwright test in favour of @storybook/test-runner, which automatically discovers every story and runs Playwright-based smoke + screenshot tests via its postVisit hook — no custom extraction step needed. - Add .storybook/test-runner.ts with jest-image-snapshot postVisit hook - Replace test:visual scripts to use `test-storybook` CLI - Remove playwright.config.ts, visual-tests/extract-stories.mjs, visual-tests/visual.spec.ts - Swap @playwright/test for @storybook/test-runner + jest-image-snapshot - Simplify .gitignore visual-tests entries https://claude.ai/code/session_01LyHfqq9FyNzb1JTwzd22qR
Claude Code ReviewThis repository is configured for manual code reviews. Comment |
Deploying reablocks-storybook with
|
| Latest commit: |
4ae8561
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8130aacf.reablocks-storybook.pages.dev |
| Branch Preview URL: | https://claude-update-visual-regress.reablocks-storybook.pages.dev |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the project’s visual regression testing approach from a custom Playwright-based harness to Storybook’s official test runner, using jest-image-snapshot for image diffs.
Changes:
- Removed the bespoke Playwright visual test spec, story extraction script, and Playwright config.
- Added a Storybook test-runner config that captures per-story screenshots and asserts via
jest-image-snapshot. - Updated
package.jsonscripts/dependencies to usetest-storybookinstead ofplaywright test.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| visual-tests/visual.spec.ts | Removed custom Playwright spec that iterated over extracted stories and asserted screenshots. |
| visual-tests/extract-stories.mjs | Removed script that fetched Storybook index.json and generated stories.json. |
| playwright.config.ts | Removed Playwright test runner configuration previously used for visual tests. |
| package.json | Replaced visual test scripts with test-storybook commands; swapped dependencies to Storybook test runner + image snapshot tooling. |
| .storybook/test-runner.ts | Added Storybook test-runner hooks to wait for readiness, freeze animations, screenshot, and diff images. |
| .gitignore | Simplified visual testing ignores; still ignores the snapshot output directory used by the new runner. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+19
to
+21
| "test:visual": "test-storybook --url http://localhost:9009", | ||
| "test:visual:update": "test-storybook --url http://localhost:9009 -u", | ||
| "test:visual:ci": "test-storybook --url http://localhost:9009 --ci --maxWorkers=1", |
Comment on lines
+4
to
+5
|
|
||
| const customSnapshotsDir = `${process.cwd()}/visual-tests/screenshots`; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Checklist
PR Type
What is the current behavior?
Visual regression testing is currently implemented using Playwright with a custom story extraction script that fetches story metadata and generates snapshots.
What is the new behavior?
Visual regression testing now uses Storybook's native
test-runnerwithjest-image-snapshotfor comparison. This eliminates the need for custom story extraction and leverages Storybook's built-in testing infrastructure.Changes Made:
playwright.config.ts- Playwright configuration no longer neededvisual-tests/visual.spec.ts- Custom Playwright test filevisual-tests/extract-stories.mjs- Story extraction script no longer needed.storybook/test-runner.ts- Storybook test-runner configuration withjest-image-snapshotintegrationpackage.jsonscripts:test:visualnow usestest-storybookinstead of Playwrighttest:visual:updateuses test-runner's-uflag for snapshot updatestest:visual:cifor CI environments with single worker@playwright/test@storybook/test-runnerandjest-image-snapshot.gitignore- Removed Playwright-specific test artifactsDoes this PR introduce a breaking change?
Other information
The migration simplifies the visual testing setup by using Storybook's native test infrastructure instead of maintaining a separate Playwright configuration. The test-runner automatically discovers and tests all stories without requiring manual extraction. Animation freezing and screenshot comparison logic remain functionally equivalent.
https://claude.ai/code/session_01LyHfqq9FyNzb1JTwzd22qR