From 69a7f9c65d60bfafbe1751e15dbbf685e5f324d1 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Fri, 18 Oct 2024 15:14:05 -0700
Subject: [PATCH] fix

---
 .../playwright/src/matchers/toBeTruthy.ts     | 19 +++++++++++++++++--
 .../src/matchers/toMatchSnapshot.ts           |  6 ++++--
 tests/page/page-check.spec.ts                 |  5 +++--
 tests/page/page-screenshot.spec.ts            |  8 ++++++++
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/playwright/src/matchers/toBeTruthy.ts b/packages/playwright/src/matchers/toBeTruthy.ts
index 0941ab7a63..9ed240fddc 100644
--- a/packages/playwright/src/matchers/toBeTruthy.ts
+++ b/packages/playwright/src/matchers/toBeTruthy.ts
@@ -42,12 +42,22 @@ export async function toBeTruthy(
   const { matches, log, timedOut, received } = await query(!!this.isNot, timeout);
   const notFound = received === kNoElementsFoundError ? received : undefined;
   const actual = matches ? expected : unexpected;
+
+  let printedExpected = `${matches ? 'not ' : ''}${expected}`
+  let printedReceived = notFound
+    ? kNoElementsFoundError
+    : (matches ? expected : unexpected);
+  
+  console.log('printedReceived:', printedReceived);
+
   const message = () => {
     const header = matcherHint(this, receiver, matcherName, 'locator', arg, matcherOptions, timedOut ? timeout : undefined);
     const logText = callLogText(log);
-    return matches ? `${header}Expected: not ${expected}\nReceived: ${notFound ? kNoElementsFoundError : expected}${logText}` :
-      `${header}Expected: ${expected}\nReceived: ${notFound ? kNoElementsFoundError : unexpected}${logText}`;
+    return `${header}Expected: ${printedExpected}\nReceived: ${printedReceived}${logText}`;
   };
+
+  const header = matcherHint(this, undefined, matcherName, 'locator', arg, matcherOptions, timedOut ? timeout : undefined);
+
   return {
     message,
     pass: matches,
@@ -56,5 +66,10 @@ export async function toBeTruthy(
     expected,
     log,
     timeout: timedOut ? timeout : undefined,
+
+    locator: receiver.toString(),
+    header,
+    printedReceived,
+    printedExpected,
   };
 }
diff --git a/packages/playwright/src/matchers/toMatchSnapshot.ts b/packages/playwright/src/matchers/toMatchSnapshot.ts
index 1e878f8092..bd58eab2ae 100644
--- a/packages/playwright/src/matchers/toMatchSnapshot.ts
+++ b/packages/playwright/src/matchers/toMatchSnapshot.ts
@@ -185,9 +185,8 @@ class SnapshotHelper {
     this.kind = this.mimeType.startsWith('image/') ? 'Screenshot' : 'Snapshot';
   }
 
-  createMatcherResult(message: string, pass: boolean, log?: string[], shortMessage?: string): ImageMatcherResult {
+  createMatcherResult(message: string, pass: boolean, log?: string[], header?: string): ImageMatcherResult {
     const unfiltered: ImageMatcherResult = {
-      shortMessage,
       name: this.matcherName,
       expected: this.expectedPath,
       actual: this.actualPath,
@@ -195,6 +194,9 @@ class SnapshotHelper {
       pass,
       message: () => message,
       log,
+      header,
+      printedExpected: this.expectedPath,
+      printedReceived: this.actualPath,
     };
     return Object.fromEntries(Object.entries(unfiltered).filter(([_, v]) => v !== undefined)) as ImageMatcherResult;
   }
diff --git a/tests/page/page-check.spec.ts b/tests/page/page-check.spec.ts
index 1f9235b025..638bb8d20b 100644
--- a/tests/page/page-check.spec.ts
+++ b/tests/page/page-check.spec.ts
@@ -19,8 +19,9 @@ import { test as it, expect } from './pageTest';
 
 it('should check the box @smoke', async ({ page }) => {
   await page.setContent(`<div>foo</div>`);
-  // expect(['fobao', 'bar']).toBe(expect.arrayContaining([expect.stringContaining('oba'), expect.stringContaining('bar')]));
-  expect('fobaro').toBe('bar');
+  expect(['fobao', 'bar']).toBe(expect.arrayContaining([expect.stringContaining('oba'), expect.stringContaining('bar')]));
+  // expect('fobaro').toBe('bar');
+  // await expect(page.locator('div')).toBeChecked({ timeout: 500 });
   await expect(page.locator('div')).toHaveText('fobaro', { timeout: 500 });
   await page.check('input');
   expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true);
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 879307aa91..6f39f291f6 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -957,3 +957,11 @@ it('should capture css box-shadow', async ({ page, isElectron, isAndroid }) => {
   await page.setContent(`<div style="box-shadow: red 10px 10px 10px; width: 50px; height: 50px;"></div>`);
   await expect(page).toHaveScreenshot();
 });
+
+it('capture changing image', async ({ page, server }) => {
+  await page.setViewportSize({ width: 500, height: 500 });
+  await page.setContent(`<div id='counter'></div>
+    <script>let value = 99000; setInterval(() => window.counter.innerHTML = String(++value), 10)</script>`);
+    // <script>let value = 99000; window.counter.innerHTML = String(++value);</script>`);
+    await expect(page).toHaveScreenshot({ timeout: 2000 });
+});