chore: include generated code in generated actions (#38531)

Author: pavelfeldman

packages/playwright-core/src/server/agent/actions.ts

@@ -78,3 +78,6 @@ export type ExpectValue = {
 };
 
 export type Action = ClickAction | DragAction | HoverAction | SelectOptionAction | PressAction | PressSequentiallyAction | FillAction | SetChecked | ExpectVisible | ExpectValue;
+export type ActionWithCode = Action & {
+  code: string;
+};

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

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { asLocator } from '../../utils/isomorphic/locatorGenerators';
+import { escapeWithQuotes, formatObjectOrVoid } from '../../utils/isomorphic/stringUtils';
+
+import type * as actions from './actions';
+import type { Language } from '../../utils/isomorphic/locatorGenerators';
+
+export async function generateCode(sdkLanguage: Language, action: actions.Action) {
+  switch (action.method) {
+    case 'click': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      return `await page.${locator}.click(${formatObjectOrVoid(action.options)});`;
+    }
+    case 'drag': {
+      const sourceLocator = asLocator(sdkLanguage, action.sourceSelector);
+      const targetLocator = asLocator(sdkLanguage, action.targetSelector);
+      return `await page.${sourceLocator}.dragAndDrop(${targetLocator});`;
+    }
+    case 'hover': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      return `await page.${locator}.hover(${formatObjectOrVoid(action.options)});`;
+    }
+    case 'pressKey': {
+      return `await page.keyboard.press(${escapeWithQuotes(action.key, '\'')});`;
+    }
+    case 'selectOption': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      return `await page.${locator}.selectOption(${action.labels.length === 1 ? escapeWithQuotes(action.labels[0]) : '[' + action.labels.map(label => escapeWithQuotes(label)).join(', ') + ']'});`;
+    }
+    case 'pressSequentially': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      const code = [`await page.${locator}.pressSequentially(${escapeWithQuotes(action.text)});`];
+      if (action.submit)
+        code.push(`await page.keyboard.press('Enter');`);
+      return code.join('\n');
+    }
+    case 'fill': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      const code = [`await page.${locator}.fill(${escapeWithQuotes(action.text)});`];
+      if (action.submit)
+        code.push(`await page.keyboard.press('Enter');`);
+      return code.join('\n');
+    }
+    case 'setChecked': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      if (action.checked)
+        return `await page.${locator}.check();`;
+      else
+        return `await page.${locator}.uncheck();`;
+    }
+    case 'expectVisible': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      return `await expect(page.${locator}).toBeVisible();`;
+    }
+    case 'expectValue': {
+      const locator = asLocator(sdkLanguage, action.selector);
+      return `await expect(page.${locator}).toHaveValue(${escapeWithQuotes(action.value)});`;
+    }
+  }
+  // @ts-expect-error
+  throw new Error('Unknown action ' + action.method);
+}

packages/playwright-core/src/server/agent/context.ts

@@ -16,26 +16,30 @@
 
 import { BrowserContext } from '../browserContext';
 import { runAction } from './actionRunner';
+import { generateCode } from './codegen';
 
 import type { Request } from '../network';
 import type * as loopTypes from '@lowire/loop';
 import type * as actions from './actions';
 import type { Page } from '../page';
 import type { Progress } from '../progress';
 import type { BrowserContextOptions } from '../types';
