Skip to main content
Glama

playwright_click_and_switch_tab

Automate clicking a link and switching to the newly opened tab in a browser using Playwright MCP Server. Requires a CSS selector to identify the link.

Instructions

Click a link and switch to the newly opened tab

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the link to click

Implementation Reference

  • The ClickAndSwitchTabTool class implementing the core logic: clicks the selector, waits for new tab via context.waitForEvent('page'), loads it, switches global page, returns URL.
    export class ClickAndSwitchTabTool extends BrowserToolBase {
      /**
       * Execute the click and switch tab tool
       */
      async execute(args: any, context: ToolContext): Promise<ToolResponse> {
        
        return this.safeExecute(context, async (page) => {
          // Listen for a new tab to open
          const [newPage] = await Promise.all([
            //context.browser.waitForEvent('page'), // Wait for a new page (tab) to open
            page.context().waitForEvent('page'),// Wait for a new page (tab) to open
            page.click(args.selector), // Click the link that opens the new tab
          ]);
    
          // Wait for the new page to load
          await newPage.waitForLoadState('domcontentloaded');
    
          // Switch control to the new tab
          setGlobalPage(newPage);
          //page= newPage; // Update the current page to the new tab
          //context.page = newPage;
          //context.page.bringToFront(); // Bring the new tab to the front
          return createSuccessResponse(`Clicked link and switched to new tab: ${newPage.url()}`);
          //return createSuccessResponse(`Clicked link and switched to new tab: ${context.page.url()}`);
        });
      }
    }
  • Tool schema definition including name, description, and input schema requiring 'selector' string.
      name: "playwright_click_and_switch_tab",
      description: "Click a link and switch to the newly opened tab",
      inputSchema: {
        type: "object",
        properties: {
          selector: { type: "string", description: "CSS selector for the link to click" },
        },
        required: ["selector"],
      },
    },
  • Registration in the main tool handler switch statement dispatching to the tool's execute method.
    case "playwright_click_and_switch_tab":
      return await clickAndSwitchTabTool.execute(args, context);
  • src/tools.ts:450-450 (registration)
    Tool name registered in BROWSER_TOOLS array for browser-requiring tool detection.
    "playwright_click_and_switch_tab"
  • Instantiation of ClickAndSwitchTabTool instance in initializeTools function.
    if (!clickAndSwitchTabTool) clickAndSwitchTabTool = new ClickAndSwitchTabTool(server);

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/BhanuTJ93/MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server