diff --git a/agents/browser-and-emulation.mdx b/agents/browser-and-emulation.mdx deleted file mode 100644 index c82b50b33ee..00000000000 --- a/agents/browser-and-emulation.mdx +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: browser-and-emulation -title: Browser Profiles and Emulation -description: Options for selecting browsers, device emulation, viewport sizes and user agents as well as session and state. ---- - -## Emulation - -You can control which browser Playwright uses and how it simulates devices and environments. -Below you'll find concise config examples you can paste into your configuration, along with guidance on when to use each option and a few troubleshooting tips. - -### Browser Selection - -Using a specific browser (example: msedge): - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--browser", - "msedge" - ] - } - } -} -``` - -#### Example Prompt browser selection - -```bash -navigate to playwright.dev and tell me what browser you are using -``` - -If prompted to "Install the browser specified in the config", choose Allow. -Playwright will download the required browser if missing, and the run will launch Microsoft Edge (msedge) instead of the default bundled Chromium. - -### Device Emulation - -Playwright comes with a [registry of device parameters](https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json) for selected desktop, tablet and mobile devices. -It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport and if it has touch enabled. -Emulating a mobile device (example: iPhone 13): - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--device", - "iPhone 13" - ] - } - } -} -``` - -#### Example Prompt device emulation - -```bash -navigate to playwright.dev and take a screenshot and save it as iphone13.png -``` - -You should now have a full page screenshot emulating an iPhone 13 device. - -### Custom Viewport - -Playwright's default viewport is 1280x720. -You can set a custom viewport size should you need to: - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--viewport-size", - "1600,720" - ] - } - } -} -``` - -#### Example Prompt viewport size - -```bash -navigate to playwright.dev and tell me what viewport size is being used -``` - -Note that if you're using a persistent profile (the default), the viewport size will be saved and reused across sessions. -If you want to return to the default viewport, you need to reset it explicitly. - -### Custom User Agent - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--user-agent", - "MyCustomUserAgent/1.0" - ] - } - } -} -``` - -### Ignore HTTPS Errors - -Only use this in development. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--ignore-https-errors" - ] - } - } -} -``` - -## Browser Profiles and State - -By default, Playwright MCP uses persistent profiles. -This means that user data, login states and cookies are preserved across sessions. -For some usecases, this is the desired behavior as it allows the agent to stay logged in to websites and maintain session data. - -In other usecases, this is not ideal because you want a clean slate every time the agent starts. -There's a few ways to control this behavior. - -### Starting a Clean Session - -Isolated mode `--isolated` starts each session with a fresh, temporary browser profile. When the browser is closed or the MCP server restarts, all cookies, localStorage, and other storage for that session are discarded. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--isolated" - ] - } - } -} -``` - -### Providing Storage State - -To pre-populate a clean session with local storage and Cookies, you can use the `--storage-state` flag to load the state from a file. See docs on [`BrowserContext.storageState()`](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state) for details on the file format. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--isolated", - "--storage-state", - "auth.json" - ] - } - } -} -``` - -### Using a Custom User Data Directory - -To control where the browser stores its profile data, you can specify a path with the `--user-data-dir` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--user-data-dir", - "path/to/user/data" - ] - } - } -} -``` - -### Connecting to an Existing Browser Session - -You can connect to a running instance of Chrome or Edge using the `--extension` flag. This allows the AI assistant to interact with websites where you're already logged in, using your existing cookies, sessions, and browser state. This requires the "Playwright MCP Bridge" browser extension to be installed. - -#### Extension Installation - -1. **Download the Extension**: Download the latest `chrome-extension.zip` from the [Playwright MCP GitHub releases page](https://github.com/microsoft/playwright-mcp/releases). -2. **Unzip the file**. -3. **Load the Extension**: - * Open your Chrome/Edge browser and navigate to `chrome://extensions/`. - * Enable "Developer mode" using the toggle in the top-right corner. - * Click "Load unpacked" and select the unzipped extension directory. - -Once the extension is installed, you can use the `--extension` flag in your configuration. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--extension" - ] - } - } -} -``` - -### Connecting to a CDP Endpoint - -For advanced use cases, you can connect to a running browser's Chrome DevTools Protocol (CDP) endpoint using the `--cdp-endpoint` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--cdp-endpoint", - "ws://127.0.0.1:9222/devtools/browser/..." - ] - } - } -} -``` - -## Using a Configuration File - -Big configurations can be hard to manage inline, so we allow you to manage them in a separate file using the `--config` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--config", - "path/to/your/config.json" - ] - } - } -} -``` - -config.json example: - -```json -{ - "browser": { - "browserName": "edge", - "isolated": true, - "launchOptions": { "headless": true }, - "contextOptions": { "viewport": { "width": 1280, "height": 720 } } - }, - "server": { "host": "0.0.0.0", "port": 8931 }, - "capabilities": ["verify", "pdf"], - "network": { "allowedOrigins": ["https://example.com"], "blockedOrigins": ["https://tracker.example"] }, - "imageResponses": "omit", - "outputDir": "./mcp-output" -} -``` - -Check the [README](https://github.com/microsoft/playwright-mcp?tab=readme-ov-file#configuration-file) for details on the configuration file format and options. - - diff --git a/agents/debugging-with-ai.mdx b/agents/debugging-with-ai.mdx deleted file mode 100644 index 81bb9171fe7..00000000000 --- a/agents/debugging-with-ai.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: debugging-with-ai -title: Debugging with AI -description: Debugging with AI using the copy prompt button and fix with AI feature in VS Code. ---- -import ProgressiveImage from '@theme/ProgressiveImage'; -import LiteYouTube from '@site/src/components/LiteYouTube'; - -# Debugging with AI - -## Overview - -Debugging is a crucial part of the test development lifecycle, but it can often be time-consuming. -Agents can help you identify and fix test failures. -This guide will show you how to leverage tools like GitHub Copilot directly within your Playwright workflow. -You'll learn how to use features like "Copy Prompt" and "Fix with AI" to instantly get suggestions and -fix failing tests from the Test Explorer, UI Mode, the HTML report, and the Trace Viewer, turning hours of debugging into minutes. - - - -## 1. Copy Prompt (Faster Test Debugging) - - - -When a test fails (in the HTML report, trace viewer, or UI mode) a **Copy prompt** button appears beside the error. It copies a pre-filled, context-rich prompt including: -- Error message & stack -- Snippet of the failing test body -- Relevant stdout / stderr (when available) - -Paste it directly into your AI chat and ask: “Suggest the minimal fix and explain why.” This eliminates manual summarizing, reducing time-to-fix. - -## 2. Fix with AI In VS Code - - -When a test fails while in VS Code (with the Playwright VS Code extension), a sparkly button appears in the Test Explorer and the editor gutter. -Click it to engage Copilot's "Fix with AI" feature. - -Copilot has access to wealth of context on the error (page snapshot, git diff, source code, error messages) and tries to provide contextual, accurate fix suggestions. -This enables one-click problem resolution. - diff --git a/agents/github-sign-in.png b/agents/github-sign-in.png deleted file mode 100644 index 939149836ba..00000000000 Binary files a/agents/github-sign-in.png and /dev/null differ diff --git a/agents/go-to-playwright-mcp.png b/agents/go-to-playwright-mcp.png deleted file mode 100644 index bde5a723503..00000000000 Binary files a/agents/go-to-playwright-mcp.png and /dev/null differ diff --git a/agents/index.mdx b/agents/index.mdx deleted file mode 100644 index 145d77b8ef6..00000000000 --- a/agents/index.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: playwright-mcp -title: "Introduction to Playwright MCP" -description: Introduction to Playwright MCP, an MCP server that gives AI agents control over a web browser using Playwright. ---- - -# Introduction - -We've all been there: repeating the same multi-step process in a browser over and over. Maybe you're filling out similar forms, checking multiple dashboards, or gathering data from different websites. These tasks are perfect for automation, but writing traditional automation scripts can be time-consuming and brittle. - -What if you could describe these tasks in plain English instead? "Fill out this contact form with our company details," or "Navigate to the GitHub issues page and check for any bugs labeled 'critical'." AI agents can now understand these instructions and translate them into browser actions. - -An **AI Agent** is powered by a large language model (LLM) that can parse your natural language instructions and figure out the steps needed to complete a task. But to actually interact with websites, the agent needs tools to control the browser. - -## Model Context Protocol (MCP) - -For an agent to interact with software, it needs a way to communicate. The **Model Context Protocol (MCP)** is that communication standard, think of it as a universal remote control for AI. It defines a common language that allows agents to understand and control different tools. - -- An **MCP Client** is the application where you interact with the agent. This could be your code editor (like VS Code with GitHub Copilot), a dedicated chat application, or a command-line interface. -- An **MCP Server** exposes a set of tools that the agent can use. It's the "hands" that carry out the agent's instructions. - -## Playwright MCP? - -The Playwright MCP is a powerful MCP server that gives an AI agent control over a web browser. It's built on top of [Playwright](https://playwright.dev), the same technology that powers our reliable testing and automation framework. - -Its key advantage is how it "sees" a web page. Instead of looking at pixels on a screen, it uses Playwright's **accessibility snapshot**. This is a structured representation of the page content, similar to what a screen reader uses. This makes it: - -- **Fast and Lightweight:** It doesn't need slow, expensive vision models to understand the page. -- **Reliable and Deterministic:** It interacts with elements based on their role and name, not their position, which is far less brittle than screenshot-based approaches. -- **LLM-Friendly:** It provides clean, structured data that language models can easily understand and act upon. - -## What Can I Use It For? - -The Playwright MCP is a versatile tool that's useful for both developers and anyone looking to automate their web-based workflows. - -- **For Development:** - - **Generate Tests:** Ask an agent to write Playwright tests for you. "Generate a test that adds an item to the shopping cart and checks out." - - **Explore Your Website:** Use the agent to navigate your website and understand its structure and propose possible test cases. - -- **For Automation:** - - **Automate Repetitive Tasks:** Fill out forms, download reports, or perform any other multi-step process on a website. - - **Data Extraction:** Extract information from web pages and summarize it. - -## Getting Started - -The quickest way to get started is to install the Playwright MCP server for your favorite MCP client. For many clients, like VS Code, this is a simple, one-click process. - -

