Make Playwright UI Testing Smart with Model Context Protocol of Claude AI 🤖🧠

Rifx.Online
Programming/Scripting , Technology/Web , Chatbots
26 Dec, 2024

We discussed about Model Context Protocol (MCP) by Claude Anthropic before in our medium post. Essentially, MCP serves as a standardized framework designed to enhance the functionality of AI assistants. It establishes a connection between the AI model and the local system, data, or tool with which we are interacting, thereby providing the necessary context for AI assistants to operate effectively.

Playwright Automation Testing tool

Playwright is an awesome open-source Web automation testing tool that’s perfect for quickly and reliably testing modern applications. It’s got so many cool features that make Selenium or Cypress seem a bit old-school.

If you’re interested in learning more about Playwright, I’ve got a bunch of courses on Udemy and YouTube that cover all the details. You’ll learn how to build automation testing frameworks and write solid tests using Playwright.

Writing Test code with Playwright

Eventhough Playwright is modern testing tool and supports modern application automation, the way you write the code remains pretty much exactly the same as Cypress or Selenium. You need to

Instantiate Playwright and setup browser driver
Understand the workflow you are trying to automate
Find the locators in the browser like CSS/XPath/ID/Name/ARIA locator
Perform the action on the locator using Action methods like Type, Click, Select, etc

Scenario

Playwright Test code for a simple scenario to automate creating an user in C# .NET looks like this

1. Navigate to website http://eaapp.somee.com and click the login link. 
2. In the login page, enter the username and password as "admin" and "password" 
respectively and perform login. 
3. Then click the Employee List page and click 
"Create New" button and 
4. Enter realistic employee details to create for Name, 
Salary, DurationWorked,Select dropdown for Grade as CLevel and Email.

The code in Playwright with C# .NET will look like this

[Test]
public async Task CreateAnUser()
{
    using var playwright = await Playwright.CreateAsync();
    await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
    {
        Headless = false
    });
    var context = await browser.NewContextAsync();

    var page = await context.NewPageAsync();

    await page.GotoAsync("http://eaapp.somee.com/");

    await page.GetByRole(AriaRole.Link, new PageGetByRoleOptions { Name = "Login" }).ClickAsync();

    await page.GetByLabel("UserName").ClickAsync();

    await page.GetByLabel("UserName").FillAsync("admin");

    await page.GetByLabel("Password").FillAsync("password");

    await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "Log in" }).ClickAsync();

    await page.GetByRole(AriaRole.Link, new PageGetByRoleOptions { Name = "Employee List" }).ClickAsync();

    await page.GetByRole(AriaRole.Link, new PageGetByRoleOptions { Name = "Create New" }).ClickAsync();

    await page.GetByLabel("Name").ClickAsync();

    await page.GetByLabel("Name").FillAsync("Adam");

    await page.GetByLabel("Salary").FillAsync("10000");

    await page.GetByLabel("DurationWorked").FillAsync("1");

    await page.GetByLabel("Grade").FillAsync("1");

    await page.GetByLabel("Email").FillAsync("adam@adam.com");

    await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "Create" }).ClickAsync();

    await page.ScreenshotAsync(new PageScreenshotOptions
    {
        Path = "screenshot.png",
        FullPage = true
    });
}

Now how to let the same exact work done by an AI Agents ?

Well, an LLM (Large Language Model) can generate the code like the one shown above, but it will not have the ability to run the code on our local machine, thats why AI Agents comes very handy. They will help us perform the operation on our machine backed by LLM. But, how can we acheive that ?

Welcome to MCP, which is a newly open-sourced standard designed to help AI assistants work more effectively by connecting them to the systems and tools. In here, the tool is our local browser.

Now with the power of MCP standard, we can write an MCP Server for Playwright or Puppeteer. This MCP server will now act as a Bridge between the AI model (Claude) and our Chrome browser running in local machine.

A sample snippet of MCP server which perform drop down selecting in UI looks like this

    case "playwright_select":
      try {
        await page.waitForSelector(args.selector);
        await page.selectOption(args.selector, args.value);
        return {
          toolResult: {
            content: [{
              type: "text",
              text: `Selected ${args.selector} with: ${args.value}`,
            }],
            isError: false,
          },
        };
      } catch (error) {
        return {
          toolResult: {
            content: [{
              type: "text",
              text: `Failed to select ${args.selector}: ${(error as Error).message}`,
            }],
            isError: true,
          },
        };
      }

The above code is exactly the same Playwright code as you can see in the line 3 and 4, its page.waitForSelector and page.selectOption

Playwright MCP server setup in your local Claude Desktop

The above code snippet is part of my Playwright-MCP-Server which is an Open source MCP Server library I wrote available in GitHub here and in NPM here

In order for you to work with MCP server with Claude Desktop client, you need to do the following

Change the Claude Desktop Client config file, which is usually available under the path

~/Library/Application\ Support/Claude/claude_desktop_config.json

with this settings

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

2. Then open (if not restart) the Claude desktop client, you will see an new Attach from MCP button here

Click the “Attach the MCP” button, you will be presented as one shown below, which confirms the Playwright-MCP-server added

Playwright MCP server in Action

After the super simple above configuration, its time for us to use the MCP server we have configured.

In order to tryout the same above scenario, for which you end up writing lot many codes in Playwright, we can do all of them via plain text as shown below, this will perform all the action for you without you writing a single line of code in Playwright