import type { TestFsStructure } from '../../test-utils' import { describe, expect, test } from 'vitest' import { runInlineTests } from '../../test-utils' import utilsContent from '../fixtures/expect-dom/utils?raw' const testFilename = 'basic.test.ts' async function runBrowserTests(structure: TestFsStructure) { return runInlineTests({ ...structure, 'vitest.config.js': ` import { instances, provider } from '../settings.ts' export default { test: { browser: { enabled: true, screenshotFailures: true, provider, ui: false, headless: true, instances: instances.slice(0, 1), // logic not bound to browser instance }, reporters: ['verbose'], update: 'new', }, }`, }) } function extractScreenshotPath(string: string): string | undefined { return string.match(/- (vitest-test-.*?\.png)/)[1] } describe('failure screenshots', () => { describe('`toMatchScreenshot`', () => { test('usually does NOT produce a failure screenshot', async () => { const { stderr } = await runBrowserTests({ [testFilename]: /* ts */ ` import { page } from 'vitest/browser' import { test } from 'vitest' import { render } from './utils' test('screenshot-initial', async ({ expect }) => { render('
Test
') await expect(page.getByTestId('el')).toMatchScreenshot() }) `, 'utils.ts': utilsContent, }) expect(stderr).toContain('No existing reference screenshot found; a new one was created.') expect(stderr).not.toContain('Failure screenshot:') }) test('unstable screenshot fails produces a failure screenshot', async () => { const { stderr } = await runBrowserTests({ [testFilename]: /* ts */ ` import { page } from 'vitest/browser' import { test } from 'vitest' import { render } from './utils' test('screenshot-unstable', async ({ expect }) => { render('
Test
') await expect(page.getByTestId('el')).toMatchScreenshot({ timeout: 1 }) }) `, 'utils.ts': utilsContent, }) expect(stderr).toContain('Could not capture a stable screenshot within 1ms.') expect(stderr).toContain('Failure screenshot:') const screenshotPath = extractScreenshotPath(stderr) expect(screenshotPath).toContain( '.vitest/attachments/failure-screenshots/basic.test.ts/screenshot-unstable.png', ) }) test('`expect.soft` produces a failure screenshot', async () => { const { stderr } = await runBrowserTests({ [testFilename]: /* ts */ ` import { page } from 'vitest/browser' import { test } from 'vitest' import { render } from './utils' test('screenshot-soft-then-fail', async ({ expect }) => { render('
Test
') await expect.soft(page.getByTestId('el')).toMatchScreenshot() expect(1).toBe(2) }) `, 'utils.ts': utilsContent, }) expect(stderr).toContain('No existing reference screenshot found; a new one was created.') expect(stderr).toContain('expected 1 to be 2') expect(stderr).toContain('Failure screenshot:') const screenshotPath = extractScreenshotPath(stderr) expect(screenshotPath).toContain( '.vitest/attachments/failure-screenshots/basic.test.ts/screenshot-soft-then-fail.png', ) }) }) })