chore(mcp): introduce browser_run_code

Author: pavelfeldman

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

@@ -26,6 +26,7 @@ import mouse from './tools/mouse';
 import navigate from './tools/navigate';
 import network from './tools/network';
 import pdf from './tools/pdf';
+import runCode from './tools/runCode';
 import snapshot from './tools/snapshot';
 import screenshot from './tools/screenshot';
 import tabs from './tools/tabs';
@@ -49,6 +50,7 @@ export const browserTools: Tool<any>[] = [
   ...network,
   ...mouse,
   ...pdf,
+  ...runCode,
   ...screenshot,
   ...snapshot,
   ...tabs,

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

@@ -0,0 +1,64 @@
+/**
+ * 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 vm from 'vm';
+
+import { ManualPromise } from 'playwright-core/lib/utils';
+
+import { z } from '../../sdk/bundle';
+import { defineTabTool } from './tool';
+
+const codeSchema = z.object({
+  code: z.string().describe(`Playwright code snippet to run. The snippet should access the \`page\` object to interact with the page. Can make multiple statements. For example: \`await page.getByRole('button', { name: 'Submit' }).click();\``),
+});
+
+const runCode = defineTabTool({
+  capability: 'core',
+  schema: {
+    name: 'browser_run_code',
+    title: 'Run Playwright code',
+    description: 'Run Playwright code snippet',
+    inputSchema: codeSchema,
+    type: 'action',
+  },
+
+  handle: async (tab, params, response) => {
+    response.setIncludeSnapshot();
+    response.addCode(params.code);
+    const __end__ = new ManualPromise<void>();
+    const context = {
+      page: tab.page,
+      __end__,
+    };
+    vm.createContext(context);
+    await tab.waitForCompletion(async () => {
+      const snippet = `(async () => {
+        try {
+          ${params.code};
+          __end__.resolve();
+        } catch (e) {
+          __end__.reject(e);
+        }
+      })()`;
+      vm.runInContext(snippet, context);
+      await __end__;
+    });
+  },
+});
+
+export default [
+  runCode,
+];

tests/mcp/capabilities.spec.ts

@@ -36,6 +36,7 @@ test('test snapshot tool list', async ({ client }) => {
     'browser_network_requests',
     'browser_press_key',
     'browser_resize',
+    'browser_run_code',
     'browser_snapshot',
     'browser_tabs',
     'browser_take_screenshot',
@@ -67,6 +68,7 @@ test('test tool list proxy mode', async ({ startClient }) => {
     'browser_network_requests',
     'browser_press_key',
     'browser_resize',
+    'browser_run_code',
     'browser_snapshot',
     'browser_tabs',
     'browser_take_screenshot',

tests/mcp/generator.spec.ts

@@ -28,32 +28,34 @@ test('generator tools intent', async ({ startClient }) => {
     if (tool.inputSchema.properties?.intent)
       toolsWithIntent.push(tool.name);
   }
+  toolsWithIntent.sort();
 
   expect(toolsWithIntent).toEqual([
+    'browser_click',
     'browser_close',
-    'browser_resize',
-    'browser_handle_dialog',
+    'browser_drag',
     'browser_evaluate',
     'browser_file_upload',
     'browser_fill_form',
+    'browser_handle_dialog',
+    'browser_hover',
     'browser_install',
-    'browser_press_key',
-    'browser_type',
-    'browser_navigate',
-    'browser_navigate_back',
-    'browser_mouse_move_xy',
     'browser_mouse_click_xy',
     'browser_mouse_drag_xy',
-    'browser_click',
-    'browser_drag',
-    'browser_hover',
+    'browser_mouse_move_xy',
+    'browser_navigate',
+    'browser_navigate_back',
+    'browser_press_key',
+    'browser_resize',
+    'browser_run_code',
     'browser_select_option',
     'browser_tabs',
-    'browser_wait_for',
+    'browser_type',
     'browser_verify_element_visible',
-    'browser_verify_text_visible',
     'browser_verify_list_visible',
+    'browser_verify_text_visible',
     'browser_verify_value',
+    'browser_wait_for',
   ]);
 });
 

tests/mcp/run-code.spec.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 { test, expect } from './fixtures';
+
+test('browser_run_code', async ({ client, server }) => {
+  server.setContent('/', `
+    <button onclick="console.log('Submit')">Submit</button>
+  `, 'text/html');
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_run_code',
+    arguments: {
+      code: 'await page.getByRole("button", { name: "Submit" }).click()',
+    },
+  })).toHaveResponse({
+    code: `await page.getByRole(\"button\", { name: \"Submit\" }).click()`,
+    consoleMessages: expect.stringContaining('- [LOG] Submit'),
+  });
+});
+
+test('browser_run_code block', async ({ client, server }) => {
+  server.setContent('/', `
+    <button onclick="console.log('Submit')">Submit</button>
+  `, 'text/html');
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_run_code',
+    arguments: {
+      code: 'await page.getByRole("button", { name: "Submit" }).click(); await page.getByRole("button", { name: "Submit" }).click();',
+    },
+  })).toHaveResponse({
+    code: expect.stringContaining(`await page.getByRole(\"button\", { name: \"Submit\" }).click()`),
+    consoleMessages: expect.stringMatching(/\[LOG\] Submit.*\n.*\[LOG\] Submit/),
+  });
+});
+
+test('browser_run_code no-require', async ({ client, server }) => {
+  server.setContent('/', `
+    <button onclick="console.log('Submit')">Submit</button>
+  `, 'text/html');
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_run_code',
+    arguments: {
+      code: `require('fs');`,
+    },
+  })).toHaveResponse({
+    result: expect.stringContaining(`ReferenceError: require is not defined`),
+  });
+});