-Install in VS Code -

- -This will create a new MCP server configuration in a JSON file in your VS Code settings. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest" - ] - } - } -} -``` - -Once installed, you can start giving the agent commands to control your browser right away. - -For more installation options and configuration details, refer to the guides on the sidebar, or see the [README](https://github.com/microsoft/playwright-mcp). - -## What's Next? - -Now that you understand the basics, dive into our other guides to see what you can build: - -- [**Guide: Generating Tests with Playwright MCP**](./playwright-mcp-generating-tests.mdx) -- [**Guide: Using Playwright MCP for Automation**](./playwright-mcp-browser-automation.mdx) diff --git a/agents/network-and-security.mdx b/agents/network-and-security.mdx deleted file mode 100644 index 42bb31935d9..00000000000 --- a/agents/network-and-security.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: network-and-security -title: Networking and Security -description: Network, proxy and security-related configuration options for Playwright MCP. ---- - -Never use Playwright or Playwright MCP to browse untrusted web content. -Playwright is not a secure sandbox, and web content can escape the browser context and execute code on your machine. - -You can configure network policies to ensure that your agent only accesses trusted content. -To learn more about session and state see [Session and State](./browser-and-emulation.mdx#browser-profiles-and-state). - -## Allowing and Blocking Origins - -You can control which domains the browser is allowed to access. Use `--allowed-origins` to whitelist specific domains and `--blocked-origins` to blacklist them. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--allowed-origins", - "https://www.good.com", - "--blocked-origins", - "https://www.bad.com" - ] - } - } -} -``` - -## Using a Proxy Server - -If you need to route traffic through a proxy, you can use the `--proxy-server` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--proxy-server", - "http://myproxy:3128" - ] - } - } -} -``` - -To bypass the proxy for certain domains, use the `--proxy-bypass` flag with a comma-separated list of domains. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--proxy-server", - "http://myproxy:3128", - "--proxy-bypass", - ".com,chromium.org" - ] - } - } -} -``` - diff --git a/agents/playwright-mcp-browser-automation.mdx b/agents/playwright-mcp-browser-automation.mdx deleted file mode 100644 index 9a01ec11565..00000000000 --- a/agents/playwright-mcp-browser-automation.mdx +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: playwright-mcp-browser-automation -title: Browser Automation -description: Playwright MCP enables AI agents to control a web browser using Playwright for tasks like navigation, clicking, and form filling. ---- - -import ProgressiveImage from '@theme/ProgressiveImage'; -import LiteYouTube from '@site/src/components/LiteYouTube'; - -Playwright MCP (Model Context Protocol) is a powerful tool that allows AI agents to automate and interact with web browsers. -It acts as a server, providing browser automation capabilities through the Playwright framework. -This enables Large Language Models (LLMs) like GPT or Claude to understand and interact with web pages using structured data from accessibility snapshots. - -With Playwright MCP, you can instruct an AI to perform tasks like browsing websites, clicking buttons, filling forms, uploading files, and much more. - - - -## Let's Get Started - -In this guide, we'll walk through a simple workflow to demonstrate how you can use Playwright MCP to automate a task on GitHub: navigating to a repository and starring it. - -If you haven't already configured your MCP client to use the Playwright MCP server, please follow [the instructions](./index.mdx#getting-started). - -### Step 1: Navigate to the Repository - -First, instruct the agent to navigate to the Playwright MCP GitHub repository. You can do this with a simple prompt. - -```bash -Go to the Playwright MCP repo -``` - -The agent will use the `browser_navigate` tool from the Playwright MCP server to open the page in a new browser window. - - - -### Step 2: Sign in to GitHub - -Once on the repository page, the agent will use the `browser_snapshot` tool from the Playwright MCP server to take a page snapshot -which is a representation of the current state of the page through the accessibility tree. - -Ask it to sign in: - -```bash -Sign in -``` - - - -The agent will use the `browser_click` tool to click the "Sign in" button. - -For security reasons, it's not recommended to share your credentials with the AI. -You can manually enter your username and password in the browser window that Playwright opened and then let the agent continue once you're signed in. - -### Step 3: Star the Repository - -After you've signed in, you can instruct the agent to star the repository. - -```bash -star the repo -``` - - - -The agent will then perform the action using the `browser_click` tool, and you'll see the repository get a new star. - -That's a quick look at the power of Playwright MCP. This technology opens up a new world of possibilities for how AI agents can interact with the web. diff --git a/agents/playwright-mcp-explore-and-test.mdx b/agents/playwright-mcp-explore-and-test.mdx deleted file mode 100644 index 75de85a5108..00000000000 --- a/agents/playwright-mcp-explore-and-test.mdx +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: playwright-mcp-explore-and-test -title: Explore and Generate Test -description: Playwright MCP can autonomously explore your web application and generate end-to-end tests automatically. ---- - -import LiteYouTube from '@site/src/components/LiteYouTube'; - -# Let AI Explore Your Site & Write Tests with Playwright MCP - -Playwright MCP in Agent Mode enables AI to explore websites autonomously, detect bugs, and generate meaningful end-to-end tests automatically. - -This powerful approach allows AI to: -- Navigate through your application like a real user -- Discover functionalities you might have missed -- Identify edge cases and potential bugs -- Generate comprehensive test suites without manual coding -- Provide detailed test execution steps for review - -While human oversight remains important, the combination of AI exploration and automated test generation provides a powerful foundation for modern web application testing. - - - -## Create a Test Generation Prompt - -Start with creating a reusable prompt file in your `.github` folder named `generate_tests.prompt.md`. By doing this you can then reuse the same prompt for different websites and scenarios. - -```markdown ---- -tools: ['playwright'] -mode: 'agent' ---- - -You are a playwright test generator. -You are given a scenario and you need to generate a playwright test for it. -DO NOT generate test code based on the scenario alone. -DO run steps one by one using the tools provided by the Playwright MCP. - -When asked to explore a website, navigate to the specified URL -and explore one key functionality of the site. -When finished, close the browser and implement a -Playwright TypeScript test that uses @playwright/test -based on message history using Playwright's best practices -including role based locators, auto retrying assertions and with no added timeouts -unless necessary as Playwright has built in retries -and autowaiting if the correct locators and assertions are used. - -Save the generated test file in the tests directory -and execute the test file, iterating until the test passes. -Include appropriate assertions to verify the expected behavior -and structure tests properly with descriptive test titles and comments. -``` - -## Exploring a Website with AI - -Once you have the [Playwright MCP installed](./index.mdx#getting-started), you can start exploring websites and generating tests. In VS Code Agent Mode, choose a model that supports MCPs and with your prompt added to context, simply type: - -``` -Explore https://debs-obrien.github.io/playwright-movies-app -``` - -The agent will then begin its autonomous exploration of your application. - -## What Happens During Exploration? - -**Initial Navigation**: -The agent starts by navigating to your specified URL and taking a page snapshot to understand what's available on the page. It can see all interactive elements and begin exploring them systematically. - -**Feature Discovery**: -The agent explores your application like a real user would, typically following the natural tab order of elements such as search functionality, navigation elements, theme toggles, login forms, and other interactive components. - -**Bug Detection**: -One of the most interesting aspects of using AI for exploration is its ability to discover edge cases you might have missed. -The agent doesn't just test one feature but explores multiple aspects of your application including homepage functionality, search features, movie details pages, theme toggling, and navigation patterns. - -## Test Generation Process - -After exploration, the agent summarizes its findings and selects key functionality to focus on for test generation. Here's what the generated test might look like: - -```typescript -import { test, expect } from '@playwright/test'; - -test.describe('Movie search', () => { - test('Search for a movie by title', async ({ page }) => { - // Navigate to the movies app - await page.goto('https://debs-obrien.github.io/playwright-movies-app'); - - // Click on the search button to activate the search input - await page.getByRole('search').click(); - - // Type 'Star Wars' into the search input and press Enter - const searchTerm = 'Star Wars'; - await page.getByRole('textbox', { name: 'Search Input' }).fill(searchTerm); - await page.getByRole('textbox', { name: 'Search Input' }).press('Enter'); - - // Verify we're on the search results page with correct title - await expect(page).toHaveTitle(`${searchTerm} - Search Results`); - - // Verify the search results heading contains the search term - await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm); - await expect(page.getByRole('heading', { name: 'search results', level: 2 })).toBeVisible(); - - // Verify that search results are displayed - await expect(page.getByRole('list', { name: 'movies' })).toBeVisible(); - - // Click on a movie from search results - const firstMovie = page.getByRole('list', { name: 'movies' }).getByRole('link').first(); - const movieTitleElement = firstMovie.getByRole('heading', { level: 2 }); - const movieTitle = await movieTitleElement.textContent() || ''; - await firstMovie.click(); - - // Verify that the movie details page is loaded with the correct title - await expect(page.getByRole('heading', { level: 1 })).toHaveText(movieTitle); - - // Verify movie details sections are present - await expect(page.getByText('The Synopsis')).toBeVisible(); - await expect(page.getByText('The Cast')).toBeVisible(); - - // Verify recommended movies section is present - await expect(page.getByRole('heading', { name: 'Recommended Movies' })).toBeVisible(); - - // Go back to search results - await page.getByRole('button', { name: 'Back' }).click(); - - // Verify we're back on the search results page - await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm); - }); -}); -``` - -The generated tests use Playwright's role-based locators (`getByRole`, `getByText`, `getByLabel`), which are more resilient and accessible than traditional CSS selectors. The tests use web-first assertions with built-in retries, making them more reliable without needing custom timeouts. The tests include multiple assertion points to verify navigation behavior, page titles and content, element visibility, and complete user interaction flows. - -After generating the test, the AI automatically fixes any linting errors and runs the test to ensure it passes. The process is highly iterative. You can refine your prompts for better results, increase the number of tests generated, direct the agent to explore specific areas of your application, and build upon generated tests with additional test cases. \ No newline at end of file diff --git a/agents/playwright-mcp-generating-tests.mdx b/agents/playwright-mcp-generating-tests.mdx deleted file mode 100644 index 6e6f72716aa..00000000000 --- a/agents/playwright-mcp-generating-tests.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: playwright-mcp-generating-tests -title: Generating Tests -description: Learn how to generate end-to-end Playwright tests using Playwright MCP with GitHub Copilot, even without access to source code. ---- - -import LiteYouTube from '@site/src/components/LiteYouTube'; - -While Copilot can generate test code based on source code, it cannot interact with live websites to understand their actual behavior. -When you only have access to a browser and no source code, traditional AI-assisted testing approaches hit a wall. -This gap becomes a major barrier for black-box testing scenarios, where testers need to validate functionality without internal knowledge of the application structure. - -Playwright MCP can help by allowing Copilot to interact with the browser and explore the website. -The agent can then capture these interactions and transform them into reusable, automated test scripts. - -This creates a powerful workflow where the agent can navigate websites, interact with UI elements via page snapshots, generate comprehensive test files, and validate functionality without requiring access to the application's source code. - - - -### Creating the Prompt File - -The foundation of effective MCP testing lies in crafting a clear, directive prompt. Create a reusable prompt file in your `.github/prompts` folder called `generate-test.prompt.md`: - -```markdown ---- -tools: ['playwright'] -mode: 'agent' ---- - -You are a playwright test generator. -You are given a scenario and you need to generate a playwright test for it. -DO NOT generate test code based on the scenario alone. -DO run steps one by one using the tools provided by the Playwright MCP. -Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test. -Save generated test file in the tests directory. -Execute the test file and iterate until the test passes. -``` - -### Configuring the MCP Server - -Ensure you have the [Playwright MCP server installed](./index.mdx#getting-started) and running locally. The server acts as the intermediary that allows Copilot to control browser instances and capture interaction data. - -### Initiating the Process - -With your prompt file ready and the MCP server running, drag and drop the prompt file into GitHub Copilot to provide context. Then specify your testing scenario in natural language. For example: - -``` -Generate a Playwright test for the following scenario: -Navigate to [URL], -search for Garfield, -and verify the movie is in the list. -``` - -### Exploration - -When you initiate the process using agent mode, the agent begins by opening a browser window through the Playwright MCP server. This marks the beginning of autonomous test generation. - -The agent navigates to your specified URL and begins exploring the interface. When it encounters challenges, such as needing to activate a search field before typing, it automatically takes page snapshots to understand the current state of the application. - -### Problem Solving - -The page snapshots provide the agent with all accessible elements and their names, enabling it to make informed decisions about required interactions. -When the agent discovers it needs to click a search icon before entering text, it adapts its approach automatically. - -This means the agent can handle dynamic interfaces and discover the correct interaction patterns needed to complete the specified scenario. - -### Test Generation and Validation - -Once the agent has completed the scenario, it automatically generates a comprehensive Playwright test file. -This file captures all the necessary steps, navigation, element interactions, search actions, and verification, reflecting the manual process the agent performed. - -Next, the agent executes the generated test to confirm it passes, providing immediate feedback and validation. -This seamless workflow from scenario exploration to automated test creation and execution ensures your tests are both accurate and reliable. - -To improve the effectiveness of MCP generated tests, focus on crafting clear and detailed prompts. -Specify each step of the user journey you want to automate. -The more precise your instructions, the more closely the generated tests will match your requirements. -Use these tests as a foundation for building out more robust test suites, -and experiment with different AI models, to determine which produces the best results for your needs. \ No newline at end of file diff --git a/agents/star-repo.png b/agents/star-repo.png deleted file mode 100644 index 276de814c92..00000000000 Binary files a/agents/star-repo.png and /dev/null differ diff --git a/agents/traces-and-screenshots.mdx b/agents/traces-and-screenshots.mdx deleted file mode 100644 index c584ee48732..00000000000 --- a/agents/traces-and-screenshots.mdx +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: traces-and-screenshots -title: Traces and Screenshots -description: Guidance on saving traces, specifying output directories, and other debugging tips for Playwright MCP. ---- - -When working with Playwright MCP, it's often helpful to save traces and other output artifacts like screenshots or PDFs. -They can help in debugging and analysis, troubleshooting and reporting. - -### Saving a Trace of the Session - -The Playwright MCP can record a detailed trace of the session, which is invaluable for debugging. Use the `--save-trace` flag to enable this feature. The trace file will be saved in the `.playwright-mcp` directory. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--save-trace" - ] - } - } -} -``` - -Open the saved trace (must be zipped before viewing or sharing): - -1. Locate the trace folder under `.playwright-mcp/` (e.g. `.playwright-mcp/trace-`). -2. Zip it and rename it to `trace.zip`, and then launch the Trace Viewer: - ```bash - npx playwright show-trace trace.zip - ``` - -### Saving a log of the MCP Session - -The Playwright MCP can also record a log of MCP tool calls, the responses and what the browser looked like. -To enable it, add the `--save-session` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--isolated", - "--save-session" - ] - } - } -} -``` - -## Screenshots - -Playwright can capture screenshots of the current page via the MCP server. Ask the agent to navigate to a page and save a screenshot. - -Typical flow: -1. Navigate to the page. -2. Optionally set viewport and expand sections you want visible. -3. Save a screenshot. - -#### Example Prompt full page screenshot - -```bash -Navigate to playwright.dev and take a screenshot and save it as playwright.png -``` - -#### Example Prompt partial screenshot - -```bash -navigate to playwright.dev and find the footer and take a screenshot of it -``` - -## PDF Generation - -PDF generation lets the agent render the current page to a PDF file which is useful for creating print-friendly versions of web content. - -This is opt-in, so you need to add the `--caps=pdf` argument to your configuration: - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--caps=pdf" - ] - } - } -} -``` - -#### Example Prompt for PDF generation - -```bash -navigate to playwright.dev, wait for images to load and save the page as a PDF named "mcp-test.pdf". -``` - -## Setting the Output Directory - -By default the artifacts are written to the MCP server's artifacts location. -If you set `--output-dir` the files will be written there; otherwise the server may use a default like `.playwright-mcp/`. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--output-dir", - "full/path/to/output/folder" - ] - } - } -} -``` - -## Agents on CI - -Running an agent on CI is useful for automation and development purposes. -For proper observability into what the agent is doing, the trace and session log features above are useful, but there's more to consider. - -By default, Playwright MCP launches a headed browser so you can see the automation happen. -For CI/CD environments or when a visible UI is not needed, you can run in headless mode using the `--headless` flag. - -```json -{ - "mcpServers": { - "playwright": { - "command": "npx", - "args": [ - "@playwright/mcp@latest", - "--headless" - ] - } - } -} -``` - -Also, consider running `npx playwright install` in CI to ensure browsers are downloaded before the agent starts. -This can save the agent from having to install browsers at the beginning. diff --git a/dotnet/docusaurus.config.ts b/dotnet/docusaurus.config.ts index 852bba209ad..1bcca6174ca 100644 --- a/dotnet/docusaurus.config.ts +++ b/dotnet/docusaurus.config.ts @@ -33,16 +33,6 @@ let plugins = [ sidebarPath: require.resolve('./sidebarCommunity.js'), }), ], - [ - 'content-docs', - /** @type {import('@docusaurus/plugin-content-docs').Options} */ - ({ - id: 'agents', - path: 'agents', - routeBasePath: 'agents', - sidebarPath: require.resolve('./sidebarAgents.js'), - }), - ], require.resolve("@docusaurus/plugin-content-pages"), [ require.resolve('@docusaurus/plugin-ideal-image'), @@ -140,12 +130,6 @@ export default { }, ], }, - { - to: '/agents', - label: 'Agents', - position: 'left', - activeBaseRegex: `/agents/`, - }, { to: '/community/welcome', label: 'Community', diff --git a/java/docusaurus.config.ts b/java/docusaurus.config.ts index 0ffe3fb219a..0d34bf0afa2 100644 --- a/java/docusaurus.config.ts +++ b/java/docusaurus.config.ts @@ -33,16 +33,6 @@ let plugins = [ sidebarPath: require.resolve('./sidebarCommunity.js'), }), ], - [ - 'content-docs', - /** @type {import('@docusaurus/plugin-content-docs').Options} */ - ({ - id: 'agents', - path: 'agents', - routeBasePath: 'agents', - sidebarPath: require.resolve('./sidebarAgents.js'), - }), - ], require.resolve("@docusaurus/plugin-content-pages"), [ require.resolve('@docusaurus/plugin-ideal-image'), @@ -140,12 +130,6 @@ module.exports = { }, ], }, - { - to: '/agents', - label: 'Agents', - position: 'left', - activeBaseRegex: `/agents/`, - }, { to: '/community/welcome', label: 'Community', diff --git a/nodejs/docusaurus.config.ts b/nodejs/docusaurus.config.ts index 3a94ec34667..b6f91352213 100644 --- a/nodejs/docusaurus.config.ts +++ b/nodejs/docusaurus.config.ts @@ -33,16 +33,6 @@ let plugins = [ sidebarPath: require.resolve('./sidebarCommunity.js'), }), ], - [ - 'content-docs', - /** @type {import('@docusaurus/plugin-content-docs').Options} */ - ({ - id: 'agents', - path: 'agents', - routeBasePath: 'agents', - sidebarPath: require.resolve('./sidebarAgents.js'), - }), - ], require.resolve("@docusaurus/plugin-content-pages"), [ require.resolve('@docusaurus/plugin-ideal-image'), @@ -140,12 +130,6 @@ export default { }, ], }, - { - to: '/agents', - label: 'Agents', - position: 'left', - activeBaseRegex: `/agents/`, - }, { to: '/community/welcome', label: 'Community', diff --git a/python/docusaurus.config.ts b/python/docusaurus.config.ts index 6f4daac0ad5..2db6c9e5dba 100644 --- a/python/docusaurus.config.ts +++ b/python/docusaurus.config.ts @@ -33,16 +33,6 @@ let plugins = [ sidebarPath: require.resolve('./sidebarCommunity.js'), }), ], - [ - 'content-docs', - /** @type {import('@docusaurus/plugin-content-docs').Options} */ - ({ - id: 'agents', - path: 'agents', - routeBasePath: 'agents', - sidebarPath: require.resolve('./sidebarAgents.js'), - }), - ], require.resolve("@docusaurus/plugin-content-pages"), [ require.resolve('@docusaurus/plugin-ideal-image'), @@ -140,12 +130,6 @@ export default { }, ], }, - { - to: '/agents', - label: 'Agents', - position: 'left', - activeBaseRegex: `/agents/`, - }, { to: '/community/welcome', label: 'Community', diff --git a/sidebarAgents.js b/sidebarAgents.js deleted file mode 100644 index 8954f11f7ae..00000000000 --- a/sidebarAgents.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - ai: [ - { type: 'doc', id: 'playwright-mcp' }, - { type: 'doc', id: 'playwright-mcp-browser-automation' }, - { type: 'doc', id: 'playwright-mcp-explore-and-test' }, - { type: 'doc', id: 'playwright-mcp-generating-tests' }, - { type: 'doc', id: 'debugging-with-ai' }, - { type: 'doc', id: 'browser-and-emulation' }, - { type: 'doc', id: 'traces-and-screenshots' }, - { type: 'doc', id: 'network-and-security' }, - ] -};