feat: auto handle dialogs during script evaluation

Added a new option `dialog` to `waitForEventsAfterAction` to automatically handle dialogs that trigger during execution. We hardcode it to `'accept'` for the `evaluate_script` tool so that `alert()` or `confirm()` don't block and timeout script evaluation.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: 2 people

src/McpPage.ts

@@ -117,7 +117,7 @@ export class McpPage implements ContextPage {
 
   waitForEventsAfterAction(
     action: () => Promise<unknown>,
-    options?: {timeout?: number},
+    options?: {timeout?: number; dialog?: 'accept' | 'dismiss'},
   ): Promise<void> {
     const helper = this.createWaitForHelper(
       this.cpuThrottlingRate,

src/WaitForHelper.ts

@@ -126,8 +126,19 @@ export class WaitForHelper {
 
   async waitForEventsAfterAction(
     action: () => Promise<unknown>,
-    options?: {timeout?: number},
+    options?: {timeout?: number; dialog?: 'accept' | 'dismiss'},
   ): Promise<void> {
+    const dialogHandler = (dialog: any) => {
+      if (options?.dialog === 'dismiss') {
+        void dialog.dismiss();
+      } else {
+        void dialog.accept();
+      }
+    };
+    if (options?.dialog) {
+      this.#page.on('dialog', dialogHandler);
+    }
+
     const navigationFinished = this.waitForNavigationStarted()
       .then(navigationStated => {
         if (navigationStated) {
@@ -158,6 +169,9 @@ export class WaitForHelper {
       logger(error);
     } finally {
       this.#abortController.abort();
+      if (options?.dialog) {
+        this.#page.off('dialog', dialogHandler);
+      }
     }
   }
 }

src/tools/ToolDefinition.ts

@@ -247,7 +247,7 @@ export type ContextPage = Readonly<{
   clearDialog(): void;
   waitForEventsAfterAction(
     action: () => Promise<unknown>,
-    options?: {timeout?: number},
+    options?: {timeout?: number; dialog?: 'accept' | 'dismiss'},
   ): Promise<void>;
   getInPageTools(): ToolGroup<InPageToolDefinition> | undefined;
 }>;

src/tools/script.ts

@@ -81,7 +81,7 @@ Example with arguments: \`(el) => {
           .getSelectedMcpPage()
           .waitForEventsAfterAction(async () => {
             await performEvaluation(worker, fnString, [], response);
-          });
+          }, {dialog: 'accept'});
         return;
       }
 
@@ -103,7 +103,7 @@ Example with arguments: \`(el) => {
 
         await mcpPage.waitForEventsAfterAction(async () => {
           await performEvaluation(evaluatable, fnString, args, response);
-        });
+        }, {dialog: 'accept'});
       } finally {
         void Promise.allSettled(args.map(arg => arg.dispose()));
       }

tests/tools/script.test.ts

@@ -98,6 +98,29 @@ describe('script', () => {
       });
     });
 
+    it('work for scripts that trigger dialogs', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+
+        await page.setContent(html`<button id="test">test</button>`);
+
+        await evaluateScript().handler(
+          {
+            params: {
+              function: String(() => {
+                alert('hello');
+                return 'Works';
+              }),
+            },
+          },
+          response,
+          context,
+        );
+        const lineEvaluation = response.responseLines.at(2)!;
+        assert.strictEqual(JSON.parse(lineEvaluation), 'Works');
+      });
+    });
+
     it('work for async functions', async () => {
       await withMcpContext(async (response, context) => {
         const page = context.getSelectedPptrPage();