+import type { Language } from '../../utils/isomorphic/locatorGenerators.ts';
 
 type AgentOptions = BrowserContextOptions['agent'];
 
 export class Context {
   readonly options: AgentOptions;
   readonly progress: Progress;
   readonly page: Page;
-  readonly actions: actions.Action[] = [];
+  readonly actions: actions.ActionWithCode[] = [];
+  readonly sdkLanguage: Language;
 
   constructor(progress: Progress, page: Page) {
     this.progress = progress;
     this.page = page;
     this.options = page.browserContext._options.agent;
+    this.sdkLanguage = page.browserContext._browser.sdkLanguage();
   }
 
   async runActionAndWait(action: actions.Action) {
@@ -47,7 +51,8 @@ export class Context {
       await this.waitForCompletion(async () => {
         for (const a of action) {
           await runAction(this.progress, this.page, a, this.options?.secrets ?? []);
-          this.actions.push(a);
+          const code = await generateCode(this.sdkLanguage, a);
+          this.actions.push({ ...a, code });
         }
       });
       return await this.snapshotResult();

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

@@ -15,7 +15,7 @@
  */
 
 import { sanitizeDeviceOptions, toClickOptionsForSourceCode, toKeyboardModifiers, toSignalMap } from './language';
-import { asLocator, escapeWithQuotes } from '../../utils';
+import { asLocator, escapeWithQuotes, formatObject, formatObjectOrVoid } from '../../utils';
 import { deviceDescriptors } from '../deviceDescriptors';
 
 import type { Language, LanguageGenerator, LanguageGeneratorOptions } from './types';
@@ -190,28 +190,6 @@ function formatOptions(value: any, hasArguments: boolean): string {
   return (hasArguments ? ', ' : '') + formatObject(value);
 }
 
-function formatObject(value: any, indent = '  '): string {
-  if (typeof value === 'string')
-    return quote(value);
-  if (Array.isArray(value))
-    return `[${value.map(o => formatObject(o)).join(', ')}]`;
-  if (typeof value === 'object') {
-    const keys = Object.keys(value).filter(key => value[key] !== undefined).sort();
-    if (!keys.length)
-      return '{}';
-    const tokens: string[] = [];
-    for (const key of keys)
-      tokens.push(`${key}: ${formatObject(value[key])}`);
-    return `{\n${indent}${tokens.join(`,\n${indent}`)}\n}`;
-  }
-  return String(value);
-}
-
-function formatObjectOrVoid(value: any, indent = '  '): string {
-  const result = formatObject(value, indent);
-  return result === '{}' ? '' : result;
-}
-
 function formatContextOptions(options: BrowserContextOptions, deviceName: string | undefined, isTest: boolean): string {
   const device = deviceName && deviceDescriptors[deviceName];
   // recordHAR is replaced with routeFromHAR in the generated code.

packages/playwright-core/src/utils/isomorphic/stringUtils.ts

@@ -47,6 +47,30 @@ export function toSnakeCase(name: string): string {
   return name.replace(/([a-z0-9])([A-Z])/g, '$1_$2').replace(/([A-Z])([A-Z][a-z])/g, '$1_$2').toLowerCase();
 }
 
+export function formatObject(value: any, indent = '  ', mode: 'multiline' | 'oneline' = 'multiline'): string {
+  if (typeof value === 'string')
+    return escapeWithQuotes(value, '\'');
+  if (Array.isArray(value))
+    return `[${value.map(o => formatObject(o)).join(', ')}]`;
+  if (typeof value === 'object') {
+    const keys = Object.keys(value).filter(key => value[key] !== undefined).sort();
+    if (!keys.length)
+      return '{}';
+    const tokens: string[] = [];
+    for (const key of keys)
+      tokens.push(`${key}: ${formatObject(value[key])}`);
+    if (mode === 'multiline')
+      return `{\n${tokens.join(`,\n${indent}`)}\n}`;
+    return `{ ${tokens.join(', ')} }`;
+  }
+  return String(value);
+}
+
+export function formatObjectOrVoid(value: any, indent = '  '): string {
+  const result = formatObject(value, indent);
+  return result === '{}' ? '' : result;
+}
+
 export function quoteCSSAttributeValue(text: string): string {
   return `"${text.replace(/["\\]/g, char => '\\' + char)}"`;
 }

packages/playwright/src/mcp/browser/codegen.ts

@@ -17,12 +17,12 @@
 import fs from 'fs';
 
 import { debug } from 'playwright-core/lib/utilsBundle';
+import { escapeWithQuotes } from 'playwright-core/lib/utils';
 import { selectors } from 'playwright-core';
 
 import { logUnhandledError } from '../log';
 import { Tab } from './tab';
 import { outputFile  } from './config';
-import * as codegen from './codegen';
 import { dateAsFileName } from './tools/utils';
 
 import type * as playwright from '../../../types/test';
@@ -256,7 +256,7 @@ export class Context {
 
   lookupSecret(secretName: string): { value: string, code: string } {
     if (!this.config.secrets?.[secretName])
-      return { value: secretName, code: codegen.quote(secretName) };
+      return { value: secretName, code: escapeWithQuotes(secretName, '\'') };
     return {
       value: this.config.secrets[secretName]!,
       code: `process.env['${secretName}']`,

packages/playwright/src/mcp/browser/context.ts

@@ -15,8 +15,9 @@
  */
 
 import { z } from 'playwright-core/lib/mcpBundle';
+import { escapeWithQuotes } from 'playwright-core/lib/utils';
+
 import { defineTabTool } from './tool';
-import * as javascript from '../codegen';
 
 import type { Tab } from '../tab';
 
@@ -42,9 +43,9 @@ const evaluate = defineTabTool({
     let locator: Awaited<ReturnType<Tab['refLocator']>> | undefined;
     if (params.ref && params.element) {
       locator = await tab.refLocator({ ref: params.ref, element: params.element });
-      response.addCode(`await page.${locator.resolved}.evaluate(${javascript.quote(params.function)});`);
+      response.addCode(`await page.${locator.resolved}.evaluate(${escapeWithQuotes(params.function)});`);
     } else {
-      response.addCode(`await page.evaluate(${javascript.quote(params.function)});`);
+      response.addCode(`await page.evaluate(${escapeWithQuotes(params.function)});`);
     }
 
     await tab.waitForCompletion(async () => {

packages/playwright/src/mcp/browser/tools/evaluate.ts

@@ -15,8 +15,9 @@
  */
 
 import { z } from 'playwright-core/lib/mcpBundle';
+import { escapeWithQuotes } from 'playwright-core/lib/utils';
+
 import { defineTabTool } from './tool';
-import * as codegen from '../codegen';
 
 const fillForm = defineTabTool({
   capability: 'core',
@@ -49,7 +50,7 @@ const fillForm = defineTabTool({
         response.addCode(`${locatorSource}.setChecked(${field.value});`);
       } else if (field.type === 'combobox') {
         await locator.selectOption({ label: field.value });
-        response.addCode(`${locatorSource}.selectOption(${codegen.quote(field.value)});`);
+        response.addCode(`${locatorSource}.selectOption(${escapeWithQuotes(field.value)});`);
       }
     }
   },

packages/playwright/src/mcp/browser/tools/form.ts

@@ -15,8 +15,9 @@
  */
 
 import { z } from 'playwright-core/lib/mcpBundle';
+import { formatObject } from 'playwright-core/lib/utils';
+
 import { defineTabTool } from './tool';
-import * as javascript from '../codegen';
 import { dateAsFileName } from './utils';
 
 const pdfSchema = z.object({
@@ -36,7 +37,7 @@ const pdf = defineTabTool({
 
   handle: async (tab, params, response) => {
     const fileName = await response.addFile(params.filename ?? dateAsFileName('pdf'), { origin: 'llm', reason: 'Page saved as PDF' });
-    response.addCode(`await page.pdf(${javascript.formatObject({ path: fileName })});`);
+    response.addCode(`await page.pdf(${formatObject({ path: fileName })});`);
     await tab.page.pdf({ path: fileName });
   },
 });