From bc8d7f0518358c10810cf0c6488e4c250267e26f Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 16:39:16 +0100 Subject: [PATCH 01/20] Add Playwright Skills tutorial for agentic testing --- .../docs/tutorials/playwright-skills.md | 282 ++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 documentation/docs/tutorials/playwright-skills.md diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md new file mode 100644 index 000000000000..e88a3c557c95 --- /dev/null +++ b/documentation/docs/tutorials/playwright-skills.md @@ -0,0 +1,282 @@ +--- +title: Agentic Testing with Playwright Skills +description: Use goose with Playwright CLI skills to automate browsers and generate tests using natural language +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; + + + +goose can automate browsers and generate Playwright tests using [Playwright CLI](https://github.com/microsoft/playwright-cli). By loading Playwright CLI Skills, goose gains the ability to navigate websites, interact with elements, take screenshots, record videos, and generate test code all from natural language instructions whilst also saving on tokens compared to when using the Playwright MCP. + +### Prerequisites + +- [Node.js](https://nodejs.org/) 18 or later +- A project with [Playwright](https://playwright.dev/) installed (`npm init playwright@latest`) +- Install Playwright CLI globally: + ```bash + npm install -g @playwright/cli@latest + ``` + +## Configuration + +First, install the Playwright skills in your project directory: + +```bash +playwright-cli install --skills +``` + +This creates a `.claude/` folder with skills and reference files that teach goose how to use Playwright CLI capabilities. + +Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load and use Agent Skills. + + + + + + + + 1. Run the `configure` command: + ```sh + goose configure + ``` + + 2. Choose to `Toggle Extensions` + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Toggle Extensions + │ + ◆ Enable extensions: (use "space" to toggle and "enter" to submit) + // highlight-start + │ ● skills + // highlight-end + | + └ Extension settings updated successfully + ``` + + + +## Understanding the Skills Structure + +After installing skills, your project will have: + +``` +.claude/ +└── skills/ + └── playwright-cli/ + ├── SKILL.md + └── references/ + ├── request-mocking.md + ├── running-code.md + ├── session-management.md + ├── storage-state.md + ├── test-generation.md + ├── tracing.md + └── video-recording.md +``` + +These reference files teach goose how to: +- **Mock requests** - Intercept, mock, modify, and block network requests +- **Run code** - Execute Playwright code for advanced scenarios +- **Manage sessions** - Handle browser sessions and state +- **Store state** - Manage authentication and cookies +- **Generate tests** - Create Playwright TypeScript code from actions +- **Record traces** - Capture detailed traces of browser interactions +- **Record videos** - Save browser sessions as video for debugging + +## How It Works: Token Efficiency + +Unlike with the Playwright MCP whcih puts the entire page structure into the LLM context, Playwright CLI saves the accessibility tree locally as YAML files. This means: + +- ✅ Faster responses +- ✅ Lower token usage +- ✅ More cost effective +- ✅ Handles large pages without issues + +When goose takes a snapshot, it saves a YAML file containing element references (refs) that it uses to find and interact with elements on the page. + +## Example Usage + +### Opening a Browser and Taking Screenshots + +Ask goose to open a website: + +``` +Open block.github.io/goose in the browser +``` + +goose will navigate to the site and report the browser session is active. You can then: + +``` +Take a screenshot +``` + +The screenshot is saved to `.playwright-cli/` in your project. + +:::tip Headed Mode +By default, the browser runs headless (no visible window). If you want to watch the automation, use: +``` +Open block.github.io/goose in a headed browser +``` + +::: + +### Generating Tests with Natural Language + +Describe what you want to test in plain English: + +``` +Search for a guide on how to use skills, click on the first result, +then create a test based on your interactions +``` + +### goose Output + +``` +─── load_skill | skills ─────────────────────────────────────── +name: playwright-cli + +─── playwright-cli open | developer ─────────────────────────── +Opening browser and navigating to block.github.io/goose + +─── playwright-cli snapshot | developer ─────────────────────── +Captured page structure, found search button at ref e89 + +─── playwright-cli click | developer ────────────────────────── +Clicking on search button (ref e89) + +─── playwright-cli fill | developer ──────────────────────────── +Filling search box with "how to use skills" + +─── playwright-cli snapshot | developer ─────────────────────── +Found search results, first result at ref e156 + +─── playwright-cli click | developer ────────────────────────── +Clicking on "Using Skills" result (ref e156) + +─── playwright-cli snapshot | developer ─────────────────────── +Captured page after navigation to Using Skills guide + +─── text_editor | developer ─────────────────────────────────── +writing tests/search-skills-guide.spec.ts + +✅ Test Generated Successfully +Location: tests/search-skills-guide.spec.ts +``` + +The generated test might look like: + +```typescript +import { test, expect } from '@playwright/test'; + +test('search for skills guide and navigate to it', async ({ page }) => { + await page.goto('https://block.github.io/goose'); + await expect(page).toHaveTitle(/Goose/); + + // Open search + await page.getByRole('button', { name: 'Search' }).click(); + + // Search for skills guide + await page.getByRole('searchbox').fill('how to use skills'); + + // Click first result + await page.getByRole('link', { name: 'Using Skills' }).first().click(); + + // Verify navigation + await expect(page).toHaveURL(/using-skills/); + await expect(page.getByRole('heading', { level: 1 })).toContainText('Using Skills'); +}); +``` + +### Running Tests + +After generating a test, run it immediately: + +``` +Run the test to verify it works +``` + +Or run manually: + +```bash +npx playwright test +``` + +## Recording Videos and Traces + +For debugging or documentation, ask goose to record the session: + +``` +Create a video and trace for the actions we just performed +``` + +### Video Recording + +Videos are saved to `.playwright-cli/videos/` and are useful for: +- Debugging test failures +- Verifying agent behavior +- Including in pull requests +- Creating demos + +### Viewing Traces + +Playwright traces provide a detailed timeline of everything that happened. To view a trace: + +``` +Open the trace in the trace viewer +``` + +The trace viewer shows: +- Timeline of all actions +- Screenshots before/after each action +- Console logs and errors +- Network requests +- Element locators used + +## Full Capabilities + +Ask goose what else it can do: + +``` +Playwright CLI, what else can you do? +``` + +| Category | Capabilities | +|----------|-------------| +| **Browser Control** | open, goto, click, fill, close | +| **Capture & Debug** | screenshot, snapshot, video, trace | +| **Tab Management** | Open, switch, close tabs | +| **Storage & Auth** | Save/restore cookies, handle login states | +| **Network** | Mock APIs, intercept requests | +| **Input** | Type text, press keys, mouse actions | + +### Example Use Cases + +- ✅ Test web applications with natural language +- ✅ Fill out forms automatically +- ✅ Scrape data from websites +- ✅ Debug issues with video recordings +- ✅ Test authentication flows +- ✅ Record demos for documentation +- ✅ Mock APIs for isolated testing + +## Tips and Best Practices + +1. **Start simple** - Begin with basic navigation and screenshots before complex test generation +2. **Use headed mode for debugging** - Add `--headed` when you need to see what's happening +3. **Review generated tests** - Always review and refine the generated test code +4. **Leverage traces** - Use traces to understand exactly what the agent did +5. **Iterate quickly** - Run tests immediately after generation to catch issues early + +## Resources + +- [Playwright Documentation](https://playwright.dev) +- [Playwright CLI GitHub](https://github.com/microsoft/playwright-cli) +- [Using Skills Guide](/docs/guides/context-engineering/using-skills) - Learn how to create and use skills with goose +- [Skills Extension Documentation](/docs/mcp/skills-mcp) From abe2cdd3e16ebf17878a43a0d6b483a33f782175 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 17:03:40 +0100 Subject: [PATCH 02/20] Update tutorial to use navigation instead of search --- .../docs/tutorials/playwright-skills.md | 57 ++++++++----------- 1 file changed, 25 insertions(+), 32 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index e88a3c557c95..bfc9e034d4f3 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -132,8 +132,8 @@ Open block.github.io/goose in a headed browser Describe what you want to test in plain English: ``` -Search for a guide on how to use skills, click on the first result, -then create a test based on your interactions +Open block.github.io/goose in the browser, navigate to the Using Skills guide +via the Docs menu, then create a test based on your interactions ``` ### goose Output @@ -146,28 +146,31 @@ name: playwright-cli Opening browser and navigating to block.github.io/goose ─── playwright-cli snapshot | developer ─────────────────────── -Captured page structure, found search button at ref e89 +Captured page structure, found Docs link at ref e11 ─── playwright-cli click | developer ────────────────────────── -Clicking on search button (ref e89) +Clicking on "Docs" in navigation -─── playwright-cli fill | developer ──────────────────────────── -Filling search box with "how to use skills" +─── playwright-cli snapshot | developer ─────────────────────── +Captured Guides page, found Context Engineering category + +─── playwright-cli click | developer ────────────────────────── +Expanding "Context Engineering" sidebar category ─── playwright-cli snapshot | developer ─────────────────────── -Found search results, first result at ref e156 +Found "Using Skills" link at ref e596 ─── playwright-cli click | developer ────────────────────────── -Clicking on "Using Skills" result (ref e156) +Clicking on "Using Skills" ─── playwright-cli snapshot | developer ─────────────────────── Captured page after navigation to Using Skills guide ─── text_editor | developer ─────────────────────────────────── -writing tests/search-skills-guide.spec.ts +writing tests/using-skills-navigation.spec.ts ✅ Test Generated Successfully -Location: tests/search-skills-guide.spec.ts +Location: tests/using-skills-navigation.spec.ts ``` The generated test might look like: @@ -175,18 +178,18 @@ The generated test might look like: ```typescript import { test, expect } from '@playwright/test'; -test('search for skills guide and navigate to it', async ({ page }) => { +test('navigate to Using Skills guide via docs menu', async ({ page }) => { await page.goto('https://block.github.io/goose'); - await expect(page).toHaveTitle(/Goose/); + await expect(page).toHaveTitle(/goose/); - // Open search - await page.getByRole('button', { name: 'Search' }).click(); + // Click on Docs in the navigation + await page.getByRole('link', { name: 'Docs' }).click(); - // Search for skills guide - await page.getByRole('searchbox').fill('how to use skills'); + // Expand Context Engineering category + await page.getByRole('button', { name: 'Expand sidebar category \'Context Engineering\'' }).click(); - // Click first result - await page.getByRole('link', { name: 'Using Skills' }).first().click(); + // Click on Using Skills + await page.getByRole('link', { name: 'Using Skills' }).click(); // Verify navigation await expect(page).toHaveURL(/using-skills/); @@ -196,17 +199,7 @@ test('search for skills guide and navigate to it', async ({ page }) => { ### Running Tests -After generating a test, run it immediately: - -``` -Run the test to verify it works -``` - -Or run manually: - -```bash -npx playwright test -``` +Goose will automatically ask you if you want it to run the test and if you have Playwright already set up it will go ahead and run the test for you. However if you don't have Playwright setup, no worries, goose can go ahead and install it for you and then run the test. ## Recording Videos and Traces @@ -229,7 +222,7 @@ Videos are saved to `.playwright-cli/videos/` and are useful for: Playwright traces provide a detailed timeline of everything that happened. To view a trace: ``` -Open the trace in the trace viewer +Open the trace ``` The trace viewer shows: @@ -241,10 +234,10 @@ The trace viewer shows: ## Full Capabilities -Ask goose what else it can do: +If you want to know what else you can do with the PLaywright skills, simply ask goose: ``` -Playwright CLI, what else can you do? +What else can you do with playwright skills ``` | Category | Capabilities | From b5767026687f1251159f72b918024a4ff80a71f9 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 17:14:59 +0100 Subject: [PATCH 03/20] Update example prompt to include full navigation flow --- documentation/docs/tutorials/playwright-skills.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index bfc9e034d4f3..b38b990d4b8b 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -132,8 +132,8 @@ Open block.github.io/goose in a headed browser Describe what you want to test in plain English: ``` -Open block.github.io/goose in the browser, navigate to the Using Skills guide -via the Docs menu, then create a test based on your interactions +Open block.github.io/goose, click on the Docs menu, click on Context Engineering, +then click on Using Skills and create a test based on your interactions ``` ### goose Output From af975ce8a4da8e88f47c0a15be60e72d15f66959 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 17:22:19 +0100 Subject: [PATCH 04/20] Add detailed explanation of how test generation works --- .../docs/tutorials/playwright-skills.md | 127 ++++++------------ 1 file changed, 43 insertions(+), 84 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index b38b990d4b8b..1198cc430972 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -9,9 +9,9 @@ import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; -goose can automate browsers and generate Playwright tests using [Playwright CLI](https://github.com/microsoft/playwright-cli). By loading Playwright CLI Skills, goose gains the ability to navigate websites, interact with elements, take screenshots, record videos, and generate test code all from natural language instructions whilst also saving on tokens compared to when using the Playwright MCP. +goose can automate browsers and generate Playwright tests using [Playwright CLI](https://github.com/microsoft/playwright-cli). By loading Playwright CLI Skills, goose gains the ability to navigate websites, interact with elements, take screenshots, record videos, and generate test code—all from natural language instructions while saving on tokens compared to using the Playwright MCP. -### Prerequisites +## Prerequisites - [Node.js](https://nodejs.org/) 18 or later - A project with [Playwright](https://playwright.dev/) installed (`npm init playwright@latest`) @@ -92,7 +92,7 @@ These reference files teach goose how to: ## How It Works: Token Efficiency -Unlike with the Playwright MCP whcih puts the entire page structure into the LLM context, Playwright CLI saves the accessibility tree locally as YAML files. This means: +Unlike the Playwright MCP which puts the entire page structure into the LLM context, Playwright CLI saves the accessibility tree locally as YAML files. This means: - ✅ Faster responses - ✅ Lower token usage @@ -101,77 +101,45 @@ Unlike with the Playwright MCP whcih puts the entire page structure into the LLM When goose takes a snapshot, it saves a YAML file containing element references (refs) that it uses to find and interact with elements on the page. -## Example Usage +## Generate a Test with Video and Traces -### Opening a Browser and Taking Screenshots - -Ask goose to open a website: - -``` -Open block.github.io/goose in the browser -``` - -goose will navigate to the site and report the browser session is active. You can then: - -``` -Take a screenshot -``` - -The screenshot is saved to `.playwright-cli/` in your project. - -:::tip Headed Mode -By default, the browser runs headless (no visible window). If you want to watch the automation, use: -``` -Open block.github.io/goose in a headed browser -``` - -::: - -### Generating Tests with Natural Language - -Describe what you want to test in plain English: +Give goose a single prompt that describes what you want to test: ``` Open block.github.io/goose, click on the Docs menu, click on Context Engineering, -then click on Using Skills and create a test based on your interactions -``` - -### goose Output - +then click on Using Skills and generate a test with video and traces ``` -─── load_skill | skills ─────────────────────────────────────── -name: playwright-cli - -─── playwright-cli open | developer ─────────────────────────── -Opening browser and navigating to block.github.io/goose -─── playwright-cli snapshot | developer ─────────────────────── -Captured page structure, found Docs link at ref e11 +### How It Works -─── playwright-cli click | developer ────────────────────────── -Clicking on "Docs" in navigation +Each `playwright-cli` command automatically outputs the corresponding Playwright code. For example: -─── playwright-cli snapshot | developer ─────────────────────── -Captured Guides page, found Context Engineering category +```bash +playwright-cli click e11 +# Ran Playwright code: +# await page.getByRole('link', { name: 'Docs' }).click(); +``` -─── playwright-cli click | developer ────────────────────────── -Expanding "Context Engineering" sidebar category +goose collects these code snippets as it performs actions and assembles them into a complete test file. -─── playwright-cli snapshot | developer ─────────────────────── -Found "Using Skills" link at ref e596 +### What goose Does -─── playwright-cli click | developer ────────────────────────── -Clicking on "Using Skills" +1. Opens the browser: `playwright-cli open block.github.io/goose` +2. Starts recording: `playwright-cli video-start` and `playwright-cli tracing-start` +3. Takes snapshots to find elements: `playwright-cli snapshot` +4. Performs clicks: `playwright-cli click ` +5. Stops recording: `playwright-cli video-stop` and `playwright-cli tracing-stop` +6. Assembles the generated code into a test file -─── playwright-cli snapshot | developer ─────────────────────── -Captured page after navigation to Using Skills guide +### Generated Files -─── text_editor | developer ─────────────────────────────────── -writing tests/using-skills-navigation.spec.ts +| File | Description | +|------|-------------| +| `tests/using-skills-navigation.spec.ts` | Your Playwright test | +| `.playwright-cli/video-*.webm` | Video recording of the session | +| `.playwright-cli/traces/*.trace` | Trace file for debugging | -✅ Test Generated Successfully -Location: tests/using-skills-navigation.spec.ts -``` +### Generated Test Code The generated test might look like: @@ -197,29 +165,13 @@ test('navigate to Using Skills guide via docs menu', async ({ page }) => { }); ``` -### Running Tests +### Running the Test -Goose will automatically ask you if you want it to run the test and if you have Playwright already set up it will go ahead and run the test for you. However if you don't have Playwright setup, no worries, goose can go ahead and install it for you and then run the test. +goose will ask if you want to run the test. If Playwright is already set up, it runs immediately. If not, goose can install Playwright for you first. -## Recording Videos and Traces +### Viewing the Trace -For debugging or documentation, ask goose to record the session: - -``` -Create a video and trace for the actions we just performed -``` - -### Video Recording - -Videos are saved to `.playwright-cli/videos/` and are useful for: -- Debugging test failures -- Verifying agent behavior -- Including in pull requests -- Creating demos - -### Viewing Traces - -Playwright traces provide a detailed timeline of everything that happened. To view a trace: +To debug or review what happened, ask goose: ``` Open the trace @@ -232,12 +184,19 @@ The trace viewer shows: - Network requests - Element locators used +:::tip Headed Mode +By default, the browser runs headless (no visible window). If you want to watch the automation in real-time: +``` +Open block.github.io/goose in a headed browser +``` +::: + ## Full Capabilities -If you want to know what else you can do with the PLaywright skills, simply ask goose: +Want to know what else you can do? Ask goose: ``` -What else can you do with playwright skills +What else can you do with playwright skills? ``` | Category | Capabilities | @@ -261,8 +220,8 @@ What else can you do with playwright skills ## Tips and Best Practices -1. **Start simple** - Begin with basic navigation and screenshots before complex test generation -2. **Use headed mode for debugging** - Add `--headed` when you need to see what's happening +1. **Start simple** - Begin with basic navigation before complex test generation +2. **Use headed mode for debugging** - Watch what's happening in real-time 3. **Review generated tests** - Always review and refine the generated test code 4. **Leverage traces** - Use traces to understand exactly what the agent did 5. **Iterate quickly** - Run tests immediately after generation to catch issues early From e27e4afd70a0f60cbfb60fca4be81c46ccbd7312 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 17:31:04 +0100 Subject: [PATCH 05/20] Fix prerequisites and add monitoring capability from official docs --- documentation/docs/tutorials/playwright-skills.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 1198cc430972..87039e96a2d0 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -14,11 +14,11 @@ goose can automate browsers and generate Playwright tests using [Playwright CLI] ## Prerequisites - [Node.js](https://nodejs.org/) 18 or later -- A project with [Playwright](https://playwright.dev/) installed (`npm init playwright@latest`) - Install Playwright CLI globally: ```bash npm install -g @playwright/cli@latest ``` +- (Optional) [Playwright](https://playwright.dev/) installed if you want to run the generated tests (`npm init playwright@latest`) ## Configuration @@ -207,6 +207,7 @@ What else can you do with playwright skills? | **Storage & Auth** | Save/restore cookies, handle login states | | **Network** | Mock APIs, intercept requests | | **Input** | Type text, press keys, mouse actions | +| **Monitoring** | show (visual dashboard to observe all sessions) | ### Example Use Cases From b95cf206684bfb7ffa0bd999f2113c001038f201 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 17:42:58 +0100 Subject: [PATCH 06/20] Add visual dashboard tip for show command --- documentation/docs/tutorials/playwright-skills.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 87039e96a2d0..35265ddaa671 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -207,7 +207,10 @@ What else can you do with playwright skills? | **Storage & Auth** | Save/restore cookies, handle login states | | **Network** | Mock APIs, intercept requests | | **Input** | Type text, press keys, mouse actions | -| **Monitoring** | show (visual dashboard to observe all sessions) | + +:::tip Visual Dashboard +Use `playwright-cli show` to open a visual dashboard that displays all running browser sessions with live screencast previews. This is useful when you want to observe what goose is doing in the background or take over control manually. +::: ### Example Use Cases From 8ea632b42e6b45197d13e5952b226ce0f3629991 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 19:50:42 +0100 Subject: [PATCH 07/20] Replace show command tip with headed mode tip (show not yet available in v0.1.0) --- documentation/docs/tutorials/playwright-skills.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 35265ddaa671..60de495d2d5a 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -208,8 +208,11 @@ What else can you do with playwright skills? | **Network** | Mock APIs, intercept requests | | **Input** | Type text, press keys, mouse actions | -:::tip Visual Dashboard -Use `playwright-cli show` to open a visual dashboard that displays all running browser sessions with live screencast previews. This is useful when you want to observe what goose is doing in the background or take over control manually. +:::tip Headed Mode for Debugging +Use `--headed` flag when opening a browser to watch what's happening in real-time: +``` +Open block.github.io/goose --headed +``` ::: ### Example Use Cases From a0ce93478d121d6f337b0762b452faf3cf854895 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 20:46:23 +0100 Subject: [PATCH 08/20] Add Visual Dashboard section for monitoring multiple sessions --- .../docs/tutorials/playwright-skills.md | 52 ++++++++++++------- 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 60de495d2d5a..d40d4bb8f042 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -120,8 +120,6 @@ playwright-cli click e11 # await page.getByRole('link', { name: 'Docs' }).click(); ``` -goose collects these code snippets as it performs actions and assembles them into a complete test file. - ### What goose Does 1. Opens the browser: `playwright-cli open block.github.io/goose` @@ -167,7 +165,17 @@ test('navigate to Using Skills guide via docs menu', async ({ page }) => { ### Running the Test -goose will ask if you want to run the test. If Playwright is already set up, it runs immediately. If not, goose can install Playwright for you first. +goose can even run the test for you to make sure it works as expected. If Playwright is already set up, just ask it to run the test. If not, goose can install Playwright for you and then run the test. + +## Viewing the Video + +To see a video of what happened, ask goose: + +``` +Show me the video +``` + +Goose will open the recorded video so you can see exactly what happened during the session. ### Viewing the Trace @@ -184,16 +192,30 @@ The trace viewer shows: - Network requests - Element locators used -:::tip Headed Mode -By default, the browser runs headless (no visible window). If you want to watch the automation in real-time: -``` -Open block.github.io/goose in a headed browser + + +## Visual Dashboard for Multiple Sessions + +If you're running multiple agent tasks with browser automation in the background, you can use the visual dashboard to monitor and control all running sessions from one place. This is especially useful when you want to observe what your agents are doing or step in to help when needed. + +```bash +playwright-cli show ``` + +The dashboard opens a window with two views: + +- **Session grid** — Shows all active sessions grouped by workspace, each with a live screencast preview, session name, current URL, and page title. Click any session to zoom in. +- **Session detail** — Shows a live view of the selected session with navigation controls (back, forward, reload, address bar) and full remote control. Click into the viewport to take over mouse and keyboard input; press **Escape** to release control back to the agent. + +From the grid you can also close running sessions or delete data for inactive ones. This makes it easy to manage multiple parallel browser automations without losing track of what's happening. + +:::note +The `show` command requires playwright-cli version 0.2.0 or later. ::: ## Full Capabilities -Want to know what else you can do? Ask goose: +Want to know what else the Playwright skills can do? Ask goose: ``` What else can you do with playwright skills? @@ -208,12 +230,6 @@ What else can you do with playwright skills? | **Network** | Mock APIs, intercept requests | | **Input** | Type text, press keys, mouse actions | -:::tip Headed Mode for Debugging -Use `--headed` flag when opening a browser to watch what's happening in real-time: -``` -Open block.github.io/goose --headed -``` -::: ### Example Use Cases @@ -225,13 +241,9 @@ Open block.github.io/goose --headed - ✅ Record demos for documentation - ✅ Mock APIs for isolated testing -## Tips and Best Practices +## Conclusion -1. **Start simple** - Begin with basic navigation before complex test generation -2. **Use headed mode for debugging** - Watch what's happening in real-time -3. **Review generated tests** - Always review and refine the generated test code -4. **Leverage traces** - Use traces to understand exactly what the agent did -5. **Iterate quickly** - Run tests immediately after generation to catch issues early +Getting started with Playwright skills is easy and opens up powerful browser automation capabilities directly from natural language prompts. Whether you're generating tests, debugging with videos and traces, or automating complex interactions, the Playwright CLI skills provide a token-efficient way to leverage Playwright's full power with goose. ## Resources From 6858c36cc2c75f906287fb6fe2c204bd347fd8d2 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 20:52:57 +0100 Subject: [PATCH 09/20] Rewrite Visual Dashboard section in our own words --- documentation/docs/tutorials/playwright-skills.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index d40d4bb8f042..2bc2605460bb 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -196,18 +196,18 @@ The trace viewer shows: ## Visual Dashboard for Multiple Sessions -If you're running multiple agent tasks with browser automation in the background, you can use the visual dashboard to monitor and control all running sessions from one place. This is especially useful when you want to observe what your agents are doing or step in to help when needed. +When you have goose running several browser tasks at once, it can be hard to keep track of what's happening. The visual dashboard gives you a bird's-eye view of all your active browser sessions, letting you watch progress in real-time or jump in and take control when needed. ```bash playwright-cli show ``` -The dashboard opens a window with two views: +The dashboard provides two ways to interact with your sessions: -- **Session grid** — Shows all active sessions grouped by workspace, each with a live screencast preview, session name, current URL, and page title. Click any session to zoom in. -- **Session detail** — Shows a live view of the selected session with navigation controls (back, forward, reload, address bar) and full remote control. Click into the viewport to take over mouse and keyboard input; press **Escape** to release control back to the agent. +- **Session grid** — See all your running browsers at a glance with live previews. Each tile shows the workspace, current URL, and page title. Click any session to focus on it. +- **Session detail** — Get a full-size view of a single session with browser controls (back, forward, reload). You can take over the mouse and keyboard by clicking in the browser window—press **Escape** when you want to hand control back to goose. -From the grid you can also close running sessions or delete data for inactive ones. This makes it easy to manage multiple parallel browser automations without losing track of what's happening. +You can also close sessions or clear saved data directly from the dashboard, making it simple to manage everything without switching between windows. :::note The `show` command requires playwright-cli version 0.2.0 or later. From 218731c79e3e4b81359906b3f55a1498684cb5f3 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 20:55:01 +0100 Subject: [PATCH 10/20] Simplify Visual Dashboard description to be more conversational --- documentation/docs/tutorials/playwright-skills.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 2bc2605460bb..dd544228181f 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -202,12 +202,7 @@ When you have goose running several browser tasks at once, it can be hard to kee playwright-cli show ``` -The dashboard provides two ways to interact with your sessions: - -- **Session grid** — See all your running browsers at a glance with live previews. Each tile shows the workspace, current URL, and page title. Click any session to focus on it. -- **Session detail** — Get a full-size view of a single session with browser controls (back, forward, reload). You can take over the mouse and keyboard by clicking in the browser window—press **Escape** when you want to hand control back to goose. - -You can also close sessions or clear saved data directly from the dashboard, making it simple to manage everything without switching between windows. +From here you can see live previews of every browser goose is controlling. Click into any session to watch it full-size, or take over the mouse and keyboard yourself if goose needs a hand. Press **Escape** when you're done and goose picks up right where you left off. :::note The `show` command requires playwright-cli version 0.2.0 or later. From fd7c0243a82f678099ec34f6957cea18ec38d67e Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 20:56:35 +0100 Subject: [PATCH 11/20] Fix capitalization and remove extra blank lines --- documentation/docs/tutorials/playwright-skills.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index dd544228181f..f5f64605c62b 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -175,7 +175,7 @@ To see a video of what happened, ask goose: Show me the video ``` -Goose will open the recorded video so you can see exactly what happened during the session. +goose will open the recorded video so you can see exactly what happened during the session. ### Viewing the Trace @@ -192,8 +192,6 @@ The trace viewer shows: - Network requests - Element locators used - - ## Visual Dashboard for Multiple Sessions When you have goose running several browser tasks at once, it can be hard to keep track of what's happening. The visual dashboard gives you a bird's-eye view of all your active browser sessions, letting you watch progress in real-time or jump in and take control when needed. @@ -204,10 +202,6 @@ playwright-cli show From here you can see live previews of every browser goose is controlling. Click into any session to watch it full-size, or take over the mouse and keyboard yourself if goose needs a hand. Press **Escape** when you're done and goose picks up right where you left off. -:::note -The `show` command requires playwright-cli version 0.2.0 or later. -::: - ## Full Capabilities Want to know what else the Playwright skills can do? Ask goose: @@ -225,7 +219,6 @@ What else can you do with playwright skills? | **Network** | Mock APIs, intercept requests | | **Input** | Type text, press keys, mouse actions | - ### Example Use Cases - ✅ Test web applications with natural language From 23bba2f7a5e9d368af36e86e544e8d2c9b974bf7 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 20:58:17 +0100 Subject: [PATCH 12/20] Convert token efficiency section to a paragraph --- documentation/docs/tutorials/playwright-skills.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index f5f64605c62b..578416e63104 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -92,14 +92,7 @@ These reference files teach goose how to: ## How It Works: Token Efficiency -Unlike the Playwright MCP which puts the entire page structure into the LLM context, Playwright CLI saves the accessibility tree locally as YAML files. This means: - -- ✅ Faster responses -- ✅ Lower token usage -- ✅ More cost effective -- ✅ Handles large pages without issues - -When goose takes a snapshot, it saves a YAML file containing element references (refs) that it uses to find and interact with elements on the page. +The Playwright MCP sends the entire page structure to the LLM with every request, which can get expensive fast—especially on large pages. Playwright CLI takes a smarter approach: it saves the accessibility tree locally as YAML files, so goose only needs to reference element IDs instead of processing the whole page. This means faster responses, lower token usage, and no trouble with complex pages. ## Generate a Test with Video and Traces From ab5d6ba9ba4e4f6b21aa021b75643bfbd695fef4 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 21:01:37 +0100 Subject: [PATCH 13/20] Simplify intro paragraph and remove duplicate section --- .../docs/tutorials/playwright-skills.md | 33 +------------------ 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 578416e63104..d7c6c2b4052f 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -9,7 +9,7 @@ import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; -goose can automate browsers and generate Playwright tests using [Playwright CLI](https://github.com/microsoft/playwright-cli). By loading Playwright CLI Skills, goose gains the ability to navigate websites, interact with elements, take screenshots, record videos, and generate test code—all from natural language instructions while saving on tokens compared to using the Playwright MCP. +With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests—all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. ## Prerequisites @@ -62,37 +62,6 @@ Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load -## Understanding the Skills Structure - -After installing skills, your project will have: - -``` -.claude/ -└── skills/ - └── playwright-cli/ - ├── SKILL.md - └── references/ - ├── request-mocking.md - ├── running-code.md - ├── session-management.md - ├── storage-state.md - ├── test-generation.md - ├── tracing.md - └── video-recording.md -``` - -These reference files teach goose how to: -- **Mock requests** - Intercept, mock, modify, and block network requests -- **Run code** - Execute Playwright code for advanced scenarios -- **Manage sessions** - Handle browser sessions and state -- **Store state** - Manage authentication and cookies -- **Generate tests** - Create Playwright TypeScript code from actions -- **Record traces** - Capture detailed traces of browser interactions -- **Record videos** - Save browser sessions as video for debugging - -## How It Works: Token Efficiency - -The Playwright MCP sends the entire page structure to the LLM with every request, which can get expensive fast—especially on large pages. Playwright CLI takes a smarter approach: it saves the accessibility tree locally as YAML files, so goose only needs to reference element IDs instead of processing the whole page. This means faster responses, lower token usage, and no trouble with complex pages. ## Generate a Test with Video and Traces From 2be07f82166d904c2ff1b2547a5d4cd6f2157491 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Mon, 16 Feb 2026 22:08:19 +0100 Subject: [PATCH 14/20] Update documentation/docs/tutorials/playwright-skills.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- documentation/docs/tutorials/playwright-skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index d7c6c2b4052f..8cd1535ba3a0 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -139,7 +139,7 @@ Show me the video goose will open the recorded video so you can see exactly what happened during the session. -### Viewing the Trace +## Viewing the Trace To debug or review what happened, ask goose: From 8d4384ed11e7872c8bf455019ba4184472032c9b Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 22:18:21 +0100 Subject: [PATCH 15/20] fix: align YouTube embed with tutorial pattern for responsive layout and JSX attributes --- .../docs/tutorials/playwright-skills.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 8cd1535ba3a0..c23339441476 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -1,15 +1,23 @@ --- title: Agentic Testing with Playwright Skills -description: Use goose with Playwright CLI skills to automate browsers and generate tests using natural language +description: Use goose with Playwright CLI agent skills to automate browsers and generate tests using natural language --- import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; - + -With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests—all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. +With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests, all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. ## Prerequisites @@ -25,7 +33,7 @@ With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose First, install the Playwright skills in your project directory: ```bash -playwright-cli install --skills +install playwright skills ``` This creates a `.claude/` folder with skills and reference files that teach goose how to use Playwright CLI capabilities. From 2ac424599e32430c1a62e417f3e5a5769494e963 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 22:27:22 +0100 Subject: [PATCH 16/20] fix: correct terminology for Playwright skills and improve clarity in documentation --- .../docs/tutorials/playwright-skills.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index c23339441476..11272add60cf 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -1,6 +1,6 @@ --- title: Agentic Testing with Playwright Skills -description: Use goose with Playwright CLI agent skills to automate browsers and generate tests using natural language +description: Use goose with the Playwright CLI agent skill to automate browsers and generate tests using natural language --- import Tabs from '@theme/Tabs'; @@ -17,7 +17,7 @@ import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; allowFullScreen > -With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests, all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. +With the [Playwright CLI](https://github.com/microsoft/playwright-cli) skill, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests, all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. ## Prerequisites @@ -30,13 +30,13 @@ With [Playwright CLI](https://github.com/microsoft/playwright-cli) skills, goose ## Configuration -First, install the Playwright skills in your project directory: +First, install the Playwright skill in your project directory: ```bash -install playwright skills +install playwright skill ``` -This creates a `.claude/` folder with skills and reference files that teach goose how to use Playwright CLI capabilities. +This creates a `.claude/` folder with SKILL.md file and reference files that teach goose how to use the Playwright CLI capabilities. Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load and use Agent Skills. @@ -174,10 +174,10 @@ From here you can see live previews of every browser goose is controlling. Click ## Full Capabilities -Want to know what else the Playwright skills can do? Ask goose: +Want to know what else the Playwright skill can do? Ask goose: ``` -What else can you do with playwright skills? +What else can you do with the Playwright skill? ``` | Category | Capabilities | @@ -201,7 +201,7 @@ What else can you do with playwright skills? ## Conclusion -Getting started with Playwright skills is easy and opens up powerful browser automation capabilities directly from natural language prompts. Whether you're generating tests, debugging with videos and traces, or automating complex interactions, the Playwright CLI skills provide a token-efficient way to leverage Playwright's full power with goose. +Getting started with the Playwright CLI agent skill is easy and opens up powerful browser automation capabilities directly from natural language prompts. Whether you're generating tests, debugging with videos and traces, or automating complex interactions, the Playwright CLI agent skill provides a token-efficient way to leverage Playwright's full power with goose. ## Resources From 3618a4cf2fa422f33a66b9414f40849f81858711 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 22:35:37 +0100 Subject: [PATCH 17/20] fix: update installation command and correct folder name for Playwright skill setup --- documentation/docs/tutorials/playwright-skills.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index 11272add60cf..eb1ffd90633c 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -33,10 +33,10 @@ With the [Playwright CLI](https://github.com/microsoft/playwright-cli) skill, go First, install the Playwright skill in your project directory: ```bash -install playwright skill +npx skills add https://github.com/microsoft/playwright-cli --skill playwright-cli ``` -This creates a `.claude/` folder with SKILL.md file and reference files that teach goose how to use the Playwright CLI capabilities. +This creates a `.agents/` folder with a SKILL.md file and reference files that teach goose how to use the Playwright CLI capabilities. Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load and use Agent Skills. From 12b199aa4e25774f95f9acf4d3179e8eb7267944 Mon Sep 17 00:00:00 2001 From: debs-obrien Date: Mon, 16 Feb 2026 22:58:07 +0100 Subject: [PATCH 18/20] fix: correct title and improve resource list for Playwright skill documentation --- documentation/docs/tutorials/playwright-skills.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skills.md index eb1ffd90633c..0ebb72d5b4c6 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skills.md @@ -1,5 +1,5 @@ --- -title: Agentic Testing with Playwright Skills +title: Agentic Testing with Playwright Skill description: Use goose with the Playwright CLI agent skill to automate browsers and generate tests using natural language --- @@ -167,7 +167,7 @@ The trace viewer shows: When you have goose running several browser tasks at once, it can be hard to keep track of what's happening. The visual dashboard gives you a bird's-eye view of all your active browser sessions, letting you watch progress in real-time or jump in and take control when needed. ```bash -playwright-cli show +show playwright dashboard ``` From here you can see live previews of every browser goose is controlling. Click into any session to watch it full-size, or take over the mouse and keyboard yourself if goose needs a hand. Press **Escape** when you're done and goose picks up right where you left off. @@ -205,7 +205,6 @@ Getting started with the Playwright CLI agent skill is easy and opens up powerfu ## Resources -- [Playwright Documentation](https://playwright.dev) -- [Playwright CLI GitHub](https://github.com/microsoft/playwright-cli) -- [Using Skills Guide](/docs/guides/context-engineering/using-skills) - Learn how to create and use skills with goose - [Skills Extension Documentation](/docs/mcp/skills-mcp) +- [Using Skills Guide](/docs/guides/context-engineering/using-skills) - Learn how to create and use skills with goose +- [Playwright CLI GitHub](https://github.com/microsoft/playwright-cli) From aab02411dbc4f7e7d3e4f952679e266117c41ac6 Mon Sep 17 00:00:00 2001 From: angiejones Date: Mon, 16 Feb 2026 23:04:10 -0600 Subject: [PATCH 19/20] cleaning up --- ...aywright-skills.md => playwright-skill.md} | 55 +++++++++++++------ 1 file changed, 37 insertions(+), 18 deletions(-) rename documentation/docs/tutorials/{playwright-skills.md => playwright-skill.md} (71%) diff --git a/documentation/docs/tutorials/playwright-skills.md b/documentation/docs/tutorials/playwright-skill.md similarity index 71% rename from documentation/docs/tutorials/playwright-skills.md rename to documentation/docs/tutorials/playwright-skill.md index 0ebb72d5b4c6..1d80f8658d48 100644 --- a/documentation/docs/tutorials/playwright-skills.md +++ b/documentation/docs/tutorials/playwright-skill.md @@ -1,6 +1,6 @@ --- -title: Agentic Testing with Playwright Skill -description: Use goose with the Playwright CLI agent skill to automate browsers and generate tests using natural language +title: Agentic Testing with Playwright CLI Skill +description: Use goose with the Playwright CLI to generate automated tests using natural language --- import Tabs from '@theme/Tabs'; @@ -17,7 +17,11 @@ import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller'; allowFullScreen > -With the [Playwright CLI](https://github.com/microsoft/playwright-cli) skill, goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests, all from plain English. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. +With the [Playwright CLI](https://github.com/microsoft/playwright-cli), goose can navigate websites, click buttons, fill forms, and turn those interactions into Playwright tests, all from natural language. Unlike the Playwright MCP, which sends the full page structure to the LLM on every request, Playwright CLI stores the accessibility tree locally. That means faster responses, lower costs, and no issues with large pages. + +## Why as a Skill? + +LLMs may not be trained on Playwright's CLI, so when asking an agent to use it, it may hallucinate commands and arguments resulting in errors and wasted tokens. The [Playwright CLI Skill](https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md) teaches goose how to use the CLI and when to invoke specific commands. ## Prerequisites @@ -30,15 +34,26 @@ With the [Playwright CLI](https://github.com/microsoft/playwright-cli) skill, go ## Configuration -First, install the Playwright skill in your project directory: +### Install Skill + +1. From the command line, install the Playwright skill in your project directory: ```bash npx skills add https://github.com/microsoft/playwright-cli --skill playwright-cli ``` -This creates a `.agents/` folder with a SKILL.md file and reference files that teach goose how to use the Playwright CLI capabilities. +2. Enter `y` when asked to install the skills package + +3. Choose `goose` when asked which agent to install to + +4. Choose `Global` scope to be able to use the skill in any project, or `Local` to only have access within the current working directory + +5. Choose `Symlink` to have one copy that all of your agents can reference -Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load and use Agent Skills. +6. You'll get a confirmation of the installation, choose `Yes` to proceed + +### Enable Skills Extension +In goose, enable the [Skills extension](/docs/mcp/skills-mcp) to load Agent Skills within sessions. @@ -76,21 +91,25 @@ Then, enable the [Skills extension](/docs/mcp/skills-mcp) to allow goose to load Give goose a single prompt that describes what you want to test: ``` -Open block.github.io/goose, click on the Docs menu, click on Context Engineering, +Using the Playwright CLI skill, open block.github.io/goose, click on the Docs menu, click on Context Engineering, then click on Using Skills and generate a test with video and traces ``` ### How It Works -Each `playwright-cli` command automatically outputs the corresponding Playwright code. For example: +Each `playwright-cli` command automatically outputs the corresponding Playwright code. For example, this command: ```bash playwright-cli click e11 -# Ran Playwright code: -# await page.getByRole('link', { name: 'Docs' }).click(); ``` -### What goose Does +executes the following Playwright code: + +```ts +await page.getByRole('link', { name: 'Docs' }).click(); +``` + +### What goose does 1. Opens the browser: `playwright-cli open block.github.io/goose` 2. Starts recording: `playwright-cli video-start` and `playwright-cli tracing-start` @@ -139,17 +158,17 @@ goose can even run the test for you to make sure it works as expected. If Playwr ## Viewing the Video -To see a video of what happened, ask goose: +To see a video of what happened, prompt goose: ``` Show me the video ``` -goose will open the recorded video so you can see exactly what happened during the session. +goose will use the CLI to open the recorded video, so you can see exactly what happened during the session. ## Viewing the Trace -To debug or review what happened, ask goose: +To debug or review what happened, prompt goose: ``` Open the trace @@ -164,13 +183,13 @@ The trace viewer shows: ## Visual Dashboard for Multiple Sessions -When you have goose running several browser tasks at once, it can be hard to keep track of what's happening. The visual dashboard gives you a bird's-eye view of all your active browser sessions, letting you watch progress in real-time or jump in and take control when needed. +When you have goose running several browser tasks at once, it can be hard to keep track of what's happening. The visual dashboard gives you a bird's eye view of all your active browser sessions, letting you watch progress in real time or jump in and take control when needed. -```bash -show playwright dashboard +``` +Show playwright dashboard ``` -From here you can see live previews of every browser goose is controlling. Click into any session to watch it full-size, or take over the mouse and keyboard yourself if goose needs a hand. Press **Escape** when you're done and goose picks up right where you left off. +From here you can see live previews of every browser goose is controlling. Click into any session to watch it full-size, or take over the mouse and keyboard yourself if goose needs a hand. Press `Escape` when you're done and goose picks up right where you left off. ## Full Capabilities From e35e3e1d8fbef991a9d426e90caed110e430e968 Mon Sep 17 00:00:00 2001 From: Debbie O'Brien Date: Tue, 17 Feb 2026 09:13:13 +0100 Subject: [PATCH 20/20] Update documentation/docs/tutorials/playwright-skill.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- documentation/docs/tutorials/playwright-skill.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/tutorials/playwright-skill.md b/documentation/docs/tutorials/playwright-skill.md index 1d80f8658d48..51e92d80455a 100644 --- a/documentation/docs/tutorials/playwright-skill.md +++ b/documentation/docs/tutorials/playwright-skill.md @@ -10,7 +10,7 @@ import GooseBuiltinInstaller from '@site/src/components/GooseBuiltinInstaller';