Add Playwright Screenshots to Chromatic #1234
Open
Conversation
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
|
hassoncs
force-pushed
the
playwright-screenshots
branch
7 times, most recently
from
9dcfe9c to
f5bc394
Compare
hassoncs
force-pushed
the
playwright-screenshots
branch
2 times, most recently
from
1f69781 to
9a3b2b4
Compare
added 10 commits
July 11, 2025 16:23
This commit enhances the Playwright E2E CI workflow by: - Adding a step to extract all `.png` screenshots from the test results directory into a dedicated `chromatic-screenshots` folder. - Uploading these extracted screenshots as a GitHub artifact named `playwright-screenshots`. - Modifying the Dockerfile to use BuildKit cache mounts for faster APT operations and to correctly set execute permissions for the entrypoint script. - Updating the `run-docker-playwright.js` script to include a `--skip-build` option, allowing users to skip the Docker image build step if the image already exists. - Introducing a `takeScreenshot` fixture in `playwright-base-test.ts` to easily capture and name screenshots during tests, which are then saved with a `chromatic-` prefix. - Integrating the `takeScreenshot` fixture into `sanity.test.ts` to capture a screenshot after the extension is verified as loaded. These changes facilitate better visual regression testing with tools like Chromatic by making Playwright screenshots easily accessible from CI runs.
Remove unnecessary steps for screenshot extraction and Chromatic CLI installation, as these are handled by the Chromatic action directly or are no longer needed. This simplifies the CI workflow for Storybook Playwright snapshots.
Refactor Playwright E2E test suite to use `lodash.camelCase` for consistent screenshot naming and improved readability. This change simplifies the logic for generating hierarchical screenshot names in both the Playwright tests and the Storybook screenshot generation script.
Replaced `lodash.camelCase` with `change-case.camelCase` in `playwright-e2e` and `storybook` to reduce bundle size and dependency footprint. This change specifically targets string manipulation utilities. Also added a `data-testid` to the `SettingsView` component for improved testability.
Enhance the `createTempDir` fixture to generate more descriptive temporary directory names for Playwright e2e tests. The new naming convention includes the test file name and a sanitized version of the test title, making it easier to identify test-specific temporary directories. This also ensures a clean slate for each test by removing and recreating the directory.
- Remove `continue-on-error` from Playwright E2E workflow to ensure failures are caught. - Update `chat-with-response.test.ts` to wait for specific text instead of generic "Task Completed" for more robust assertion. - Enhance `playwright-base-test.ts` to safely clean and create temporary directories, preventing issues with existing directories. - Update Storybook README to reflect current setup and remove outdated Playwright screenshot integration details.
Refactor Playwright e2e test to use a more robust selector (`[role="tablist"]`) for checking settings view visibility, improving test stability. Removed `data-testid` from `SettingsView.tsx` as it's no longer needed for this check.
Refactor the Playwright screenshot story generation script for improved readability, maintainability, and performance. - **Optimized file operations**: Switched to `Promise.all` for concurrent file reading and copying. - **Simplified logic**: Streamlined screenshot parsing and story content creation. - **Improved deduplication**: Enhanced logic for handling duplicate screenshots, prioritizing the latest version. - **Cleaned up helper functions**: Extracted and refined utility functions for clarity. - **Removed redundant imports**: Removed `readFile` as it was no longer used.
hassoncs
force-pushed
the
playwright-screenshots
branch
from
9e8f150 to
e0dd3d7
Compare
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.
With this change, now we can capture screenshots in Playwright and upload them to Chromatic, so we can actually have proper snapshot testing for the entire VS Code extension!