Automated UI & Functional Testing with AI: Explained In 5 Minutes

In this article of our series on automation using AI and MCP servers, we will explore how to perform UI and functional automation testing using GitHub Copilot with the Playwright MCP server in VS Code.

Core Components and Prerequisites

In previous articles of this series, we have already covered the fundamentals of AI assistant models, agents, and MCP servers, including how they communicate to perform specific tasks. We also outlined the prerequisites for configuring GitHub Copilot with the Playwright MCT server in VS Code, which include NodeJS, VS Code, and the GitHub Copilot extensions.

There are several ways to configure the Playwright MCP server with GitHub Copilot. You can use the "Install Server" button, run a command in the batch terminal, or simply copy and paste the configurations into your settings.json file.

Configuring the settings.json File

To manually configure the server, you can open your VS Code settings, switch to the JSON view, and add the MCP server configurations.

Here is an example of what the configuration should look like:

{
  "mcp.servers": [
    {
      "provider": "github.copilot",
      "agent": "playwright",
      "server": {
        "command": "npx",
        "args": [
          "playwright",
          "mcp-server"
        ]
      }
    }
  ]
}

Note: It is mandatory to start any MCP server you intend to use. You can do this by clicking the "Start" button that appears next to the configuration in the settings.json file. Once the server is running, you can close the settings file.

Example 1: Testing Valid Login Functionality

Let's start with a basic prompt to test the UI and functional aspects of a login page using the Playwright MCP server. For this demonstration, we'll use the practice website visionet.com.

The goal is to navigate to the e-commerce application, enter a username and password, submit the form, and verify a successful login.

Here is a simple prompt to achieve this:

Go to visionet.com and navigate to the e-commerce app under the playground tab. Enter the username and password, submit the form, and then verify a successful login using the Playwright MCP server.

When you send this prompt to the AI assistant (we are using Copilot with a GPT-4.1 model), it initiates the process. The assistant will use the Playwright MCP server to navigate to the website. For security, the assistant will ask for permission to perform actions like navigating, clicking, and typing. You can grant permission for the current session, for the entire workspace, or grant it permanently. For automated workflows, selecting "Always Allow" is recommended to avoid interruptions.

The browser will open, navigate to the site, click on the "Playground" tab, and then the "e-commerce app." The assistant will then automatically fill in the username and password fields (even if not provided in the prompt, it can use default values present on the page) and click the login button.

Upon successful login, the AI assistant will confirm the result:

Login to the e-commerce app was successful. The page now displays 'Welcome user,' and the e-commerce app dashboard, confirming the login worked as expected.

This entire test was executed without writing a single line of code or defining any locators.

Refining Your Prompts for Complex Scenarios

If the AI assistant struggles with a multi-step prompt, you can break it down into smaller, sequential steps. This makes it easier for the assistant to understand and execute the actions accurately.

Here’s how you can structure a more detailed prompt:

// Go to wishinfinite.com // Navigate to the e-commerce app under Playground // Enter username and password in the login form // Submit the form // Verify successful login // Perform above actions using Playwright MCP server

This step-by-step approach ensures each action is performed correctly before moving to the next.

An Advanced Technique: Including HTML Element Hints

For more complex web pages where the AI might struggle to find elements, you can provide HTML element hints directly in your prompt. This helps the assistant identify the correct locators.

For example, if the assistant can't find the username and password fields, you can provide their CSS selectors:

Go to the specified site and navigate to the e-commerce app under Playground. Then, fill the input field input[name="username"] with "user" and the password field input[name="password"] with "admin123".

You can use CSS selectors, XPath, or any unique identifier that helps the AI assistant locate the elements reliably.

Example 2: Validating Form Fields

Let's look at another example: validating form fields. The goal is to navigate to a form, fill it with relevant data, submit it, and verify the submission.

Here's the prompt:

Go to the vision.com site and navigate to "Forms" under the playground tab. Fill all the form fields with relevant data, then submit the form. Verify successful form submission using the Playwright MCP server.

The AI assistant will navigate to the page and automatically populate the text input, text area, password, and email fields before submitting the form. If a confirmation dialog or alert appears, the assistant will again ask for permission to handle it. After handling the dialog, the process is complete.

Example 3: A More Complex End-to-End Test

Now for a slightly more complex scenario: ordering items from the e-commerce application.

The test involves these steps: 1. Navigate to the website. 2. Go to the e-commerce app. 3. Log in. 4. Order two items. 5. Go to "View Orders" and validate that the correct items were ordered. 6. Log out.

While you can write a basic prompt, a more effective method is to use an AI assistant like ChatGPT or Gemini to refine your prompt first.

You can ask the assistant:

I want to perform automation testing using the Playwright MCP server. I will provide you with prompts. Please help me refine the prompt so that it is suitable and effective for the Playwright MCP server.

Then, provide your basic prompt. The assistant will return a refined, step-by-step version:

1. Go to fishinfinite.com.
2. Navigate to the Playground tab and select the e-commerce app.
3. Log into the application with valid credentials.
4. Add any two items to the cart and proceed to place the order.
5. After ordering, go to the pre-order section.
6. Validate that the correct two items appear in the order summary.
7. Log out of the application after validation is complete.

When you run this refined prompt, the AI assistant will execute all the steps seamlessly: logging in, adding items to the cart, validating the order, and logging out, providing a full summary at the end.

Conclusion

While the AI and MCP server technology is still evolving, it already offers powerful capabilities for automating UI and functional testing without writing extensive code. There may be scenarios where you encounter limitations, but by providing clear, well-structured, and sometimes detailed prompts, you can accomplish a remarkable amount of automation.