From 1e29ecace9f9dc5f490edf025d875fffbad9d2c4 Mon Sep 17 00:00:00 2001 From: Alex C Date: Tue, 7 Apr 2026 21:09:35 +0100 Subject: [PATCH 1/2] fix(html-reporter): align screenshot slider size labels --- packages/web/src/shared/imageDiffView.tsx | 12 ++++---- tests/playwright-test/reporter-html.spec.ts | 34 +++++++++++++++++++++ 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/web/src/shared/imageDiffView.tsx b/packages/web/src/shared/imageDiffView.tsx index 6f0028bca9336..756d1e3533e4f 100644 --- a/packages/web/src/shared/imageDiffView.tsx +++ b/packages/web/src/shared/imageDiffView.tsx @@ -149,15 +149,15 @@ export const ImageDiffSlider: React.FC<{ const sameSize = expectedImage.naturalWidth === actualImage.naturalWidth && expectedImage.naturalHeight === actualImage.naturalHeight; return
- {!hideSize &&
- {!sameSize && Expected } - {expectedImage.naturalWidth} - x - {expectedImage.naturalHeight} - {!sameSize && Actual } + {!hideSize &&
+ {!sameSize && Actual } {!sameSize && {actualImage.naturalWidth}} {!sameSize && x} {!sameSize && {actualImage.naturalHeight}} + {!sameSize && {expectedTitle} } + {expectedImage.naturalWidth} + x + {expectedImage.naturalHeight}
}
{ + const expected = createImage(201, 200, 255, 0, 0); + const actual = createImage(200, 200, 0, 255, 0); + const result = await runInlineTest({ + 'playwright.config.ts': ` + module.exports = { use: { viewport: { width: 200, height: 200 }} }; + `, + 'a.test.js-snapshots/expected-linux.png': expected, + 'a.test.js-snapshots/expected-darwin.png': expected, + 'a.test.js-snapshots/expected-win32.png': expected, + 'actual.png': actual, + 'a.test.js': ` + import fs from 'fs'; + import { test, expect } from '@playwright/test'; + test('fails', async () => { + const screenshot = fs.readFileSync('actual.png'); + await expect(screenshot).toMatchSnapshot('expected.png'); + }); + `, + }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' }); + expect(result.exitCode).toBe(1); + expect(result.failed).toBe(1); + + await showReport(); + await page.getByRole('link', { name: 'fails' }).click(); + const imageDiff = page.getByTestId('test-results-image-diff').getByTestId('test-result-image-mismatch'); + await imageDiff.getByText('Slider', { exact: true }).click(); + await expect(imageDiff.getByTestId('test-result-image-mismatch-slider-size')).toHaveText( + /Actual\s*200\s*x\s*200\s*Expected\s*201\s*x\s*200/ + ); + await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected'); + await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual'); + }); + test('should include multiple image diffs', async ({ runInlineTest, page, showReport }) => { const IMG_WIDTH = 200; const IMG_HEIGHT = 200; From 8f1e0c196a71b10d296e23054be28dd0a9058987 Mon Sep 17 00:00:00 2001 From: Alex C Date: Wed, 8 Apr 2026 15:30:54 +0100 Subject: [PATCH 2/2] chore(html-reporter): remove test-only changes --- packages/web/src/shared/imageDiffView.tsx | 2 +- tests/playwright-test/reporter-html.spec.ts | 34 --------------------- 2 files changed, 1 insertion(+), 35 deletions(-) diff --git a/packages/web/src/shared/imageDiffView.tsx b/packages/web/src/shared/imageDiffView.tsx index 756d1e3533e4f..70c937460d23f 100644 --- a/packages/web/src/shared/imageDiffView.tsx +++ b/packages/web/src/shared/imageDiffView.tsx @@ -149,7 +149,7 @@ export const ImageDiffSlider: React.FC<{ const sameSize = expectedImage.naturalWidth === actualImage.naturalWidth && expectedImage.naturalHeight === actualImage.naturalHeight; return
- {!hideSize &&
+ {!hideSize &&
{!sameSize && Actual } {!sameSize && {actualImage.naturalWidth}} {!sameSize && x} diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts index b7784dd5d8775..2b369cd63a2a3 100644 --- a/tests/playwright-test/reporter-html.spec.ts +++ b/tests/playwright-test/reporter-html.spec.ts @@ -226,40 +226,6 @@ for (const useIntermediateMergeReport of [true, false] as const) { } }); - test('should show slider dimensions in visual order', async ({ runInlineTest, page, showReport }) => { - const expected = createImage(201, 200, 255, 0, 0); - const actual = createImage(200, 200, 0, 255, 0); - const result = await runInlineTest({ - 'playwright.config.ts': ` - module.exports = { use: { viewport: { width: 200, height: 200 }} }; - `, - 'a.test.js-snapshots/expected-linux.png': expected, - 'a.test.js-snapshots/expected-darwin.png': expected, - 'a.test.js-snapshots/expected-win32.png': expected, - 'actual.png': actual, - 'a.test.js': ` - import fs from 'fs'; - import { test, expect } from '@playwright/test'; - test('fails', async () => { - const screenshot = fs.readFileSync('actual.png'); - await expect(screenshot).toMatchSnapshot('expected.png'); - }); - `, - }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' }); - expect(result.exitCode).toBe(1); - expect(result.failed).toBe(1); - - await showReport(); - await page.getByRole('link', { name: 'fails' }).click(); - const imageDiff = page.getByTestId('test-results-image-diff').getByTestId('test-result-image-mismatch'); - await imageDiff.getByText('Slider', { exact: true }).click(); - await expect(imageDiff.getByTestId('test-result-image-mismatch-slider-size')).toHaveText( - /Actual\s*200\s*x\s*200\s*Expected\s*201\s*x\s*200/ - ); - await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected'); - await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual'); - }); - test('should include multiple image diffs', async ({ runInlineTest, page, showReport }) => { const IMG_WIDTH = 200; const IMG_HEIGHT = 200;