guides how to setup playwright for storybook VRT

What issues do you have with it? I'm doing it a similar way with slight differences.

• For running the server I'm using the webServer in the playwright it self

• Using a node command to extract all paths from stories.json and adding to a file as an array, that's done before the test run

• Then iterating over the array with following: elementPaths.forEach(async (element) => { test(Compare ${element}, async ({ page }) => { await page.evaluate(() => document.fonts.ready); await page.goto(/iframe.html?id=${element}&viewMode=story); await page.waitForLoadState('domcontentloaded'); await page.waitForLoadState('networkidle'); await expect(page.locator('#storybook-root')).toHaveScreenshot( ${element}.png` );

  await actOnElement(page.locator('//[@id="storybook-root"]//').first());

  await expect(page.locator('#storybook-root')).toHaveScreenshot( ${element}-after.png ); }); });`

actOnElement: does hover and focus + click or type

Hi @oci1458 !

so following that guide I've added utils.ts as suggested, and there it's stated that we need to extract all paths from stories. I wanted to run the node command to check if everything's ok so far, but when I run npx sb extract I get an error

ERR! Error: ENOENT: no such file or directory, stat '<redacted>/GIT/pp-experiment/libraries/core/storybook-static'
ERR!  [Error: ENOENT: no such file or directory, stat '<redacted>/GIT/pp-experiment/libraries/core/storybook-static'] {
ERR!   errno: -2,
ERR!   code: 'ENOENT',
ERR!   syscall: 'stat',
ERR!   path: '<redacted>/GIT/pp-experiment/libraries/core/storybook-static'
ERR! }

since storybook was added some time ago and not by me, I'm not quite sure to which folder exactly it should be pointing, there's a .storybook folder under core

for sb extract to work you need to add features: { buildStoriesJson: true, }, to the config of the storybook build https://storybook.js.org/docs/react/configure/overview#feature-flags

If this doesn't work, you may need to check where is the storybook actually been built, for me this is in: ./dist/storybook/amy/stories.json but it may also be in .storybook/dist, depends on the config

yes, thanks, for me it's also under libraries/core/dist/storybook/stories.json

but in this case should command npx sb extract somehow be adjusted? cause after adding buildStoriesJson: true to config file, and running npx sb extract it still is trying to look for storybook-static

You will need to point sb extract to the directory: npx sb extract my-built-storybook-directory my-other-directory/stories.json

or you can skip sb extract altogherther by pointing STORYBOOK_DIR to get the stories.json file directly from libraries/core/dist/storybook/stories.json

thank you very much, I'll try to do that