From 1f5cfcaeec451749719a535e5b9e9e18dd2dd095 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <lushnikov@chromium.org>
Date: Fri, 4 Mar 2022 12:01:05 -0700
Subject: [PATCH] fix(to-have-screenshot): show number of bad pixels in
 mismatched error (#12502)

Drive-by: do not show empty call log.

References #12441
---
 packages/playwright-core/src/utils/comparators.ts        | 6 +++++-
 packages/playwright-test/src/matchers/toMatchSnapshot.ts | 2 +-
 tests/playwright-test/to-have-screenshot.spec.ts         | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

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<T extends ImageComparatorOptions> {
         '',
       ]);
     }
-    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:');
 });