It passes in Chrome. Does Safari agree?

1. 1

   Install Happo

   npm install --save-dev happo

2. 2

   Add the plugin

   import { playwright } from '@vitest/browser-playwright';
   import { happoVitestPlugin } from 'happo/vitest';
   import { defineConfig } from 'vitest/config';
   
   export default defineConfig({
     plugins: [happoVitestPlugin()],
     test: {
       browser: {
         enabled: true,
         provider: playwright(),
         instances: [{ browser: 'chromium' }],
       },
     },
   });

   One browser instance is enough. Happo renders each screenshot again in every browser you pick.

3. 3

   Take a screenshot in a test you have

   import { render, screen } from '@testing-library/react';
   import { happoScreenshot } from 'happo/vitest/browser';
   import { test } from 'vitest';
   import { userEvent } from 'vitest/browser';
   
   import AccountMenu from './AccountMenu';
   
   test('open', async () => {
     render(<AccountMenu />);
     await userEvent.click(screen.getByRole('button'));
   
     await happoScreenshot(screen.getByRole('menu'), {
       component: 'AccountMenu',
       variant: 'open',
     });
   });

   Pass any element: one from Testing Library’s screen, or a locator from page in vitest/browser.

4. 4

   Pick your browsers

   import { defineConfig } from 'happo';
   
   export default defineConfig({
     integration: {
       type: 'vitest',
     },
     targets: {
       chrome: { type: 'chrome', viewport: '1024x768' },
       safari: { type: 'safari', viewport: '1024x768' },
       iphone: { type: 'ios-safari' },
     },
   });

5. 5

   Wrap vitest run in CI

   npx happo -- vitest run

   Happo keeps the screenshots of each test that passes, renders them in each browser in parallel, and posts a status on the pull request.

The full Vitest guide