feat: show locator for expect steps in report (#38218)

dgozman · web-flow · commit d893c0028e95 · 2025-11-17T14:01:32.000-08:00
diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts
@@ -268,8 +268,8 @@ const playwrightFixtures: Fixtures<TestFixtures, WorkerFixtures> = ({
           // and connect it to the existing expect step.
           if (zone.apiName)
             data.apiName = zone.apiName;
-          if (zone.title)
-            data.title = zone.title;
+          if (zone.shortTitle || zone.title)
+            data.title = zone.shortTitle ?? zone.title;
           data.stepId = zone.stepId;
           return;
         }
diff --git a/packages/playwright/src/matchers/expect.ts b/packages/playwright/src/matchers/expect.ts
@@ -24,6 +24,7 @@ import {
 
 import { ExpectError, isJestError } from './matcherHint';
 import {
+  computeMatcherTitleSuffix,
   toBeAttached,
   toBeChecked,
   toBeDisabled,
@@ -55,7 +56,7 @@ import {
   toPass
 } from './matchers';
 import { toMatchAriaSnapshot } from './toMatchAriaSnapshot';
-import { toHaveScreenshot, toHaveScreenshotStepTitle, toMatchSnapshot } from './toMatchSnapshot';
+import { toHaveScreenshot, toMatchSnapshot } from './toMatchSnapshot';
 import {
   INVERTED_COLOR,
   RECEIVED_COLOR,
@@ -114,7 +115,7 @@ export const printReceivedStringContainExpectedResult = (
 type ExpectMessage = string | { message?: string };
 
 function createMatchers(actual: unknown, info: ExpectMetaInfo, prefix: string[]): any {
-  return new Proxy(expectLibrary(actual), new ExpectMetaInfoProxyHandler(info, prefix));
+  return new Proxy(expectLibrary(actual), new ExpectMetaInfoProxyHandler(actual, info, prefix));
 }
 
 const userMatchersSymbol = Symbol('userMatchers');
@@ -300,10 +301,12 @@ type ExpectMetaInfo = {
 };
 
 class ExpectMetaInfoProxyHandler implements ProxyHandler<any> {
+  private _actual: any;
   private _info: ExpectMetaInfo;
   private _prefix: string[];
 
-  constructor(info: ExpectMetaInfo, prefix: string[]) {
+  constructor(actual: any, info: ExpectMetaInfo, prefix: string[]) {
+    this._actual = actual;
     this._info = { ...info };
     this._prefix = prefix;
   }
@@ -344,11 +347,11 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler<any> {
         return matcher.call(target, ...args);
 
       const customMessage = this._info.message || '';
-      const argsSuffix = computeArgsSuffix(matcherName, args);
-
-      const defaultTitle = `${this._info.poll ? 'poll ' : ''}${this._info.isSoft ? 'soft ' : ''}${this._info.isNot ? 'not ' : ''}${matcherName}${argsSuffix}`;
-      const title = customMessage || `Expect ${escapeWithQuotes(defaultTitle, '"')}`;
-      const apiName = `expect${this._info.poll ? '.poll ' : ''}${this._info.isSoft ? '.soft ' : ''}${this._info.isNot ? '.not' : ''}.${matcherName}${argsSuffix}`;
+      const suffixes = computeMatcherTitleSuffix(matcherName, this._actual, args);
+      const defaultTitle = `${this._info.poll ? 'poll ' : ''}${this._info.isSoft ? 'soft ' : ''}${this._info.isNot ? 'not ' : ''}${matcherName}${suffixes.short || ''}`;
+      const shortTitle = customMessage || `Expect ${escapeWithQuotes(defaultTitle, '"')}`;
+      const longTitle = shortTitle + (suffixes.long || '');
+      const apiName = `expect${this._info.poll ? '.poll ' : ''}${this._info.isSoft ? '.soft ' : ''}${this._info.isNot ? '.not' : ''}.${matcherName}${suffixes.short || ''}`;
 
       // This looks like it is unnecessary, but it isn't - we need to filter
       // out all the frames that belong to the test runner from caught runtime errors.
@@ -359,7 +362,8 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler<any> {
       const stepInfo = {
         category: 'expect' as const,
         apiName,
-        title,
+        title: longTitle,
+        shortTitle,
         params: args[0] ? { expected: args[0] } : undefined,
         infectParentStepsWithError: this._info.isSoft,
       };
@@ -443,13 +447,6 @@ async function pollMatcher(qualifiedMatcherName: string, info: ExpectMetaInfo, p
   }
 }
 
-function computeArgsSuffix(matcherName: string, args: any[]) {
-  let value = '';
-  if (matcherName === 'toHaveScreenshot')
-    value = toHaveScreenshotStepTitle(...args);
-  return value ? `(${value})` : '';
-}
-
 export const expect: Expect<{}> = createExpect({}, [], {}).extend(customMatchers);
 
 export function mergeExpects(...expects: any[]) {
diff --git a/packages/playwright/src/matchers/matchers.ts b/packages/playwright/src/matchers/matchers.ts
@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import { constructURLBasedOnBaseURL, isRegExp, isString, isTextualMimeType, pollAgainstDeadline, serializeExpectedTextValues } from 'playwright-core/lib/utils';
+import { asLocatorDescription, constructURLBasedOnBaseURL, isRegExp, isString, isTextualMimeType, pollAgainstDeadline, serializeExpectedTextValues } from 'playwright-core/lib/utils';
 import { colors } from 'playwright-core/lib/utils';
 
 import { expectTypes } from '../util';
 import { toBeTruthy } from './toBeTruthy';
 import { toEqual } from './toEqual';
 import { toHaveURLWithPredicate } from './toHaveURL';
 import { toMatchText } from './toMatchText';
+import { toHaveScreenshotStepTitle } from './toMatchSnapshot';
 import { takeFirst } from '../common/config';
 import { currentTestInfo } from '../common/globals';
 import { TestInfoImpl } from '../worker/testInfo';
@@ -35,6 +36,7 @@ import type { FrameExpectParams } from 'playwright-core/lib/client/types';
 export type ExpectMatcherStateInternal = ExpectMatcherState & { _stepInfo?: TestStepInfoImpl };
 
 export interface LocatorEx extends Locator {
+  _selector: string;
   _expect(expression: string, options: FrameExpectParams): Promise<{ matches: boolean, received?: any, log?: string[], timedOut?: boolean, errorMessage?: string }>;
 }
 
@@ -490,3 +492,17 @@ export async function toPass(
   }
   return { pass: !this.isNot, message: () => '' };
 }
+
+export function computeMatcherTitleSuffix(matcherName: string, receiver: any, args: any[]): { short?: string, long?: string } {
+  if (matcherName === 'toHaveScreenshot') {
+    const title = toHaveScreenshotStepTitle(...args);
+    return { short: title ? `(${title})` : '' };
+  }
+  if (receiver && typeof receiver === 'object' && receiver.constructor?.name === 'Locator') {
+    try {
+      return { long: ' ' + asLocatorDescription('javascript', (receiver as LocatorEx)._selector) };
+    } catch {
+    }
+  }
+  return {};
+}
diff --git a/packages/playwright/src/worker/testInfo.ts b/packages/playwright/src/worker/testInfo.ts
@@ -37,6 +37,7 @@ export type TestStepCategory = 'expect' | 'fixture' | 'hook' | 'pw:api' | 'test.
 
 interface TestStepData {
   title: string;
+  shortTitle?: string;
   category: TestStepCategory;
   location?: Location;
   apiName?: string;
@@ -374,7 +375,7 @@ export class TestInfoImpl implements TestInfo {
       this._tracing.appendBeforeActionForStep({
         stepId,
         parentId: parentStep?.stepId,
-        title: step.title,
+        title: step.shortTitle ?? step.title,
         category: step.category,
         params: step.params,
         stack: step.location ? [step.location] : [],
diff --git a/tests/playwright-test/test-step.spec.ts b/tests/playwright-test/test-step.spec.ts
@@ -534,7 +534,7 @@ test('should nest steps based on zones', async ({ runInlineTest }) => {
             }),
             test.step('parent2', async () => {
               await test.step('child2', async () => {
-                await expect(page.locator('body')).toBeVisible();
+                await expect(page.locator('body').describe('main element')).toBeVisible();
               });
             }),
           ]);
@@ -562,7 +562,7 @@ test.step |    child1 @ a.test.ts:23
 pw:api    |      Click locator('body') @ a.test.ts:24
 test.step |  parent2 @ a.test.ts:27
 test.step |    child2 @ a.test.ts:28
-expect    |      Expect "toBeVisible" @ a.test.ts:29
+expect    |      Expect "toBeVisible" main element @ a.test.ts:29
 hook      |After Hooks
 hook      |  afterEach hook @ a.test.ts:15
 test.step |    in afterEach @ a.test.ts:16
@@ -892,7 +892,7 @@ pw:api    |    Create context
 fixture   |  Fixture "page"
 pw:api    |    Create page
 pw:api    |Set content @ a.test.ts:4
-expect    |Checking color @ a.test.ts:6
+expect    |Checking color locator('div') @ a.test.ts:6
 hook      |After Hooks
 fixture   |  Fixture "page"
 fixture   |  Fixture "context"
@@ -1087,14 +1087,14 @@ fixture   |  Fixture "page"
 pw:api    |    Create page
 pw:api    |Set content @ a.test.ts:4
 expect    |Expect "poll toBe" @ a.test.ts:13
-expect    |  Expect "toHaveText" @ a.test.ts:7
+expect    |  Expect "toHaveText" locator('div') @ a.test.ts:7
 test.step |  iteration 1 @ a.test.ts:9
-expect    |    Expect "toBeVisible" @ a.test.ts:10
+expect    |    Expect "toBeVisible" locator('div') @ a.test.ts:10
 expect    |  Expect "toBe" @ a.test.ts:6
 expect    |  ↪ error: Error: expect(received).toBe(expected) // Object.is equality
-expect    |  Expect "toHaveText" @ a.test.ts:7
+expect    |  Expect "toHaveText" locator('div') @ a.test.ts:7
 test.step |  iteration 2 @ a.test.ts:9
-expect    |    Expect "toBeVisible" @ a.test.ts:10
+expect    |    Expect "toBeVisible" locator('div') @ a.test.ts:10
 expect    |  Expect "toBe" @ a.test.ts:6
 hook      |After Hooks
 fixture   |  Fixture "page"
@@ -1451,7 +1451,7 @@ pw:api    |  Wait for event "response" @ a.test.ts:7
 pw:api    |  Click locator('div') @ a.test.ts:14
 pw:api    |  Get content @ a.test.ts:8
 pw:api    |  Get content @ a.test.ts:9
-expect    |  Expect "toContainText" @ a.test.ts:10
+expect    |  Expect "toContainText" locator('div') @ a.test.ts:10
 expect    |Expect "toBe" @ a.test.ts:18
 hook      |After Hooks
 fixture   |  Fixture "page"
@@ -1745,7 +1745,7 @@ pw:api    |    Create context
 fixture   |  Fixture "page"
 pw:api    |    Create page
 pw:api    |Set content @ a.test.ts:16
-expect    |Expect "toBeInvisible" @ a.test.ts:17
+expect    |Expect "toBeInvisible" locator('div') @ a.test.ts:17
 expect    |  Expect "poll toBe" @ a.test.ts:7
 pw:api    |    Query count locator('div').filter({ visible: true }) @ a.test.ts:7
 expect    |    Expect "toBe" @ a.test.ts:7
@@ -1829,7 +1829,7 @@ pw:api    |      Navigate to "data:" @ a.test.ts:16
 pw:api    |  Set content @ a.test.ts:22
 test.step |  inner step @ a.test.ts:23
 pw:api    |    Navigate to "data:" @ a.test.ts:24
-expect    |Expect "toBeVisible" @ a.test.ts:32
+expect    |Expect "toBeVisible" locator('body') @ a.test.ts:32
 expect    |Expect "toBe" @ a.test.ts:33
 expect    |Expect "toBe" @ a.test.ts:34
 expect    |Expect "toBe" @ a.test.ts:35
