Running visual tests on Playwright

I was trying to find a proper workaround for having screenshots of native CSS :hover state. As your document suggested, I couldn’t find a proper way of doing that. And I didn’t like any of the workarounds you provided in the document.

But I continued to investigate and noticed that, simulating CSS :hover state is simply possible with Playwright. If I have a simple document with a style h1:hover { background: yellow }, playwright routing like below gives me a screenshot of a h1 element with yellow background. This was not the case for puppeteer.

const { test, expect } = require('@playwright/test');

test('hover', async ({ page }) => {
  await page.goto('http://localhost:8000/template.html');

  await page.hover('h1');
  await page.screenshot({ path: 'h1-hover.png' });

  await expect(page).toHaveURL(/.*template.html/);
});

Is it somehow possible to use Playwright to run visual tests on Chromatic?

[muratcorlu]

I tried pseudo states addon. it looks working very well with Storybook. But once I pushed changes to Chromatic it doesn’t add .pseudo-hover class to every element in the Story. You can see it here: https://www.chromatic.com/component?appId=6267ebb4dd54f5004a65f14a&csfId=components-button--outline-buttons-hover&buildNumber=202&k=62ebdac478667b6909b7632c-1200-interactive-true&h=55&b=-23 Compare Storybook and Snapshot versions. Is this a problem on Chromatic?

[tmeasday]

Hi @muratcorlu the document you mentioned is the current state of the art. We run against various browsers, not all of which use playwright so we would need consider whether this makes sense. I’ll make an internal ticket because it is something we might think about in the future. If you write into our support we can keep you informed about our progress on that.

In the meantime you could look at using the test runner to achieve some of this (maybe not the screenshot part): https://github.com/storybookjs/test-runner#experimental-test-hook-api