← Back to Discord Forum

guides how to setup playwright for storybook VRT

Hello everyone!

Can someone recommend any manuals/guides about setting up playwright to cover storybook with visual regression testing? I've found this one so far, but I'm having issues (possibly not related to the guide itself), so wanted to have a look at a different guide to compare


This thread is trying to answer question "How to set up Playwright for Storybook with Visual Regression Testing?"

6 replies

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

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.