Playwright AI Testing: Claude Code, MCP, CLI & Test Agents

Learn the difference between unit, API, and UI tests. See how the test pyramid explains the trade-off between test speed, cost, and coverage, and where Playwright UI tests fit.

You'll learn what the DOM is and how HTML structures a web application, then use the browser's inspect tool to locate elements on a page.

In this lesson, you will learn how CSS styles a page and how JavaScript makes it interactive. You will use browser DevTools to inspect CSS, run JavaScript in the console, and better understand web pages before automating them.

In this lesson, you will learn what JavaScript is, write a simple hello world example, and see how TypeScript adds type safety. You will also understand why Playwright test files commonly use the .spec.ts extension.

In this lesson, you will learn what TypeScript arrow functions are and why they are commonly used in Playwright tests. You will compare regular functions with arrow functions and understand the syntax needed for upcoming test examples.

In this lesson, you will create a simple Playwright test that prints hello world. You will learn the basic test syntax, understand the test function, and see how arrow functions are used inside Playwright test files.

In this lesson, you will write a Playwright test that opens a real web page. You will learn async, await, fixtures, and how the page fixture gives your test access to browser actions like page.goto().

In this lesson, you will explore the playwright.config.ts file and understand the most important configuration options. You will learn about projects, browsers, testDir, retries, fullyParallel, and workers.

In this lesson, you will use Playwright Codegen to locate elements and generate test code by recording user actions. You will see both the VS Code extension workflow and the terminal workflow.

In this lesson, you will learn how to debug Playwright tests using the VS Code extension and terminal commands. You will see how to pause execution, inspect test flow, and understand where a test is failing.

In this lesson, you will use Playwright Trace Viewer to analyze test execution and failures. You will enable traces, configure trace capture on first retry, inspect snapshots and logs, and briefly see how error-context.md can help AI agents analyze failures.

In this lesson, you will learn how to perform API testing in Playwright using the request fixture. You will automate API requests, validate responses, check status codes, and understand how API testing fits into a Playwright test automation workflow.

In this lesson, you will learn how to mock API responses in Playwright and test different application scenarios. You will create hands-on examples for negative cases, alternate responses, and controlled test conditions.

In this lesson, you will learn important Playwright best practices from the official documentation. You will focus on testing user-visible behavior, using accessibility-based locators, and keeping tests as isolated as possible.

In this lesson, you will continue learning Playwright best practices from the official documentation. You will review additional recommendations for writing reliable, maintainable, and scalable Playwright automation tests.

Practice your Playwright skills by automating the HourToLearn demo application. You will learn how to clone the demo app and test project, run the application locally, and prepare for the hands-on assignment.

In this lesson, you will learn what a coding agent is and how it differs from a normal chat agent. You will understand how coding agents can access project files, use tools, read context from your system, and help with real Playwright automation tasks.

In this lesson, you will install Claude Code and prepare your system for AI-assisted coding. You will complete the required setup so Claude Code can work with your local project and support your Playwright automation workflow.

In this lesson, you will compare using Claude Code from the terminal and from the VS Code extension. You will see that both provide similar functionality, but this course will mostly use the terminal workflow for hands-on automation tasks.

In this lesson, you will use Claude Code for the first time with a hands-on prompt. You will ask Claude to write a Playwright test without giving extra tools or detailed project context, then review what it generates and why context matters.

In this lesson, you will initialize Claude Code inside the test project and create a CLAUDE.md file. You will understand what this file does, how it stores project instructions, and why it is useful for consistent agentic coding.

In this lesson, you will learn what sessions and context mean in an agentic coding tool. You will see why good context improves AI responses, and how missing, incorrect, or unnecessary information can lead to poor generated code.

In this lesson, you will learn what slash commands are in Claude Code and how they help you perform common actions faster. You will explore frequently used commands and understand when to use them during coding workflows.

In this lesson, you will learn what custom slash commands are and how they can speed up repeated workflows. You will create a sample custom command and understand how it can be reused in your Playwright automation project.

In this lesson, you will explore Claude Code settings and understand setting scopes. You will create a settings.local file and learn how to allow or deny tool permissions for safer and more controlled agentic coding.

In this lesson, you will learn the different Claude Code modes and when to use each one. You will compare planning, manual approval, edit, and auto-style workflows so you can choose the right level of control for each task.

In this lesson, you will learn what MCP is, why Playwright MCP is useful, and how it helps Claude Code interact with a web app. You will see why MCP is better than only using basic page access, because it can provide tools for navigation, locators, snapshots, screenshots, and browser context.

In this hands-on lesson, you will use Claude Code with Playwright MCP to automate a login page in the demo app. You will configure tool access in settings.local.json, allow Claude to navigate the app, inspect the screen, use MCP tools, and generate a Playwright test.

In this lesson, you will review the previous MCP automation session step by step. You will see how Claude explored the page, used MCP tools, understood the login flow, and created the test case. You will also learn what Claude missed and why human review is still important.

In this lesson, you will learn what Playwright MCP snapshots are and why they are useful for AI agents. You will understand how snapshots represent page structure, how references help agents identify elements, and how Claude uses this information to automate web pages more reliably.

In this lesson, you will explore additional Playwright MCP capabilities such as PDF, vision, testing, and network support. You will learn why these capabilities are useful, how to enable them, and how PDF and vision capabilities help Claude understand more complex automation scenarios.

In this lesson, you will learn why Playwright MCP is useful even when Claude can inspect pages in other ways. You will understand why AI agents are non-deterministic, why real automation should run through Playwright test scripts, and how MCP helps make test generation more controlled and reliable.

