Adds support for Playwright and Cypress viewports.
This works as follows:
DOM snapshots are captured per viewport, with a file name like: test-name-snapshot-1.w1200h800.snapshot.json
Stories files are written during the test run as before, one per test file, with each story's server id referencing only the test name + snapshot name, like: id: 'test-name-snapshot-1'
During an archive storybook or build archive storybook run, viewports are added to the stories files. The logic is something like this:
for each stories file
for each story in the file
find the id (test-name-snapshot-1)
find every snapshot file that matches that ID
get a list of viewports for that given story from the snapshot file names
update the story with both modes and viewports parameters built from the list of viewports
When Storybook loads, the preview file will use the id and the given viewport from the story context to determine which snapshot file to load, falling back to a default if the viewport doesn't match one that's been captured
The post-processing of the stories files has to happen after the pw/cy test run because tests run in isolation, and even possibly in separate sharded containers, so we only know which viewports a given test ran in after all is said and done.
How to test
Take a look at the new viewports tests in the Chromatic E2E projects
Issue: #
What Changed
Adds support for Playwright and Cypress viewports.
This works as follows:
test-name-snapshot-1.w1200h800.snapshot.jsonid: 'test-name-snapshot-1'id(test-name-snapshot-1)modesandviewportsparameters built from the list of viewportspreviewfile will use theidand the given viewport from the story context to determine which snapshot file to load, falling back to a default if the viewport doesn't match one that's been capturedThe post-processing of the stories files has to happen after the pw/cy test run because tests run in isolation, and even possibly in separate sharded containers, so we only know which viewports a given test ran in after all is said and done.
How to test