diff --git a/packages/playwright-core/src/utils/comparators.ts b/packages/playwright-core/src/utils/comparators.ts index 4f07b1cf00..6cd73a047e 100644 --- a/packages/playwright-core/src/utils/comparators.ts +++ b/packages/playwright-core/src/utils/comparators.ts @@ -66,7 +66,11 @@ function compareImages(mimeType: string, actualBuffer: Buffer | string, expected maxDiffPixels = Math.min(maxDiffPixels1, maxDiffPixels2); else maxDiffPixels = maxDiffPixels1 ?? maxDiffPixels2 ?? 0; - return count > maxDiffPixels ? { diff: PNG.sync.write(diff) } : null; + const ratio = count / (expected.width * expected.height); + return count > maxDiffPixels ? { + errorMessage: `${count} pixels (ratio ${ratio.toFixed(2)} of all image pixels) are different`, + diff: PNG.sync.write(diff), + } : null; } function compareText(actual: Buffer | string, expectedBuffer: Buffer): ComparatorResult { diff --git a/packages/playwright-test/src/matchers/toMatchSnapshot.ts b/packages/playwright-test/src/matchers/toMatchSnapshot.ts index ac4467446d..ec6823323d 100644 --- a/packages/playwright-test/src/matchers/toMatchSnapshot.ts +++ b/packages/playwright-test/src/matchers/toMatchSnapshot.ts @@ -179,7 +179,7 @@ class SnapshotHelper { '', ]); } - if (log) + if (log?.length) output.push(callLogText(log)); if (expected !== undefined) { diff --git a/tests/playwright-test/to-have-screenshot.spec.ts b/tests/playwright-test/to-have-screenshot.spec.ts index 88e9011e28..3b8c0c30b2 100644 --- a/tests/playwright-test/to-have-screenshot.spec.ts +++ b/tests/playwright-test/to-have-screenshot.spec.ts @@ -254,8 +254,10 @@ test('should fail when screenshot is different pixels', async ({ runInlineTest } ` }); expect(result.exitCode).toBe(1); - expect(result.output).toContain('Timeout 2000ms exceeded'); expect(result.output).toContain('Screenshot comparison failed'); + expect(result.output).toContain('921600 pixels'); + expect(result.output).not.toContain('Call log'); + expect(result.output).toContain('ratio 1.00'); expect(result.output).toContain('Expected:'); expect(result.output).toContain('Received:'); });