In this lesson, you will learn what the testing and assertion capabilities provide in Playwright MCP. You will see how browser_generate_locator tool make locator creation and test generation more deterministic, and why these capabilities are important for writing and maintaining reliable automation tests.

In this hands-on lesson, you will ask Claude Code to automate a page using mocked API responses. Claude will use Playwright MCP capabilities to explore the app, inspect the development code, understand the scenario, mock the response, and generate the required test case.

In this lesson, you will review the previous API mocking demo and understand how the agent approached the task. You will see how Claude explored the app, understood the scenario, created the Playwright test, added validations, and used Playwright MCP to support the automation workflow.

In this lesson, you will learn what subagents are and why they matter in agentic coding. You will see how subagents handle specialized tasks, keep a separate clean context, and use limited tool access. This concept applies across Claude Code, Cursor, Codex, GitHub Copilot, and VS Code style workflows.

In this hands-on lesson, you will create a test-improver subagent in Claude Code. You will define front matter in the subagent .md file, write a clear description, set tool access and model options, and teach the agent to review Playwright tests against best practices.

In this lesson, you will run the Playwright Test Improver subagent against an existing Playwright Test file. You will review the recommendations it provides for improving locators, assertions, test structure, and test reliability.

You will also see how the main Claude Code agent delegates the task to the subagent. This demonstrates the difference between the main agent context and the separate subagent context.

By the end of this lesson, you will understand why subagents are useful for focused Playwright automation tasks and how they help keep larger AI-assisted testing workflows organized.

In this lesson, you will learn what the official Playwright Test Agents are and how they support AI-powered Playwright test automation. You will install the Playwright Test Agent definitions for Claude Code and explore the three built-in agents:

• Playwright Test Planner — explores an application and creates a test plan.

• Playwright Test Generator — converts a test plan into Playwright Test files.

• Playwright Test Healer — investigates failing tests and helps repair test issues.

You will learn how the Playwright agent definitions are added as agent Markdown files in your project. You will also explore the generated seed.spec.ts file and .mcp.json configuration file.

Finally, you will understand the difference between:

• Playwright MCP — a general MCP server that lets AI tools control and inspect a browser.

• Playwright Test Agents — specialized agents that use the playwright-test MCP server for test planning, test generation, and test healing workflows.

The Playwright Test Agent definitions can be generated for Claude Code, OpenAI Codex, Visual Studio Code, and OpenCode. The same agentic coding ideas can also help when using tools such as Cursor and GitHub Copilot. (playwright.dev)

In this hands-on lesson, you will use the official Playwright Test Planner agent to explore the course demo application and create a detailed test plan.

You will ask the Planner agent to identify important user flows, positive test scenarios, negative test scenarios, validations, and edge cases. You will then review the generated Markdown test plan and understand how it can be used as the input for automated test generation.

You will also learn how seed.spec.ts helps the Planner agent understand your Playwright project setup, including fixtures, hooks, authentication, and application initialization steps.

By the end of this lesson, you will have a clear test plan for the demo application and understand why human review is important before generating Playwright tests. The Planner agent produces a human-readable Markdown plan designed to be used in the next generation step. (playwright.dev)

In this hands-on lesson, you will convert the test plan created by the Playwright Test Planner into automated Playwright Test cases.

You will use Claude Code with the official Playwright Test Generator agent to create test files from the Markdown test plan. You will also demonstrate how two focused agent tasks can work on different test scenarios, helping automate multiple test cases more efficiently.

After the tests are created, you will review the generated Playwright code. You will check the test structure, locators, assertions, test data, validations, and readability of the generated tests.

By the end of this lesson, you will understand how the Planner and Generator agents work together in an agentic Playwright testing workflow: plan first, generate tests second, then review the generated code. Playwright documents the Generator agent as the step that transforms a Markdown test plan into Playwright Test files. (playwright.dev)

In this hands-on lesson, you will use the official Playwright Test Healer agent to investigate failing Playwright tests.

First, you will introduce a problem into a Playwright Test file, such as an incorrect locator, outdated assertion, or invalid test step. You will then run the Healer agent and review how it investigates the failure, identifies the test issue, and suggests or applies an appropriate fix.

Next, you will introduce a real bug into the course demo application. This helps you understand an important testing principle: not every failing test should be fixed by changing the test code.

You will learn how to tell the difference between:

• A test automation issue, where the test may need to be updated.

• An application bug, where the product behavior is incorrect and the test should continue to fail until the application is fixed.

Finally, you will review the result, run the Playwright test again, and verify whether the correct fix was made. The Healer agent runs failing tests and attempts repairs, but its changes should always be reviewed before accepting them. (playwright.dev)

Learn what a command-line interface (CLI) is and how Playwright CLI helps AI agents work with web pages. Compare the CLI with Playwright MCP, then install Playwright CLI and try opening a browser, inspecting a page, and capturing screenshots and snapshots.

Explore useful Playwright CLI commands and see how they work in practice. You’ll run commands to interact with a page, inspect references, capture page information, and review the Playwright code generated during the workflow.

In this hands-on lesson, you'll use Playwright CLI directly with Claude Code to automate a page in the practice demo application. You'll also see why combining CLI commands with Agentic Skills makes automation more reliable.

Learn what agent skills are and how they give coding agents reusable instructions for specific tasks. Explore the structure of a skill, the idea of progressive disclosure, and how skills help agents find the right guidance when they need it.

You'll learn what the Playwright CLI Skill is and how it combines CLI commands with instructions into one reusable skill. You'll install it and explore the reference files it includes.

Use Claude Code, Playwright CLI, and the Playwright skill to automate a page in the course demo application. Follow the workflow from exploring the page to creating a Playwright test, and see how the skill guides the agent through the task.