diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx index 30314ae0b2..82a3650414 100644 --- a/packages/html-reporter/src/testResultView.tsx +++ b/packages/html-reporter/src/testResultView.tsx @@ -49,6 +49,7 @@ export const TestResultView: React.FC<{ const expected = attachmentsMap.get('expected'); const actual = attachmentsMap.get('actual'); const diff = attachmentsMap.get('diff'); + const hasImages = [actual?.contentType, expected?.contentType, diff?.contentType].some(v => v && /^image\//i.test(v)); return
{result.error && @@ -57,8 +58,8 @@ export const TestResultView: React.FC<{ {result.steps.map((step, i) => )} } - {expected && actual && - + {expected && actual && + {hasImages && } {diff && } diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts index 463d0c4316..31cb900292 100644 --- a/tests/playwright-test/reporter-html.spec.ts +++ b/tests/playwright-test/reporter-html.spec.ts @@ -114,6 +114,8 @@ test('should include image diff', async ({ runInlineTest, page, showReport }) => await showReport(); await page.click('text=fails'); + await expect(page.locator('text=Image mismatch')).toBeVisible(); + await expect(page.locator('text=Snapshot mismatch')).toHaveCount(0); const imageDiff = page.locator('data-testid=test-result-image-mismatch'); const image = imageDiff.locator('img'); await expect(image).toHaveAttribute('src', /.*png/); @@ -126,6 +128,34 @@ test('should include image diff', async ({ runInlineTest, page, showReport }) => expect(set.size).toBe(3); }); +test('should not include image diff with non-images', async ({ runInlineTest, page, showReport }) => { + const expected = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAhVJREFUeJzt07ERwCAQwLCQ/Xd+FuDcQiFN4MZrZuYDjv7bAfAyg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAgEg0AwCASDQDAIBINAMAiEDVPZBYx6ffy+AAAAAElFTkSuQmCC', 'base64'); + const result = await runInlineTest({ + 'playwright.config.ts': ` + module.exports = { use: { viewport: { width: 200, height: 200 }} }; + `, + 'a.test.js-snapshots/expected-linux': expected, + 'a.test.js-snapshots/expected-darwin': expected, + 'a.test.js-snapshots/expected-win32': expected, + 'a.test.js': ` + const { test } = pwt; + test('fails', async ({ page }, testInfo) => { + await page.setContent('Hello World'); + const screenshot = await page.screenshot(); + await expect(screenshot).toMatchSnapshot('expected'); + }); + `, + }, { reporter: 'dot,html' }); + expect(result.exitCode).toBe(1); + expect(result.failed).toBe(1); + + await showReport(); + await page.click('text=fails'); + await expect(page.locator('text=Snapshot mismatch')).toBeVisible(); + await expect(page.locator('text=Image mismatch')).toHaveCount(0); + await expect(page.locator('img')).toHaveCount(0); +}); + test('should include screenshot on failure', async ({ runInlineTest, page, showReport }) => { const result = await runInlineTest({ 'playwright.config.ts': `