chore: generate simple dom descriptions in codegen (#32333)

packages/playwright-core/src/server/codegen/codeGenerator.ts

@@ -27,6 +27,7 @@ export type FrameDescription = {
 
 export type ActionInContext = {
   frame: FrameDescription;
+  description?: string;
   action: Action;
   committed?: boolean;
 };

packages/playwright-core/src/server/codegen/javascript.ts

@@ -65,7 +65,7 @@ export class JavaScriptLanguageGenerator implements LanguageGenerator {
     if (signals.download)
       formatter.add(`const download${signals.download.downloadAlias}Promise = ${pageAlias}.waitForEvent('download');`);
 
-    formatter.add(this._generateActionCall(subject, actionInContext));
+    formatter.add(wrapWithStep(actionInContext.description, this._generateActionCall(subject, actionInContext)));
 
     if (signals.popup)
       formatter.add(`const ${signals.popup.popupAlias} = await ${signals.popup.popupAlias}Promise;`);
@@ -259,3 +259,9 @@ export class JavaScriptFormatter {
 function quote(text: string) {
   return escapeWithQuotes(text, '\'');
 }
+
+function wrapWithStep(description: string | undefined, body: string) {
+  return description ? `await test.step(\`${description}\`, async () => {
+${body}
+});` : body;
+}

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

@@ -800,7 +800,7 @@ export class Frame extends SdkObject {
       const result = await resolved.injected.evaluateHandle((injected, { info, root }) => {
         const elements = injected.querySelectorAll(info.parsed, root || document);
         const element: Element | undefined  = elements[0];
-        const visible = element ? injected.isVisible(element) : false;
+        const visible = element ? injected.utils.isElementVisible(element) : false;
         let log = '';
         if (elements.length > 1) {
           if (info.strict)

packages/playwright-core/src/server/injected/.eslintrc.js

@@ -1,10 +1,21 @@
+const path = require('path');
+
 module.exports = {
-    rules: {
-        "no-restricted-globals": [
-            "error",
-            { "name": "window" },
-            { "name": "document" },
-            { "name": "globalThis" },
-        ]
-    }
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "notice"],
+  parserOptions: {
+    ecmaVersion: 9,
+    sourceType: "module",
+    project: path.join(__dirname, '../../../../../tsconfig.json'),
+  },
+  rules: {
+    "no-restricted-globals": [
+        "error",
+        { "name": "window" },
+        { "name": "document" },
+        { "name": "globalThis" },
+    ],
+    '@typescript-eslint/no-floating-promises': 'error',
+    "@typescript-eslint/no-unnecessary-boolean-literal-compare": 2,
+  },
 };

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

@@ -216,7 +216,7 @@ export class ClockController {
         const sinceLastSync = now - this._realTime!.lastSyncTicks;
         this._realTime!.lastSyncTicks = now;
         // eslint-disable-next-line no-console
-        this._runTo(shiftTicks(this._now.ticks, sinceLastSync)).catch(e => console.error(e)).then(() => this._updateRealTimeTimer());
+        void this._runTo(shiftTicks(this._now.ticks, sinceLastSync)).catch(e => console.error(e)).then(() => this._updateRealTimeTimer());
       }, callAt - this._now.ticks),
     };
   }

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

@@ -29,11 +29,12 @@ import type { CSSComplexSelectorList } from '../../utils/isomorphic/cssParser';
 import { generateSelector, type GenerateSelectorOptions } from './selectorGenerator';
 import type * as channels from '@protocol/channels';
 import { Highlight } from './highlight';
-import { getChecked, getAriaDisabled, getAriaRole, getElementAccessibleName, getElementAccessibleDescription } from './roleUtils';
+import { getChecked, getAriaDisabled, getAriaRole, getElementAccessibleName, getElementAccessibleDescription, beginAriaCaches, endAriaCaches } from './roleUtils';
 import { kLayoutSelectorNames, type LayoutSelectorName, layoutSelectorScore } from './layoutSelectorUtils';
 import { asLocator } from '../../utils/isomorphic/locatorGenerators';
 import type { Language } from '../../utils/isomorphic/locatorGenerators';
-import { cacheNormalizedWhitespaces, normalizeWhiteSpace, trimStringWithEllipsis } from '../../utils/isomorphic/stringUtils';
+import { cacheNormalizedWhitespaces, escapeHTML, escapeHTMLAttribute, normalizeWhiteSpace, trimStringWithEllipsis } from '../../utils/isomorphic/stringUtils';
+import { generateSimpleDom, generateSimpleDomNode, selectorForSimpleDomNodeId } from './simpleDom';
 
 export type FrameExpectParams = Omit<channels.FrameExpectParams, 'expectedValue'> & { expectedValue?: any };
 
@@ -66,7 +67,28 @@ export class InjectedScript {
   // eslint-disable-next-line no-restricted-globals
   readonly window: Window & typeof globalThis;
   readonly document: Document;
-  readonly utils = { isInsideScope, elementText, asLocator, normalizeWhiteSpace, cacheNormalizedWhitespaces };
+
+  // Recorder must use any external dependencies through InjectedScript.
+  // Otherwise it will end up with a copy of all modules it uses, and any
+  // module-level globals will be duplicated, which leads to subtle bugs.
+  readonly utils = {
+    asLocator,
+    beginAriaCaches,
+    cacheNormalizedWhitespaces,
+    elementText,
+    endAriaCaches,
+    escapeHTML,
+    escapeHTMLAttribute,
+    generateSimpleDom: generateSimpleDom.bind(undefined, this),
+    generateSimpleDomNode: generateSimpleDomNode.bind(undefined, this),
+    getAriaRole,
+    getElementAccessibleDescription,
+    getElementAccessibleName,
+    isElementVisible,
+    isInsideScope,
+    normalizeWhiteSpace,
+    selectorForSimpleDomNodeId: selectorForSimpleDomNodeId.bind(undefined, this),
+  };
 
   // eslint-disable-next-line no-restricted-globals
   constructor(window: Window & typeof globalThis, isUnderTest: boolean, sdkLanguage: Language, testIdAttributeNameForStrictErrorAndConsoleCodegen: string, stableRafCount: number, browserName: string, customEngines: { name: string, engine: SelectorEngine }[]) {
@@ -426,10 +448,6 @@ export class InjectedScript {
     return new constrFunction(this, params);
   }
 
-  isVisible(element: Element): boolean {
-    return isElementVisible(element);
-  }
-
   async viewportRatio(element: Element): Promise<number> {
     return await new Promise(resolve => {
       const observer = new IntersectionObserver(entries => {
@@ -567,9 +585,9 @@ export class InjectedScript {
     }
 
     if (state === 'visible')
-      return this.isVisible(element);
+      return isElementVisible(element);
     if (state === 'hidden')
-      return !this.isVisible(element);
+      return !isElementVisible(element);
 
     const disabled = getAriaDisabled(element);
     if (state === 'disabled')
@@ -1296,18 +1314,6 @@ export class InjectedScript {
     }
     throw this.createStacklessError('Unknown expect matcher: ' + expression);
   }
-
-  getElementAccessibleName(element: Element, includeHidden?: boolean): string {
-    return getElementAccessibleName(element, !!includeHidden);
-  }
-
-  getElementAccessibleDescription(element: Element, includeHidden?: boolean): string {
-    return getElementAccessibleDescription(element, !!includeHidden);
-  }
-
-  getAriaRole(element: Element) {
-    return getAriaRole(element);
-  }
 }
 
 const autoClosingTags = new Set(['AREA', 'BASE', 'BR', 'COL', 'COMMAND', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR']);

packages/playwright-core/src/server/injected/recorder/DEPS.list

@@ -1,4 +1,4 @@
-# Recorder must use any external dependencies through InjectedScript.
+# Recorder must use any external dependencies through injectedScript.utils.
 # Otherwise it will end up with a copy of all modules it uses, and any
 # module-level globals will be duplicated, which leads to subtle bugs.
 [*]