From 0e9f81bffdf0d0b342d850564beb043417751036 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Tue, 5 May 2026 05:16:05 +0000 Subject: [PATCH 01/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 public/uploads/rules/playwright-with-ai/rule.mdx diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx new file mode 100644 index 00000000000..dea227b2cc7 --- /dev/null +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -0,0 +1,17 @@ +--- +title: Do you know how to use Playwright with your AI Agents? +uri: playwright-with-ai +guid: 05f8fdb2-bbf8-4c93-a94c-eedd362cc218 +created: 2026-05-05T05:12:20.286Z +createdBy: Michael Qiu +createdByEmail: MichaelQiu@ssw.com.au +lastUpdated: 2026-05-05T05:13:47.068Z +lastUpdatedBy: Michael Qiu +lastUpdatedByEmail: MichaelQiu@ssw.com.au +--- + +Intro + + + +Body From 30903286eb96e08ebfad6de7af226246a4a4a6cd Mon Sep 17 00:00:00 2001 From: Michael Date: Tue, 5 May 2026 15:32:05 +1000 Subject: [PATCH 02/20] Fill in Playwright with AI Agents rule Add full rule content covering the four ways to combine Playwright with AI coding agents: the Playwright MCP server, the CLI plus codegen, and the official Test Agents (Planner, Generator, Healer). Includes good/bad examples, install snippets for Claude Code, VS Code, Cursor, and best-practice guidance on locator strategy and the record-then-refine workflow. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../uploads/rules/playwright-with-ai/rule.mdx | 133 +++++++++++++++++- 1 file changed, 131 insertions(+), 2 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index dea227b2cc7..447ec6286ca 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -1,7 +1,20 @@ --- +type: rule title: Do you know how to use Playwright with your AI Agents? uri: playwright-with-ai guid: 05f8fdb2-bbf8-4c93-a94c-eedd362cc218 +seoDescription: Learn the different ways to combine Playwright with AI coding agents - the Playwright MCP server, the Playwright CLI, codegen, and the official Playwright Test Agents - for UI testing, frontend development, and browser automation. +authors: + - title: Michael Qiu + url: 'https://www.ssw.com.au/people/michael-qiu' +related: + - rule: public/uploads/rules/automated-ui-testing/rule.mdx + - rule: public/uploads/rules/playwright-page-object-model/rule.mdx + - rule: public/uploads/rules/mcp-servers-for-context/rule.mdx + - rule: public/uploads/rules/ai-cli-tools/rule.mdx +categories: + - category: categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx + - category: categories/software-engineering/rules-to-better-testing.mdx created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au @@ -10,8 +23,124 @@ lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- -Intro +[Playwright](https://playwright.dev/) is Microsoft's end-to-end browser automation framework. On its own it is a powerful test runner, but paired with an AI coding agent it becomes much more - the agent can write tests by recording real user flows, verify its own frontend changes in a live browser, heal flaky tests, and automate repetitive web tasks. + +There are several ways to give your AI agent access to Playwright, and each one is suited to a different job. Picking the right one keeps your tests reliable and your token bill predictable. -Body +## Why pair Playwright with an AI agent? + +Without a browser, an agent has to *guess* what the UI looks like. It writes selectors blindly, can't see the result of its own changes, and ships tests that break the moment they run. Giving the agent Playwright closes that loop: + +* **UI testing** - Generate end-to-end tests by exploring the real app and self-heal them when selectors drift +* **Frontend development** - Let the agent open the page it just built, click through it, and verify the change actually works before claiming it is done +* **Automation and scraping** - Drive multi-step web workflows (form fills, data extraction, scheduled checks) using structured accessibility data instead of brittle screenshots + +## Option 1 - Playwright MCP server + +The [Playwright MCP](https://github.com/microsoft/playwright-mcp) exposes the browser to your agent through the Model Context Protocol. Instead of screenshots, it sends the page's **accessibility tree** (ARIA roles, labels, states) which is deterministic, LLM-friendly, and avoids the cost of vision models. + +Install it once, use it everywhere: + +```bash +# Claude Code +claude mcp add playwright npx @playwright/mcp@latest +``` + +```json +// VS Code, Cursor, Claude Desktop - mcpServers config +{ + "mcpServers": { + "playwright": { + "command": "npx", + "args": ["@playwright/mcp@latest"] + } + } +} +``` + +**Best for:** interactive sessions where the agent needs to explore an app, click around, and reason about page state across multiple turns - for example debugging a bug report by reproducing it in the browser. + + + Playwright MCP is **not a security boundary**. It can navigate to any URL the agent asks for and submit any form. Run it with `--isolated` for ephemeral profiles, scope it to safe origins, and never point it at production with real credentials. + } + figurePrefix="none" + figure="" + style="highlight" +/> + +## Option 2 - Playwright CLI plus codegen + +For most day-to-day test authoring, the plain Playwright CLI driven by your agent is faster and cheaper than the MCP. Microsoft now recommends the CLI path for coding agents because it uses roughly **4x fewer tokens per session** than the equivalent MCP loop. + +The killer feature is `codegen` - it opens a browser, records your clicks, and emits idiomatic test code with smart role-based locators: + +```bash +npx playwright codegen https://your-app.example.com +``` + +The "**record then refine**" pattern works far better than asking an agent to imagine a flow from scratch: + +1. *You* record the happy path with codegen +2. *The agent* refactors the recording into a [Page Object Model](/playwright-page-object-model), parameterises inputs, and adds assertions +3. *The agent* runs `npx playwright test --ui` to debug failures with time-travel snapshots + +### ❌ Bad example - Agent writes Playwright tests blind + +```typescript +// Agent invented this without ever opening the page +test('checkout flow', async ({ page }) => { + await page.goto('/checkout'); + await page.locator('#email-input-field').fill('test@example.com'); + await page.locator('.btn-primary.checkout-submit').click(); + await page.waitForTimeout(3000); // hope the page loaded + await expect(page.locator('.success')).toBeVisible(); +}); +``` + +**Figure: Bad example - Hallucinated CSS selectors and a fixed `waitForTimeout` that will be flaky on day one** + +### βœ… Good example - Codegen recording, refined by the agent + +```typescript +test('checkout flow', async ({ page }) => { + await page.goto('/checkout'); + await page.getByLabel('Email').fill('test@example.com'); + await page.getByRole('button', { name: 'Place order' }).click(); + await expect(page.getByRole('heading', { name: 'Order confirmed' })).toBeVisible(); +}); +``` + +**Figure: Good example - Role-based locators captured from the live DOM, no arbitrary waits, web-first assertions** + +## Option 3 - Playwright Test Agents (Planner, Generator, Healer) + +Playwright now ships a set of [official AI agents](https://playwright.dev/docs/test-agents) that wrap the whole test lifecycle. Generate them with one command: + +```bash +npx playwright init-agents --loop=claude +``` + +* 🎭 **Planner** - Explores the app and produces a Markdown test plan +* 🎭 **Generator** - Converts the plan into runnable Playwright Test files, verifying selectors live +* 🎭 **Healer** - Runs the suite, inspects failures in the browser, and proposes patches + +**Best for:** teams that want a structured, repeatable agentic loop for test generation rather than ad-hoc prompting. Works with Claude Code, GitHub Copilot, and Cursor (via the `--loop` flag). + +## Best practices + +* **Prefer the accessibility tree** - Whether via MCP or codegen, role-based locators (`getByRole`, `getByLabel`) are roughly **10x more stable** than CSS selectors against agent-generated UI churn +* **Record then refine** - Capture the flow with codegen first, then ask the agent to refactor. Don't ask the agent to imagine the DOM +* **Reserve agents for the hard parts** - Keep stable, high-confidence specs as static Playwright tests. Use the agent loop for flaky tests, new features, and high-churn areas +* **Run the test before declaring success** - The agent should execute `npx playwright test` and read the output, not just write code that "looks right" +* **Combine with the [Page Object Model](/playwright-page-object-model)** - Agent-generated tests are still tests; structure them so a UI change touches one file, not fifty + +## Further reading + +* [Playwright documentation](https://playwright.dev/docs/intro) +* [Playwright MCP](https://github.com/microsoft/playwright-mcp) +* [Playwright Test Agents](https://playwright.dev/docs/test-agents) +* [Codegen guide](https://playwright.dev/docs/codegen-intro) +* [UI Mode for time-travel debugging](https://playwright.dev/docs/test-ui-mode) From cf1a05f3bc47ef4641dc91213c93c916af27466f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 5 May 2026 05:33:02 +0000 Subject: [PATCH 03/20] =?UTF-8?q?XS=20=E2=97=BE=20Auto-update=20category?= =?UTF-8?q?=20index=20list=20to=20include=20new=20rule?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rules-to-better-ai-assisted-development.mdx | 1 + categories/software-engineering/rules-to-better-testing.mdx | 1 + 2 files changed, 2 insertions(+) diff --git a/categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx b/categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx index e7912ca0798..66837e1aa8e 100644 --- a/categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx +++ b/categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx @@ -35,6 +35,7 @@ index: - rule: public/uploads/rules/git-worktrees/rule.mdx - rule: public/uploads/rules/start-vibe-coding-best-practices/rule.mdx - rule: public/uploads/rules/ai-with-design-system/rule.mdx + - rule: public/uploads/rules/playwright-with-ai/rule.mdx created: 2024-08-26T22:47:01.000Z createdBy: 'Eddie Kranz [SSW]' createdByEmail: EddieKranz@ssw.com.au diff --git a/categories/software-engineering/rules-to-better-testing.mdx b/categories/software-engineering/rules-to-better-testing.mdx index 49884083090..eaec3c29dec 100644 --- a/categories/software-engineering/rules-to-better-testing.mdx +++ b/categories/software-engineering/rules-to-better-testing.mdx @@ -37,6 +37,7 @@ index: - rule: public/uploads/rules/do-you-only-roll-forward/rule.mdx - rule: public/uploads/rules/use-testcontainers/rule.mdx - rule: public/uploads/rules/playwright-page-object-model/rule.mdx + - rule: public/uploads/rules/playwright-with-ai/rule.mdx --- From 596d75fc99174b2d39ac77016be1d7f712f577fa Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Tue, 5 May 2026 07:00:23 +0000 Subject: [PATCH 04/20] TinaCMS content update Co-authored-by: Michael Qiu --- public/uploads/rules/playwright-with-ai/rule.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 447ec6286ca..7212b1e50c1 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -2,8 +2,9 @@ type: rule title: Do you know how to use Playwright with your AI Agents? uri: playwright-with-ai -guid: 05f8fdb2-bbf8-4c93-a94c-eedd362cc218 -seoDescription: Learn the different ways to combine Playwright with AI coding agents - the Playwright MCP server, the Playwright CLI, codegen, and the official Playwright Test Agents - for UI testing, frontend development, and browser automation. +categories: + - category: categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx + - category: categories/software-engineering/rules-to-better-testing.mdx authors: - title: Michael Qiu url: 'https://www.ssw.com.au/people/michael-qiu' @@ -12,13 +13,12 @@ related: - rule: public/uploads/rules/playwright-page-object-model/rule.mdx - rule: public/uploads/rules/mcp-servers-for-context/rule.mdx - rule: public/uploads/rules/ai-cli-tools/rule.mdx -categories: - - category: categories/artificial-intelligence/rules-to-better-ai-assisted-development.mdx - - category: categories/software-engineering/rules-to-better-testing.mdx +guid: 05f8fdb2-bbf8-4c93-a94c-eedd362cc218 +seoDescription: 'Learn the different ways to combine Playwright with AI coding agents - the Playwright MCP server, the Playwright CLI, codegen, and the official Playwright Test Agents - for UI testing, frontend development, and browser automation.' created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-05T05:13:47.068Z +lastUpdated: 2026-05-05T07:00:21.648Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -68,7 +68,7 @@ claude mcp add playwright npx @playwright/mcp@latest } figurePrefix="none" figure="" - style="highlight" + style="warning" /> ## Option 2 - Playwright CLI plus codegen From 63857d0a723056461b072369fafd8adb3daccd90 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Tue, 5 May 2026 07:40:21 +0000 Subject: [PATCH 05/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 78 ++++++++++--------- 1 file changed, 41 insertions(+), 37 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 7212b1e50c1..7bc7c2055b0 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -8,6 +8,10 @@ categories: authors: - title: Michael Qiu url: 'https://www.ssw.com.au/people/michael-qiu' + - title: Hark Singh + url: 'https://www.ssw.com.au/people/hark-singh' + - title: Daniel Mackay + url: 'https://www.ssw.com.au/people/daniel-mackay' related: - rule: public/uploads/rules/automated-ui-testing/rule.mdx - rule: public/uploads/rules/playwright-page-object-model/rule.mdx @@ -18,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-05T07:00:21.648Z +lastUpdated: 2026-05-05T07:40:20.433Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -37,41 +41,7 @@ Without a browser, an agent has to *guess* what the UI looks like. It writes sel * **Frontend development** - Let the agent open the page it just built, click through it, and verify the change actually works before claiming it is done * **Automation and scraping** - Drive multi-step web workflows (form fills, data extraction, scheduled checks) using structured accessibility data instead of brittle screenshots -## Option 1 - Playwright MCP server - -The [Playwright MCP](https://github.com/microsoft/playwright-mcp) exposes the browser to your agent through the Model Context Protocol. Instead of screenshots, it sends the page's **accessibility tree** (ARIA roles, labels, states) which is deterministic, LLM-friendly, and avoids the cost of vision models. - -Install it once, use it everywhere: - -```bash -# Claude Code -claude mcp add playwright npx @playwright/mcp@latest -``` - -```json -// VS Code, Cursor, Claude Desktop - mcpServers config -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": ["@playwright/mcp@latest"] - } - } -} -``` - -**Best for:** interactive sessions where the agent needs to explore an app, click around, and reason about page state across multiple turns - for example debugging a bug report by reproducing it in the browser. - - - Playwright MCP is **not a security boundary**. It can navigate to any URL the agent asks for and submit any form. Run it with `--isolated` for ephemeral profiles, scope it to safe origins, and never point it at production with real credentials. - } - figurePrefix="none" - figure="" - style="warning" -/> - -## Option 2 - Playwright CLI plus codegen +## Playwright CLI plus codegen (Recommended) For most day-to-day test authoring, the plain Playwright CLI driven by your agent is faster and cheaper than the MCP. Microsoft now recommends the CLI path for coding agents because it uses roughly **4x fewer tokens per session** than the equivalent MCP loop. @@ -115,7 +85,41 @@ test('checkout flow', async ({ page }) => { **Figure: Good example - Role-based locators captured from the live DOM, no arbitrary waits, web-first assertions** -## Option 3 - Playwright Test Agents (Planner, Generator, Healer) +## Playwright MCP server + +The [Playwright MCP](https://github.com/microsoft/playwright-mcp) exposes the browser to your agent through the Model Context Protocol. Instead of screenshots, it sends the page's **accessibility tree** (ARIA roles, labels, states) which is deterministic, LLM-friendly, and avoids the cost of vision models. + +Install it once, use it everywhere: + +```bash +# Claude Code +claude mcp add playwright npx @playwright/mcp@latest +``` + +```json +// VS Code, Cursor, Claude Desktop - mcpServers config +{ + "mcpServers": { + "playwright": { + "command": "npx", + "args": ["@playwright/mcp@latest"] + } + } +} +``` + +**Best for:** interactive sessions where the agent needs to explore an app, click around, and reason about page state across multiple turns - for example debugging a bug report by reproducing it in the browser. + + + Playwright MCP is **not a security boundary**. It can navigate to any URL the agent asks for and submit any form. Run it with `--isolated` for ephemeral profiles, scope it to safe origins, and never point it at production with real credentials. + } + figurePrefix="none" + figure="" + style="warning" +/> + +## Playwright Test Agents (Planner, Generator, Healer) Playwright now ships a set of [official AI agents](https://playwright.dev/docs/test-agents) that wrap the whole test lifecycle. Generate them with one command: From 578a123786c5d63d952a353872426e5c4206f7a7 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 01:28:13 +0000 Subject: [PATCH 06/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 7bc7c2055b0..35e4f70c12a 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,24 +22,45 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-05T07:40:20.433Z +lastUpdated: 2026-05-06T01:28:10.894Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- -[Playwright](https://playwright.dev/) is Microsoft's end-to-end browser automation framework. On its own it is a powerful test runner, but paired with an AI coding agent it becomes much more - the agent can write tests by recording real user flows, verify its own frontend changes in a live browser, heal flaky tests, and automate repetitive web tasks. +Playwright is Microsoft's end-to-end browser automation framework. On its own, it is a powerful test runner, something that you can use to implement visual tests, but when paired with an AI Agent, it becomes so much more. The agent gains the ability to write tests by recording real use flows, verify its own frontend changes in a live browser, heal flaky tests, and even automate repetitive web tasks. -There are several ways to give your AI agent access to Playwright, and each one is suited to a different job. Picking the right one keeps your tests reliable and your token bill predictable. +There are a number of ways to give your AI Agent access to Playwright, whether than be through the MCP, CLI, or otherwise, with each one being best suited for a different job. The decision comes in figuring out and understanding which one to pick. ## Why pair Playwright with an AI agent? -Without a browser, an agent has to *guess* what the UI looks like. It writes selectors blindly, can't see the result of its own changes, and ships tests that break the moment they run. Giving the agent Playwright closes that loop: +Without access to a browser, agents have to guess and assume what the UI looks like. This means that it writes selectors blindly, and can't see the results of its own changes. In turn, it can ship tests that break the moment they're run and build features that look completely wrong without a second thought. -* **UI testing** - Generate end-to-end tests by exploring the real app and self-heal them when selectors drift -* **Frontend development** - Let the agent open the page it just built, click through it, and verify the change actually works before claiming it is done -* **Automation and scraping** - Drive multi-step web workflows (form fills, data extraction, scheduled checks) using structured accessibility data instead of brittle screenshots +By giving the agent Playwright, we can close this loop and set up a sort of iterative inner loop for the agent to check its own changes, allowing for: + +* **Automated UI testing** - generating end-to-end tests for the frontend by exploring the layout of the app itself and self-healing the tests when certain selectors drift during development +* **Frontend development** - allow the agent to open the page that it just built, click through the page, and verify that the changes made actually work as intended before claiming that it is done, reducing the number of iterative cycles required +* **Automation and scraping** - have agents drive multi-step web workflows (form fills, data extraction, scheduled checks, etc.) using the existing structured accessibility data instead of brittle screenshots that break with the slightest UI change + +## How can you pair Playwright with an AI agent? + +There are a variety of ways that you can give your AI Agent access to Playwright, however, there are a few ways that are built and optimised specifically for AI Agents and those are what perform the best in terms of integration with AI Agents. + +### Playwright CLI (Recommended) + + + Although the CLI is more efficient than the MCP, it requires a coding agent and is more designed for coding, testing and is best for those already using agents such as Claude Code, GitHub Copilot, etc. + + On the other hand, if your workflow involves creating an agentic loop that is performing specific tasks for your scenarios, MCP is still the superior option for that. + } + figurePrefix="none" + figure="" + style="info" +/> + +For most day-to-day test authoring, building, and usage, the Playwright CLI driven by your AI Agent is faster and cheaper than using the MCP to drive. ## Playwright CLI plus codegen (Recommended) From fe102d3913cce84ff7aa88a30817d1e7008060c2 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 02:03:03 +0000 Subject: [PATCH 07/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 35e4f70c12a..78c22b84fb6 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T01:28:10.894Z +lastUpdated: 2026-05-06T02:03:02.271Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -60,7 +60,24 @@ There are a variety of ways that you can give your AI Agent access to Playwright style="info" /> -For most day-to-day test authoring, building, and usage, the Playwright CLI driven by your AI Agent is faster and cheaper than using the MCP to drive. +For most day-to-day test authoring, building, and usage, the Playwright CLI driven by your AI Agent is faster and cheaper than using the MCP to drive. In many cases, using the CLI with a coding agent uses approximately **4x fewer tokens** compared to a run with the same prompt to an agent using the MCP. + +### Playwright MCP server + +The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree **(i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. + +Playwright MCP is best for interactive sessions where the agent needs to explore an app, click around, and reason about the page state across multiple turns (e.g. Debugging a bug report by figuring out how to reproduce it in the browser) + + + Playwright MCP is **NOT** a security boundary. By default, it can navigate to any URL that the agent asks for, and submit any form. + + You should **always** scope it to **safe origins**, and never point it at production with real credentials. + } + figurePrefix="none" + figure="" + style="warning" +/> ## Playwright CLI plus codegen (Recommended) From 6e38cf60e58056a1dead343fdf2ed7416f35dc82 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 04:13:17 +0000 Subject: [PATCH 08/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 64 ++++--------------- 1 file changed, 13 insertions(+), 51 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 78c22b84fb6..01b2ddcf4db 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T02:03:02.271Z +lastUpdated: 2026-05-06T04:13:15.870Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -62,6 +62,10 @@ There are a variety of ways that you can give your AI Agent access to Playwright For most day-to-day test authoring, building, and usage, the Playwright CLI driven by your AI Agent is faster and cheaper than using the MCP to drive. In many cases, using the CLI with a coding agent uses approximately **4x fewer tokens** compared to a run with the same prompt to an agent using the MCP. +### Using Playwright CLI with Codegen (Optional) + +`codegen` is a very useful command that allows for you to record your browser interactions, allowing Playwright to generate the code for the user interactions which you can see in the Playwright Inspector window. Once finishing recording your test, you can stop the recording and press the **copy** button to copy your generated test into your editor of choice. From there, you can then pass that output to your AI Agent as a source material for the AI refactoring. + ### Playwright MCP server The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree **(i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. @@ -79,6 +83,14 @@ Playwright MCP is best for interactive sessions where the agent needs to explore style="warning" /> +### Playwright Test Agents (Planner, Generator, Healer) + +Playwright now comes with three Playwright Test Agents immediately out of the box that wrap around the entire test lifecycle. + +* 🎭 **Planner** - used to explore the app and produce a Markdown test plan that covers one or many scenarios and user flows, the plan itself is human readable but still accurate enough to drive test generation +* 🎭 **Generator **- used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios +* 🎭 **Healer** - automatically heals the tests created by the Generator agent that fails, replaying the failing steps, inspecting the current UI, suggesting a patch to fix the tests, and rerunning until the test passes or the built-in guardrails stop the loop + ## Playwright CLI plus codegen (Recommended) For most day-to-day test authoring, the plain Playwright CLI driven by your agent is faster and cheaper than the MCP. Microsoft now recommends the CLI path for coding agents because it uses roughly **4x fewer tokens per session** than the equivalent MCP loop. @@ -123,60 +135,10 @@ test('checkout flow', async ({ page }) => { **Figure: Good example - Role-based locators captured from the live DOM, no arbitrary waits, web-first assertions** -## Playwright MCP server - -The [Playwright MCP](https://github.com/microsoft/playwright-mcp) exposes the browser to your agent through the Model Context Protocol. Instead of screenshots, it sends the page's **accessibility tree** (ARIA roles, labels, states) which is deterministic, LLM-friendly, and avoids the cost of vision models. - -Install it once, use it everywhere: - -```bash -# Claude Code -claude mcp add playwright npx @playwright/mcp@latest -``` - -```json -// VS Code, Cursor, Claude Desktop - mcpServers config -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": ["@playwright/mcp@latest"] - } - } -} -``` - -**Best for:** interactive sessions where the agent needs to explore an app, click around, and reason about page state across multiple turns - for example debugging a bug report by reproducing it in the browser. - - - Playwright MCP is **not a security boundary**. It can navigate to any URL the agent asks for and submit any form. Run it with `--isolated` for ephemeral profiles, scope it to safe origins, and never point it at production with real credentials. - } - figurePrefix="none" - figure="" - style="warning" -/> - -## Playwright Test Agents (Planner, Generator, Healer) - -Playwright now ships a set of [official AI agents](https://playwright.dev/docs/test-agents) that wrap the whole test lifecycle. Generate them with one command: - -```bash -npx playwright init-agents --loop=claude -``` - -* 🎭 **Planner** - Explores the app and produces a Markdown test plan -* 🎭 **Generator** - Converts the plan into runnable Playwright Test files, verifying selectors live -* 🎭 **Healer** - Runs the suite, inspects failures in the browser, and proposes patches - -**Best for:** teams that want a structured, repeatable agentic loop for test generation rather than ad-hoc prompting. Works with Claude Code, GitHub Copilot, and Cursor (via the `--loop` flag). - ## Best practices * **Prefer the accessibility tree** - Whether via MCP or codegen, role-based locators (`getByRole`, `getByLabel`) are roughly **10x more stable** than CSS selectors against agent-generated UI churn * **Record then refine** - Capture the flow with codegen first, then ask the agent to refactor. Don't ask the agent to imagine the DOM -* **Reserve agents for the hard parts** - Keep stable, high-confidence specs as static Playwright tests. Use the agent loop for flaky tests, new features, and high-churn areas -* **Run the test before declaring success** - The agent should execute `npx playwright test` and read the output, not just write code that "looks right" * **Combine with the [Page Object Model](/playwright-page-object-model)** - Agent-generated tests are still tests; structure them so a UI change touches one file, not fifty ## Further reading From 73e7f3d0fab5ec74058ace6052d96e887b9dbf0f Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 04:15:02 +0000 Subject: [PATCH 09/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 50 ++----------------- 1 file changed, 3 insertions(+), 47 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 01b2ddcf4db..729628fdea8 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T04:13:15.870Z +lastUpdated: 2026-05-06T04:15:01.264Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -68,7 +68,7 @@ For most day-to-day test authoring, building, and usage, the Playwright CLI driv ### Playwright MCP server -The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree **(i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. +The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree** (i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. Playwright MCP is best for interactive sessions where the agent needs to explore an app, click around, and reason about the page state across multiple turns (e.g. Debugging a bug report by figuring out how to reproduce it in the browser) @@ -88,53 +88,9 @@ Playwright MCP is best for interactive sessions where the agent needs to explore Playwright now comes with three Playwright Test Agents immediately out of the box that wrap around the entire test lifecycle. * 🎭 **Planner** - used to explore the app and produce a Markdown test plan that covers one or many scenarios and user flows, the plan itself is human readable but still accurate enough to drive test generation -* 🎭 **Generator **- used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios +* 🎭 **Generator** - used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios * 🎭 **Healer** - automatically heals the tests created by the Generator agent that fails, replaying the failing steps, inspecting the current UI, suggesting a patch to fix the tests, and rerunning until the test passes or the built-in guardrails stop the loop -## Playwright CLI plus codegen (Recommended) - -For most day-to-day test authoring, the plain Playwright CLI driven by your agent is faster and cheaper than the MCP. Microsoft now recommends the CLI path for coding agents because it uses roughly **4x fewer tokens per session** than the equivalent MCP loop. - -The killer feature is `codegen` - it opens a browser, records your clicks, and emits idiomatic test code with smart role-based locators: - -```bash -npx playwright codegen https://your-app.example.com -``` - -The "**record then refine**" pattern works far better than asking an agent to imagine a flow from scratch: - -1. *You* record the happy path with codegen -2. *The agent* refactors the recording into a [Page Object Model](/playwright-page-object-model), parameterises inputs, and adds assertions -3. *The agent* runs `npx playwright test --ui` to debug failures with time-travel snapshots - -### ❌ Bad example - Agent writes Playwright tests blind - -```typescript -// Agent invented this without ever opening the page -test('checkout flow', async ({ page }) => { - await page.goto('/checkout'); - await page.locator('#email-input-field').fill('test@example.com'); - await page.locator('.btn-primary.checkout-submit').click(); - await page.waitForTimeout(3000); // hope the page loaded - await expect(page.locator('.success')).toBeVisible(); -}); -``` - -**Figure: Bad example - Hallucinated CSS selectors and a fixed `waitForTimeout` that will be flaky on day one** - -### βœ… Good example - Codegen recording, refined by the agent - -```typescript -test('checkout flow', async ({ page }) => { - await page.goto('/checkout'); - await page.getByLabel('Email').fill('test@example.com'); - await page.getByRole('button', { name: 'Place order' }).click(); - await expect(page.getByRole('heading', { name: 'Order confirmed' })).toBeVisible(); -}); -``` - -**Figure: Good example - Role-based locators captured from the live DOM, no arbitrary waits, web-first assertions** - ## Best practices * **Prefer the accessibility tree** - Whether via MCP or codegen, role-based locators (`getByRole`, `getByLabel`) are roughly **10x more stable** than CSS selectors against agent-generated UI churn From 69f45817e5fd8e67e2d681f069ec0ec3b3203114 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 04:16:24 +0000 Subject: [PATCH 10/20] TinaCMS content update Co-authored-by: Michael Qiu --- public/uploads/rules/playwright-with-ai/rule.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 729628fdea8..b9886d4827e 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T04:15:01.264Z +lastUpdated: 2026-05-06T04:16:23.059Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -33,6 +33,8 @@ There are a number of ways to give your AI Agent access to Playwright, whether t + + ## Why pair Playwright with an AI agent? Without access to a browser, agents have to guess and assume what the UI looks like. This means that it writes selectors blindly, and can't see the results of its own changes. In turn, it can ship tests that break the moment they're run and build features that look completely wrong without a second thought. From 7d233ed158275f95a9bdee8c30460b0f860df0de Mon Sep 17 00:00:00 2001 From: Michael Date: Wed, 6 May 2026 14:21:21 +1000 Subject: [PATCH 11/20] Add AI-driven development section and refresh best practices Add a new "Using Playwright for AI-driven development" section covering the inner-loop dev workflow (verify changes, reproduce bugs, explore before editing, deep-link iteration, component playground checks, network mocking) - the under-served angle where the agent uses Playwright to close its own "is it done?" loop rather than for testing. Replace the best-practices bullets with a tighter mix of agent behaviour and setup safety: POM, run-before-declare-success, role-based locators, scoped origins with --isolated, and one-test- at-a-time iteration. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../uploads/rules/playwright-with-ai/rule.mdx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index b9886d4827e..8761b7bceff 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -93,11 +93,26 @@ Playwright now comes with three Playwright Test Agents immediately out of the bo * 🎭 **Generator** - used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios * 🎭 **Healer** - automatically heals the tests created by the Generator agent that fails, replaying the failing steps, inspecting the current UI, suggesting a patch to fix the tests, and rerunning until the test passes or the built-in guardrails stop the loop +## Using Playwright for AI-driven development + +Most Playwright + AI content focuses on testing, but the more interesting day-to-day use case is the **inner development loop**. Without a browser, the agent's "is it done?" check is just "the file compiles." With Playwright (typically via the MCP), the agent can open the page it just changed, click through it, and verify the behaviour the same way a human dev would refresh the browser. + +This unlocks a few high-value workflows: + +* **Verify frontend changes inline** - After editing a component, the agent navigates to the page, captures an accessibility snapshot, and confirms the change actually rendered. Stops the "looks good to me, ship it" failure mode where the code compiles but the UI is broken +* **Reproduce reported bugs** - When a bug ticket comes in, the agent walks through the reproduction steps in the browser, captures the broken state, then proposes a fix. Faster than the human pasting screenshots back and forth +* **Explore before editing** - Before changing a flow the agent doesn't know, it navigates the app to understand the current behaviour (e.g. *"click through the checkout so you know what state I'm starting from"*). Reduces blind edits to code the agent has never seen run +* **Deep-link inner loops** - For changes buried behind login and several clicks, the agent automates the navigation each iteration, instead of asking the human to manually click through after every save +* **Component playground verification** - Agent navigates Storybook, Histoire, or your component sandbox after a change and confirms each variant still renders correctly +* **Network interception during dev** - Agent uses Playwright's route mocking to test edge cases (slow API, 500 errors, empty states) without needing to touch the real backend + ## Best practices -* **Prefer the accessibility tree** - Whether via MCP or codegen, role-based locators (`getByRole`, `getByLabel`) are roughly **10x more stable** than CSS selectors against agent-generated UI churn -* **Record then refine** - Capture the flow with codegen first, then ask the agent to refactor. Don't ask the agent to imagine the DOM -* **Combine with the [Page Object Model](/playwright-page-object-model)** - Agent-generated tests are still tests; structure them so a UI change touches one file, not fifty +* **Use [Page Object Models](/playwright-page-object-model)** - Agent-generated tests are still tests; structure them so a UI change touches one file, not fifty +* **Run the test before declaring success** - The agent should execute `npx playwright test` and read the output, not just write code that "looks right" and call it done +* **Prefer role-based locators** - `getByRole`, `getByLabel`, and `getByText` survive UI churn far better than CSS selectors, and they're what the MCP returns natively in its accessibility snapshots +* **Scope the agent to safe origins** - Never point Playwright MCP at production with real credentials; use a staging URL or local dev server, and run with `--isolated` to keep each session's state ephemeral +* **Iterate one test at a time** - Generate a single test, run it, fix the failure, then move on. Asking the agent for a 20-test suite in one shot tends to produce 20 mediocre tests with hallucinated selectors ## Further reading From e62f7dbc2d6a077b088dab32df9e1ad494b583e8 Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Wed, 6 May 2026 04:28:08 +0000 Subject: [PATCH 12/20] TinaCMS content update Co-authored-by: Michael Qiu --- .../uploads/rules/playwright-with-ai/rule.mdx | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 8761b7bceff..092630dfa5a 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T04:16:23.059Z +lastUpdated: 2026-05-06T04:28:07.065Z lastUpdatedBy: Michael Qiu lastUpdatedByEmail: MichaelQiu@ssw.com.au --- @@ -93,7 +93,7 @@ Playwright now comes with three Playwright Test Agents immediately out of the bo * 🎭 **Generator** - used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios * 🎭 **Healer** - automatically heals the tests created by the Generator agent that fails, replaying the failing steps, inspecting the current UI, suggesting a patch to fix the tests, and rerunning until the test passes or the built-in guardrails stop the loop -## Using Playwright for AI-driven development +## Using Playwright for AI-assisted development Most Playwright + AI content focuses on testing, but the more interesting day-to-day use case is the **inner development loop**. Without a browser, the agent's "is it done?" check is just "the file compiles." With Playwright (typically via the MCP), the agent can open the page it just changed, click through it, and verify the behaviour the same way a human dev would refresh the browser. @@ -106,18 +106,6 @@ This unlocks a few high-value workflows: * **Component playground verification** - Agent navigates Storybook, Histoire, or your component sandbox after a change and confirms each variant still renders correctly * **Network interception during dev** - Agent uses Playwright's route mocking to test edge cases (slow API, 500 errors, empty states) without needing to touch the real backend -## Best practices +## Learn more -* **Use [Page Object Models](/playwright-page-object-model)** - Agent-generated tests are still tests; structure them so a UI change touches one file, not fifty -* **Run the test before declaring success** - The agent should execute `npx playwright test` and read the output, not just write code that "looks right" and call it done -* **Prefer role-based locators** - `getByRole`, `getByLabel`, and `getByText` survive UI churn far better than CSS selectors, and they're what the MCP returns natively in its accessibility snapshots -* **Scope the agent to safe origins** - Never point Playwright MCP at production with real credentials; use a staging URL or local dev server, and run with `--isolated` to keep each session's state ephemeral -* **Iterate one test at a time** - Generate a single test, run it, fix the failure, then move on. Asking the agent for a 20-test suite in one shot tends to produce 20 mediocre tests with hallucinated selectors - -## Further reading - -* [Playwright documentation](https://playwright.dev/docs/intro) -* [Playwright MCP](https://github.com/microsoft/playwright-mcp) -* [Playwright Test Agents](https://playwright.dev/docs/test-agents) -* [Codegen guide](https://playwright.dev/docs/codegen-intro) -* [UI Mode for time-travel debugging](https://playwright.dev/docs/test-ui-mode) +* For more detailed information on the specifics of setting things up, refer to the [Playwright documentation](https://playwright.dev/docs/intro) From 2ff3528d6478418b7567e8af017bb69854068db7 Mon Sep 17 00:00:00 2001 From: "Michael (Suiyang) QIU [SSW]" <104818017+suiyangqiu@users.noreply.github.com> Date: Wed, 6 May 2026 17:07:56 +1000 Subject: [PATCH 13/20] Update public/uploads/rules/playwright-with-ai/rule.mdx Co-authored-by: Lewis Toh [SSW] <88498002+Lewkans@users.noreply.github.com> --- public/uploads/rules/playwright-with-ai/rule.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 092630dfa5a..84a2991e21e 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -47,7 +47,7 @@ By giving the agent Playwright, we can close this loop and set up a sort of iter ## How can you pair Playwright with an AI agent? -There are a variety of ways that you can give your AI Agent access to Playwright, however, there are a few ways that are built and optimised specifically for AI Agents and those are what perform the best in terms of integration with AI Agents. +While there are many ways to connect your AI Agent to Playwright, the options built specifically for agents are the ones that perform best. ### Playwright CLI (Recommended) From dfeca0d190f30edac572ad66ae1db4475523f9c1 Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:39:18 +1000 Subject: [PATCH 14/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- .../uploads/rules/playwright-with-ai/rule.mdx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 84a2991e21e..03c2d4be938 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,12 +22,12 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T04:28:07.065Z -lastUpdatedBy: Michael Qiu -lastUpdatedByEmail: MichaelQiu@ssw.com.au +lastUpdated: 2026-05-06T07:39:17.108Z +lastUpdatedBy: Hark +lastUpdatedByEmail: harksingh@ssw.com.au --- -Playwright is Microsoft's end-to-end browser automation framework. On its own, it is a powerful test runner, something that you can use to implement visual tests, but when paired with an AI Agent, it becomes so much more. The agent gains the ability to write tests by recording real use flows, verify its own frontend changes in a live browser, heal flaky tests, and even automate repetitive web tasks. +Playwright is Microsoft's end-to-end browser automation framework. On its own, it is a powerful test runner, something that you can use to implement visual tests, but when paired with an AI Agent, it becomes so much more. The agent gains the ability to write tests by recording real user flows, verify its own frontend changes in a live browser, heal flaky tests, and even automate repetitive web tasks. There are a number of ways to give your AI Agent access to Playwright, whether than be through the MCP, CLI, or otherwise, with each one being best suited for a different job. The decision comes in figuring out and understanding which one to pick. @@ -47,7 +47,7 @@ By giving the agent Playwright, we can close this loop and set up a sort of iter ## How can you pair Playwright with an AI agent? -While there are many ways to connect your AI Agent to Playwright, the options built specifically for agents are the ones that perform best. +There are a variety of ways that you can give your AI Agent access to Playwright, however, there are a few ways that are built and optimised specifically for AI Agents and those are what perform the best in terms of integration with AI Agents. ### Playwright CLI (Recommended) @@ -62,7 +62,12 @@ While there are many ways to connect your AI Agent to Playwright, the options bu style="info" /> -For most day-to-day test authoring, building, and usage, the Playwright CLI driven by your AI Agent is faster and cheaper than using the MCP to drive. In many cases, using the CLI with a coding agent uses approximately **4x fewer tokens** compared to a run with the same prompt to an agent using the MCP. +The Playwright CLI driven by your AI agent is the **fastest and cheapest **option for day-to-day test authoring, running, and debugging. In benchmarks, the same prompt run via the CLI uses approximately **4Γ— fewer tokens** than running it through the MCP. + +##### Why it's token efficient? + +* **Results written to disk: **the agent runs a test, output goes to a file, and only the relevant lines come back into the chat context (instead of a full page snapshot every turn) +* **Independent bash commands per action:** each action is a one-shot CLI call, no long-lived session to keep alive in context ### Using Playwright CLI with Codegen (Optional) From 96ce11c2b9373526ffd8bf493d975e11324f74d9 Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:40:53 +1000 Subject: [PATCH 15/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 03c2d4be938..4387f848206 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:39:17.108Z +lastUpdated: 2026-05-06T07:40:51.912Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -69,6 +69,17 @@ The Playwright CLI driven by your AI agent is the **fastest and cheapest **optio * **Results written to disk: **the agent runs a test, output goes to a file, and only the relevant lines come back into the chat context (instead of a full page snapshot every turn) * **Independent bash commands per action:** each action is a one-shot CLI call, no long-lived session to keep alive in context +##### Best for: + +* **Stateless tasks:** write a test, run a test, debug a failing test, walk a codebase + +###### **Setup** + +```bash +npm install -g @playwright/cli@latest +playwright-cli install --skills +``` + ### Using Playwright CLI with Codegen (Optional) `codegen` is a very useful command that allows for you to record your browser interactions, allowing Playwright to generate the code for the user interactions which you can see in the Playwright Inspector window. Once finishing recording your test, you can stop the recording and press the **copy** button to copy your generated test into your editor of choice. From there, you can then pass that output to your AI Agent as a source material for the AI refactoring. From 5045bdf6bcdf869f80ba19c100e4f94d783dfa2c Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:42:15 +1000 Subject: [PATCH 16/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 4387f848206..8d7bb4a82b8 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:40:51.912Z +lastUpdated: 2026-05-06T07:42:14.340Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -73,17 +73,15 @@ The Playwright CLI driven by your AI agent is the **fastest and cheapest **optio * **Stateless tasks:** write a test, run a test, debug a failing test, walk a codebase -###### **Setup** +###### Docs and setup + +Docs: [https://playwright.dev/agent-cli/introduction](https://playwright.dev/agent-cli/introduction) ```bash npm install -g @playwright/cli@latest playwright-cli install --skills ``` -### Using Playwright CLI with Codegen (Optional) - -`codegen` is a very useful command that allows for you to record your browser interactions, allowing Playwright to generate the code for the user interactions which you can see in the Playwright Inspector window. Once finishing recording your test, you can stop the recording and press the **copy** button to copy your generated test into your editor of choice. From there, you can then pass that output to your AI Agent as a source material for the AI refactoring. - ### Playwright MCP server The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree** (i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. From fba3aa9f32de39560d1122c6a8dc4bfb55a27226 Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:47:56 +1000 Subject: [PATCH 17/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 8d7bb4a82b8..f77b1b33c7c 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:42:14.340Z +lastUpdated: 2026-05-06T07:47:54.906Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -72,6 +72,7 @@ The Playwright CLI driven by your AI agent is the **fastest and cheapest **optio ##### Best for: * **Stateless tasks:** write a test, run a test, debug a failing test, walk a codebase +* Example: `β€œGo to 5 tina.io pages and check if everything is working”` ###### Docs and setup @@ -88,6 +89,11 @@ The Playwright MCP works by exposing your browser to your AI Agent via the [Mode Playwright MCP is best for interactive sessions where the agent needs to explore an app, click around, and reason about the page state across multiple turns (e.g. Debugging a bug report by figuring out how to reproduce it in the browser) +##### Best for: + +* **Stateful tasks: **The agent needs to explore an app across multiple turns (e.g. clicking around to figure out how to reproduce a reported bug) +* You're building an **agentic workflow** where the same browser session carries context between steps (e.g. "log in, add three items to cart, check out, verify the receipt email") + Playwright MCP is **NOT** a security boundary. By default, it can navigate to any URL that the agent asks for, and submit any form. From 20891052ce7d1d12ce7eb8aa5b3110df06ec590c Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:48:42 +1000 Subject: [PATCH 18/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index f77b1b33c7c..986121a6e52 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:47:54.906Z +lastUpdated: 2026-05-06T07:48:41.063Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -94,6 +94,8 @@ Playwright MCP is best for interactive sessions where the agent needs to explore * **Stateful tasks: **The agent needs to explore an app across multiple turns (e.g. clicking around to figure out how to reproduce a reported bug) * You're building an **agentic workflow** where the same browser session carries context between steps (e.g. "log in, add three items to cart, check out, verify the receipt email") +**Trade off: **higher token usage, because the page snapshot is part of the chat context every turn. + Playwright MCP is **NOT** a security boundary. By default, it can navigate to any URL that the agent asks for, and submit any form. From b550135e69ca2b740b364eb2686e6181660fd9fd Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:52:10 +1000 Subject: [PATCH 19/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 986121a6e52..654f23621e2 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:48:41.063Z +lastUpdated: 2026-05-06T07:52:09.372Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -87,8 +87,6 @@ playwright-cli install --skills The Playwright MCP works by exposing your browser to your AI Agent via the [Model Context Protocol](https://modelcontextprotocol.io/). Unlike other forms of Playwright, instead of taking screenshots of views and navigating it form there, it sends the page's **accesibility tree** (i.e. ARIA roles, labels, and states), which are deterministic, LLM-friendly, and allows users to avoid the cost of vision models. -Playwright MCP is best for interactive sessions where the agent needs to explore an app, click around, and reason about the page state across multiple turns (e.g. Debugging a bug report by figuring out how to reproduce it in the browser) - ##### Best for: * **Stateful tasks: **The agent needs to explore an app across multiple turns (e.g. clicking around to figure out how to reproduce a reported bug) @@ -96,6 +94,14 @@ Playwright MCP is best for interactive sessions where the agent needs to explore **Trade off: **higher token usage, because the page snapshot is part of the chat context every turn. +###### Docs and Setup: + +Docs: [https://playwright.dev/mcp/introduction](https://playwright.dev/mcp/introduction) + +``` +AI Prompt: add playwright mcp to claude +``` + Playwright MCP is **NOT** a security boundary. By default, it can navigate to any URL that the agent asks for, and submit any form. From d08f4ba22251eccbf308870fd8ec1c5f80203fa6 Mon Sep 17 00:00:00 2001 From: "Hark Singh [SSW]" <65155920+0xharkirat@users.noreply.github.com> Date: Wed, 6 May 2026 17:52:56 +1000 Subject: [PATCH 20/20] TinaCMS content update Co-authored-by: Hark Singh [SSW] --- public/uploads/rules/playwright-with-ai/rule.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/uploads/rules/playwright-with-ai/rule.mdx b/public/uploads/rules/playwright-with-ai/rule.mdx index 654f23621e2..2d5ce19ed21 100644 --- a/public/uploads/rules/playwright-with-ai/rule.mdx +++ b/public/uploads/rules/playwright-with-ai/rule.mdx @@ -22,7 +22,7 @@ seoDescription: 'Learn the different ways to combine Playwright with AI coding a created: 2026-05-05T05:12:20.286Z createdBy: Michael Qiu createdByEmail: MichaelQiu@ssw.com.au -lastUpdated: 2026-05-06T07:52:09.372Z +lastUpdated: 2026-05-06T07:52:55.325Z lastUpdatedBy: Hark lastUpdatedByEmail: harksingh@ssw.com.au --- @@ -115,10 +115,10 @@ AI Prompt: add playwright mcp to claude ### Playwright Test Agents (Planner, Generator, Healer) -Playwright now comes with three Playwright Test Agents immediately out of the box that wrap around the entire test lifecycle. +Playwright now comes with 3 Playwright Test Agents immediately out of the box that wrap around the entire test lifecycle. * 🎭 **Planner** - used to explore the app and produce a Markdown test plan that covers one or many scenarios and user flows, the plan itself is human readable but still accurate enough to drive test generation -* 🎭 **Generator** - used to take the Markdown test plan and produce executible Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios +* 🎭 **Generator** - used to take the Markdown test plan and produce executable Playwright tests. It also verifies that selectors and assertions live as it performs the relevant scenarios * 🎭 **Healer** - automatically heals the tests created by the Generator agent that fails, replaying the failing steps, inspecting the current UI, suggesting a patch to fix the tests, and rerunning until the test passes or the built-in guardrails stop the loop ## Using Playwright for AI-assisted development