Introduction to Playwright Agents

Introduction

In the dynamic environment of AI revolution, staying up to date with trends is crucial. After the rapid development of LLM models and MCP servers, the focus is now shifting toward agents. These agents can be created by users or provided by tool and framework vendors. Agents integrate LLM models, tools from MCP servers and various conditions to better align with user needs.

In this article, I will take a deep dive into Playwright agents and explore how they can accelerate test automation, reduce manual effort, and help design effective UI test scenarios.

Initializing Playwright agents**

npx playwright init-agents --loop=vscode

This simple command enables Playwright agents in Copilot. Simply select one from the Copilot agent list.

Planner agent

The role of this agent is to open your application, explore it, and create a test plan for a single component or multiple components. It requires only a simple request, such as:

Generate a test plan for the user registration form {link to form}

The test plan is created in your project’s spec folder.

It’s worth mentioning that the test plan you receive depends on the prompt you provide. If you add additional conditions, they will be taken into account during the creation of the test plan.

Generator agent

The Generator Agent, as you can assume, automatically generates test code. It works similarly to the Planner Agent, but while exploring your website, it generates test code in real time.

You need to remember that the output you receive strongly depends on the prompt you use.

For example, if you use the prompt:

Generate tests for the test plan.

You may receive low-quality code. For instance, instead of using built-in Playwright locators such as page.getByRole the generated tests might rely on CSS selectors or XPath. These approaches should be used only as a last choice, when there is no better way to locate an element.

A more specific and descriptive prompt is a better approach for generating tests.

Healer agent

The Healer is an agent that helps analyze your code when a test fails. It goes through the page based on the failing steps, double-checks locators, adds waits, fixes test data and re-runs the test each time, until it passes or until guardrails stop the loop. The Healer is an agent that helps analyze your code when a test fails. It goes through the page based on the failing steps, double-checks locators, adds waits, fixes test data and re-runs the test each time, until it passes or until guardrails stop the loop.

To run this agent you need to choose it from the list of agents and use an easy prompt like:

Fix the test {test_name}

Example

Let’s go through the process of automatically generating a test plan and tests code together.

The first step is to initialize a new Node.js project for Playwright test automation:

npm init -y

The next step is to initialize Playwright in the project:

npm init playwright@latest

Now we need to initialize Playwright agents:

npx playwright init-agents --loop=vscode

For this example, we will use a registration form prepared for automation practice: https://practice.expandtesting.com/register

To create a test plan, we simply need to select the playwright-test-planner agent from the Copilot agent list and use the following prompt:

Generate a test plan for this user register form https://practice.expandtesting.com/register

As a result, we receive a ready-to-use test plan in Markdown format containing 14 test cases. This is a very good number of tests for such a simple form, but as with all AI-generated output, it should never be blindly trusted. The test plan is a great starting point, but it still needs to be reviewed, evaluated and improved.

Below is an example of a generated test case:

#### 1.1. Valid Registration with Strong Password

**File:** `tests/positive-registration/valid-registration-strong-password.spec.ts`

**Steps:**
  1. Navigate to the registration page
  2. Enter a valid username (e.g., 'testuser123')
  3. Enter a strong password (e.g., 'SecurePass123!')
  4. Enter the same password in the Confirm Password field
  5. Click the Register button
  6. Verify error message appears (expected behavior for testing site)
  7. Dismiss the error alert by clicking Close button

**Expected Results:**
  - Registration form is displayed with all required fields
  - All form fields accept valid input
  - Error message is displayed: 'An error occurred during registration. Please try again.'
  - Form fields are cleared after submission
  - Error alert can be dismissed with Close button

Now it’s time to generate the test case code. For this example, we can use the following Playwright test:

import { test, expect } from '@playwright/test';

test.describe('Positive Registration Tests', () => {
  test('Valid Registration with Strong Password', async ({ page }) => {

    await page.goto('https://practice.expandtesting.com/register');

    await page.getByRole('textbox', { name: 'Username' }).fill('testuser123');
    await page.getByRole('textbox', { name: 'Password', exact: true }).fill('SecurePass123!');
    await page.getByRole('textbox', { name: 'Confirm Password' }).fill('SecurePass123!');
    await page.getByRole('button', { name: 'Register' }).click();

    await expect(page.getByText('An error occurred during registration. Please try again.')).toBeVisible();

    await page.getByRole('button', { name: 'Close', exact: true }).click();
  });
});

At this point, we have a fully working test case.

But what happens if there is a problem in the test code? For example, let’s introduce an error by changing Confirm Password to Confirm Pasword.

Now the test will fail. This is where the healer agent becomes useful. To use it, switch the Copilot agent and run the following prompt:

Fix test 'Valid Registration with Strong Password'

During its reasoning process, the AI detects the issue and reports:

I can see there's a typo in the test - "Pasword" should be "Password" in the Confirm Password field locator.

As you can see, the agent quickly identifies the problem and automatically fixes the test case.

Conclusion

As we can see, Playwright delivers very powerful tools that accelerate automation testing in a straightforward and easy-to-use way. You can automatically generate test code based on a properly formatted test plan. It can also save you time and effort during debugging by using a healer agent, which makes Playwright even more pleasant to use and more effective than before.

I can only encourage you to try Playwright agents yourself and see how modern agents are configured for Visual Studio Code and Copilot.