fix(expect): throw better received error when no element was found (#…

…29890)

Fixes #29873

packages/playwright-core/src/server/frames.ts

@@ -1420,7 +1420,7 @@ export class Frame extends SdkObject {
         const injected = await context.injectedScript();
         progress.throwIfAborted();
 
-        const { log, matches, received, missingRecevied } = await injected.evaluate(async (injected, { info, options, callId }) => {
+        const { log, matches, received, missingReceived } = await injected.evaluate(async (injected, { info, options, callId }) => {
           const elements = info ? injected.querySelectorAll(info.parsed, document) : [];
           const isArray = options.expression === 'to.have.count' || options.expression.endsWith('.array');
           let log = '';
@@ -1432,16 +1432,16 @@ export class Frame extends SdkObject {
             log = `  locator resolved to ${injected.previewNode(elements[0])}`;
           if (callId)
             injected.markTargetElements(new Set(elements), callId);
-          return { log, ...(await injected.expect(elements[0], options, elements)) };
+          return { log, ...await injected.expect(elements[0], options, elements) };
         }, { info, options, callId: metadata.id });
 
         if (log)
           progress.log(log);
         // Note: missingReceived avoids `unexpected value "undefined"` when element was not found.
-        if (matches === options.isNot && !missingRecevied) {
-          lastIntermediateResult.received = received;
+        if (matches === options.isNot) {
+          lastIntermediateResult.received = missingReceived ? '<element(s) not found>' : received;
           lastIntermediateResult.isSet = true;
-          if (!Array.isArray(received))
+          if (!missingReceived && !Array.isArray(received))
             progress.log(`  unexpected value "${renderUnexpectedValue(options.expression, received)}"`);
         }
         if (!oneShot && matches === options.isNot) {

packages/playwright-core/src/server/injected/injectedScript.ts

@@ -1098,7 +1098,7 @@ export class InjectedScript {
     this.onGlobalListenersRemoved.add(addHitTargetInterceptorListeners);
   }
 
-  async expect(element: Element | undefined, options: FrameExpectParams, elements: Element[]): Promise<{ matches: boolean, received?: any, missingRecevied?: boolean }> {
+  async expect(element: Element | undefined, options: FrameExpectParams, elements: Element[]): Promise<{ matches: boolean, received?: any, missingReceived?: boolean }> {
     const isArray = options.expression === 'to.have.count' || options.expression.endsWith('.array');
     if (isArray)
       return this.expectArray(elements, options);
@@ -1119,7 +1119,7 @@ export class InjectedScript {
       if (options.isNot && options.expression === 'to.be.in.viewport')
         return { matches: false };
       // When none of the above applies, expect does not match.
-      return { matches: options.isNot, missingRecevied: true };
+      return { matches: options.isNot, missingReceived: true };
     }
     return await this.expectSingleElement(element, options);
   }

packages/playwright/src/matchers/matcherHint.ts

@@ -20,6 +20,8 @@ import type { Locator } from 'playwright-core';
 import type { StackFrame } from '@protocol/channels';
 import { stringifyStackFrames } from 'playwright-core/lib/utils';
 
+export const kNoElementsFoundError = '<element(s) not found>';
+
 export function matcherHint(state: ExpectMatcherContext, locator: Locator | undefined, matcherName: string, expression: any, actual: any, matcherOptions: any, timeout?: number) {
   let header = state.utils.matcherHint(matcherName, expression, actual, matcherOptions).replace(/ \/\/ deep equality/, '') + '\n\n';
   if (timeout)

packages/playwright/src/matchers/toBeTruthy.ts

@@ -15,7 +15,7 @@
  */
 
 import { expectTypes, callLogText } from '../util';
-import { matcherHint } from './matcherHint';
+import { kNoElementsFoundError, matcherHint } from './matcherHint';
 import type { MatcherResult } from './matcherHint';
 import { currentExpectTimeout } from '../common/globals';
 import type { ExpectMatcherContext } from './expect';
@@ -40,13 +40,14 @@ export async function toBeTruthy(
   };
 
   const timeout = currentExpectTimeout(options);
-  const { matches, log, timedOut } = await query(!!this.isNot, timeout);
+  const { matches, log, timedOut, received } = await query(!!this.isNot, timeout);
+  const notFound = received === kNoElementsFoundError ? received : undefined;
   const actual = matches ? expected : unexpected;
   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: ${expected}${logText}` :
-      `${header}Expected: ${expected}\nReceived: ${unexpected}${logText}`;
+    return matches ? `${header}Expected: not ${expected}\nReceived: ${notFound ? kNoElementsFoundError : expected}${logText}` :
+      `${header}Expected: ${expected}\nReceived: ${notFound ? kNoElementsFoundError : unexpected}${logText}`;
   };
   return {
     message,

packages/playwright/src/matchers/toMatchText.ts

@@ -23,7 +23,7 @@ import {
   printReceivedStringContainExpectedResult,
   printReceivedStringContainExpectedSubstring
 } from './expect';
-import { matcherHint } from './matcherHint';
+import { kNoElementsFoundError, matcherHint } from './matcherHint';
 import type { MatcherResult } from './matcherHint';
 import { currentExpectTimeout } from '../common/globals';
 import type { Locator } from 'playwright-core';
@@ -64,39 +64,28 @@ export async function toMatchText(
   const { matches: pass, received, log, timedOut } = await query(!!this.isNot, timeout);
   const stringSubstring = options.matchSubstring ? 'substring' : 'string';
   const receivedString = received || '';
-  const message = pass
-    ? () =>
-      typeof expected === 'string'
-        ? matcherHint(this, receiver, matcherName, 'locator', undefined, matcherOptions, timedOut ? timeout : undefined) +
-        `Expected ${stringSubstring}: not ${this.utils.printExpected(expected)}\n` +
-        `Received string: ${printReceivedStringContainExpectedSubstring(
-            receivedString,
-            receivedString.indexOf(expected),
-            expected.length,
-        )}` + callLogText(log)
-        : matcherHint(this, receiver, matcherName, 'locator', undefined, matcherOptions, timedOut ? timeout : undefined) +
-        `Expected pattern: not ${this.utils.printExpected(expected)}\n` +
-        `Received string: ${printReceivedStringContainExpectedResult(
-            receivedString,
-            typeof expected.exec === 'function'
-              ? expected.exec(receivedString)
-              : null,
-        )}` + callLogText(log)
-    : () => {
-      const labelExpected = `Expected ${typeof expected === 'string' ? stringSubstring : 'pattern'
-      }`;
-      const labelReceived = 'Received string';
-
-      return (
-        matcherHint(this, receiver, matcherName, 'locator', undefined, matcherOptions, timedOut ? timeout : undefined) +
-        this.utils.printDiffOrStringify(
-            expected,
-            receivedString,
-            labelExpected,
-            labelReceived,
-            this.expand !== false,
-        )) + callLogText(log);
-    };
+  const messagePrefix = matcherHint(this, receiver, matcherName, 'locator', undefined, matcherOptions, timedOut ? timeout : undefined);
+  const notFound = received === kNoElementsFoundError;
+  const message = () => {
+    if (pass) {
+      if (typeof expected === 'string') {
+        if (notFound)
+          return messagePrefix + `Expected ${stringSubstring}: not ${this.utils.printExpected(expected)}\nReceived: ${received}` + callLogText(log);
+        const printedReceived = printReceivedStringContainExpectedSubstring(receivedString, receivedString.indexOf(expected), expected.length);
+        return messagePrefix + `Expected ${stringSubstring}: not ${this.utils.printExpected(expected)}\nReceived string: ${printedReceived}` + callLogText(log);
+      } else {
+        if (notFound)
+          return messagePrefix + `Expected pattern: not ${this.utils.printExpected(expected)}\nReceived: ${received}` + callLogText(log);
+        const printedReceived = printReceivedStringContainExpectedResult(receivedString, typeof expected.exec === 'function' ? expected.exec(receivedString) : null);
+        return messagePrefix + `Expected pattern: not ${this.utils.printExpected(expected)}\nReceived string: ${printedReceived}` + callLogText(log);
+      }
+    } else {
+      const labelExpected = `Expected ${typeof expected === 'string' ? stringSubstring : 'pattern'}`;
+      if (notFound)
+        return messagePrefix + `${labelExpected}: ${this.utils.printExpected(expected)}\nReceived: ${received}` + callLogText(log);
+      return messagePrefix + this.utils.printDiffOrStringify(expected, receivedString, labelExpected, 'Received string', this.expand !== false) + callLogText(log);
+    }
+  };
 
   return {
     name: matcherName,

tests/page/expect-matcher-result.spec.ts

@@ -86,7 +86,7 @@ test('toBeTruthy-based assertions should have matcher result', async ({ page })
 
 Locator: locator('#node2')
 Expected: visible
-Received: hidden
+Received: <element(s) not found>
 Call log`);
 
   }

tests/page/expect-to-have-text.spec.ts

@@ -158,7 +158,7 @@ test.describe('not.toHaveText', () => {
     await page.setContent('<div>hello</div>');
     const error = await expect(page.locator('span')).not.toHaveText('hello', { timeout: 1000 }).catch(e => e);
     expect(stripAnsi(error.message)).toContain('Expected string: not "hello"');
-    expect(stripAnsi(error.message)).toContain('Received string: ""');
+    expect(stripAnsi(error.message)).toContain('Received: <element(s) not found>');
     expect(stripAnsi(error.message)).toContain('waiting for locator(\'span\')');
   });
 });

tests/page/matchers.misc.spec.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { stripAnsi } from '../config/utils';
 import { test as it, expect } from './pageTest';
 
 it('should outlive frame navigation', async ({ page, server }) => {
@@ -23,3 +24,24 @@ it('should outlive frame navigation', async ({ page, server }) => {
   }, 1000);
   await expect(page.locator('.box').first()).toBeEmpty();
 });
+
+it('should print no-locator-resolved error when locator matcher did not resolve to any element', async ({ page, server }) => {
+  const myLocator = page.locator('.nonexisting');
+  const expectWithShortLivingTimeout = expect.configure({ timeout: 10 });
+  const locatorMatchers = [
+    () => expectWithShortLivingTimeout(myLocator).toBeAttached(),                 // Boolean matcher
+    () => expectWithShortLivingTimeout(myLocator).toHaveJSProperty('abc', 'abc'), // Equal matcher
+    () => expectWithShortLivingTimeout(myLocator).not.toHaveText('abc'),          // Text matcher - pass / string
+    () => expectWithShortLivingTimeout(myLocator).not.toHaveText(/abc/),          // Text matcher - pass / RegExp
+    () => expectWithShortLivingTimeout(myLocator).toContainText('abc'),           // Text matcher - fail / string
+    () => expectWithShortLivingTimeout(myLocator).toContainText(/abc/),           // Text matcher - fail / RegExp
+  ];
+  for (const matcher of locatorMatchers) {
+    await it.step(matcher.toString(), async () => {
+      const error = await matcher().catch(e => e);
+      expect(error).toBeInstanceOf(Error);
+      expect(error.message).toContain(`waiting for locator('.nonexisting')`);
+      expect(stripAnsi(error.message)).toMatch(/Received:  ?"?<element\(s\) not found>/);
+    });
+  }
+});

tests/playwright-test/expect.spec.ts

@@ -647,7 +647,7 @@ test('should print pending operations for toHaveText', async ({ runInlineTest })
   const output = result.output;
   expect(output).toContain(`expect(locator).toHaveText(expected)`);
   expect(output).toContain('Expected string: "Text"');
-  expect(output).toContain('Received string: ""');
+  expect(output).toContain('Received: <element(s) not found>');
   expect(output).toContain('waiting for locator(\'no-such-thing\')');
 });