Storybook: Storybook Storyshots + Playwright

[DimitrK]

Is your feature request related to a problem? Please describe.
Currently Storyshots + Puppeteer support Chromium based browsers only. During development the developer should do the manual testing on other browsers on new and existing UI to ensure consistency and avoid regression issues.
Running screenshot tests on other browsers such as webkit and firefox builts better confidence on your suite and reduces the effort for manual testing on these environments.

Describe the solution you'd like
A new addon based on Storyshots with Playwright is a good candidate to tackle this problem. Playwright team was also behind Puppeteer so they tried to provide a concise way on this migration.

Due to the similarity of the concepts and the APIs, migration between the two should be a mechanical task.

Describe alternatives you've considered
There is an effort made towards porting Puppeteer to firexox which is experimental hence not a good candidate to tackle this problem right now.

Are you able to assist bring the feature to reality?
unfortunately not at the moment

Additional context
-

[wKich]

I also want to add Playwright support for my visual testing tool creevey in near future.

For now creevey support only selenium webdriver, but it provide ultra-fast cross-browser testing and fancy web ui runner with visual diff comparing.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[rajington]

this probably will be a more popular request as playwright becomes more popular

[bard]

@DimitrK puppeteer and Playwright have very similar APIs. This works for me:

import playwright from 'playwright'
// ...

initStoryshots({
  test: imageSnapshot({
    getCustomBrowser: () => {
      return playwright.chromium.launch()
    }
  })
})

To also match Puppeteer's default viewport size:

import playwright from 'playwright'
// ...

initStoryshots({
  test: imageSnapshot({
    getCustomBrowser: async () => {
      const browser = await playwright.chromium.launch()
      const context = await browser.newContext({
        viewport: { width: 800, height: 600 },
      })
      return context
    }
  })
})

[shilman]

@bard WHOA. maybe worth adding to the docs?!

[DimitrK]

Great to let us know @bard . Thank you!

[bard]

@shilman I wouldn't bless it that far. :) As puppeteer is a hard (as opposed to peer) dependency of addon-storyshots-puppeteer, doing the above with TypeScript requires sprinkling a few @ts-ignore to make it work, because puppeteer's Browser type and playwright's Browser types aren't equivalent. IMHO it's best regarded as a hack until some more work can be done on Storyshots.