### Save and Restore Session State (Cookies and Local Storage) Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md This example shows how to set custom cookies and local storage items, save this state, and then restore it in a new session to bypass manual setup. ```bash # Set up authentication state playwright-cli open https://example.com playwright-cli eval "() => { document.cookie = 'session=abc123'; localStorage.setItem('user', 'john'); }" # Save state to file playwright-cli state-save my-session.json # ... later, in a new session ... # Restore state playwright-cli state-load my-session.json playwright-cli open https://example.com # Cookies and localStorage are restored! ``` -------------------------------- ### Playwright CLI Quick Start Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md A quick guide to opening a browser, navigating, interacting with elements, taking screenshots, and closing the browser using the Playwright CLI. ```bash playwright-cli open playwright-cli goto https://playwright.dev playwright-cli click e15 playwright-cli type "page.click" playwright-cli press Enter playwright-cli screenshot playwright-cli close ``` -------------------------------- ### Run background test and attach CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Starts a background test and attaches the Playwright CLI to it. This is the initial setup for generating a single scenario. ```bash PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli # background playwright-cli attach tw-XXXX # resume ``` -------------------------------- ### Skills-less Operation Example Source: https://github.com/microsoft/playwright-cli/blob/main/README.md An example of how a coding agent can interact with the Playwright CLI without explicit skill installation. The agent reads available commands from `playwright-cli --help`. ```bash Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli. Check playwright-cli --help for available commands. ``` -------------------------------- ### Start Playwright CLI Session Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Opens a browser to the specified URL to begin recording actions. Use this to start a test generation session. ```bash playwright-cli open https://example.com/login ``` -------------------------------- ### Bootstrap Playwright Installation Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md If Playwright is not installed, use this command to bootstrap a new installation, allowing the user to select default configurations. ```bash npm init playwright@latest ``` -------------------------------- ### Open Browser with Configuration File Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Start a browser session using settings defined in a configuration file by providing the path to the file with the --config option. ```bash playwright-cli open --config=my-config.json ``` -------------------------------- ### Install Playwright CLI Globally Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Install the Playwright CLI globally using npm for system-wide access. ```bash npm install -g @playwright/cli@latest ``` -------------------------------- ### Manage Browser Sessions Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Examples of managing browser sessions, including opening websites, using persistent storage, and listing sessions. ```bash playwright-cli open https://playwright.dev playwright-cli -s=example open https://example.com --persistent playwright-cli list ``` -------------------------------- ### Descriptive Filenames for Video Recordings Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/video-recording.md Illustrates how to use descriptive filenames when starting video recordings to include context and dates, aiding in organization and identification of recorded sessions. ```bash # Include context in filename playwright-cli video-start recordings/login-flow-2024-01-15.webm playwright-cli video-start recordings/checkout-test-run-42.webm ``` -------------------------------- ### Install Playwright CLI Skills Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Installs the necessary skills for coding agents like Claude Code and GitHub Copilot to interact with the Playwright CLI. This enables agents to use Playwright commands. ```bash playwright-cli install --skills ``` -------------------------------- ### Check for Playwright Installation Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Verify if Playwright is installed in the current workspace or check its version. This is a prerequisite before starting the spec-driven testing workflow. ```bash test -f playwright.config.ts || test -f playwright.config.js npx --no-install playwright --version ``` -------------------------------- ### Basic Video Recording with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/video-recording.md Demonstrates the basic workflow for recording a browser session using Playwright CLI commands, including opening the browser, starting and stopping recording, adding chapter markers, and performing navigation and interaction actions. ```bash # Open browser first playwright-cli open # Start recording playwright-cli video-start demo.webm # Add a chapter marker for section transitions playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000 # Navigate and perform actions playwright-cli goto https://example.com playwright-cli snapshot playwright-cli click e1 # Add another chapter playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000 playwright-cli fill e2 "test input" # Stop and save playwright-cli video-stop ``` -------------------------------- ### Storage State File Format Example Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Illustrates the JSON structure for saved browser storage state, including cookies and localStorage. ```json { "cookies": [ { "name": "session_id", "value": "abc123", "domain": "example.com", "path": "/", "expires": 1893456000, "httpOnly": true, "secure": true, "sameSite": "Lax" } ], "origins": [ { "origin": "https://example.com", "localStorage": [ { "name": "theme", "value": "dark" }, { "name": "user_id", "value": "12345" } ] } ] } ``` -------------------------------- ### A/B Testing with Named Sessions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Utilize named sessions to test different user experiences or application variants simultaneously. This example sets up two variants and compares them using screenshots. ```bash # Test different user experiences playwright-cli -s=variant-a open "https://app.com?variant=a" playwright-cli -s=variant-b open "https://app.com?variant=b" # Compare playwright-cli -s=variant-a screenshot playwright-cli -s=variant-b screenshot ``` -------------------------------- ### Work with Frames and Iframes Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Interact with iframe elements by getting the content frame and performing actions within it, or retrieve all frames. ```bash # Work with iframe playwright-cli run-code "async page => { const frame = page.locator('iframe#my-iframe').contentFrame(); await frame.locator('button').click(); }" ``` ```bash # Get all frames playwright-cli run-code "async page => { const frames = page.frames(); return frames.map(f => f.url()); }" ``` -------------------------------- ### Get Page Information Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Retrieve various pieces of information about the current page, such as its title, URL, content, or viewport size. ```bash # Get page title playwright-cli run-code "async page => { return await page.title(); }" ``` ```bash # Get current URL playwright-cli run-code "async page => { return page.url(); }" ``` ```bash # Get page content playwright-cli run-code "async page => { return await page.content(); }" ``` ```bash # Get viewport size playwright-cli run-code "async page => { return page.viewportSize(); }" ``` -------------------------------- ### Target elements using snapshot refs Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Use snapshot refs to interact with page elements. First, get a snapshot, then use the ref to perform actions like clicking. ```bash # get snapshot with refs playwright-cli snapshot ``` ```bash # interact using a ref playwright-cli click e15 ``` -------------------------------- ### Advanced Video Recording with Overlays and Chapters using run-code Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/video-recording.md Shows how to use the Playwright API within a JavaScript file executed by `playwright-cli run-code` for advanced video recording. This includes starting screencast, navigating, showing chapter cards with descriptions and durations, performing actions with delays, and displaying custom HTML overlays for annotations and highlights. ```javascript async page => { await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } }); await page.goto('https://demo.playwright.dev/todomvc'); // Show a chapter card — blurs the page and shows a dialog. // Blocks until duration expires, then auto-removes. // Use this for simple use cases, but always feel free to hand-craft your own beautiful // overlay via await page.screencast.showOverlay(). await page.screencast.showChapter('Adding Todo Items', { description: 'We will add several items to the todo list.', duration: 2000, }); // Perform action await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 }); await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); await page.waitForTimeout(1000); // Show next chapter await page.screencast.showChapter('Verifying Results', { description: 'Checking the item appeared in the list.', duration: 2000, }); // Add a sticky annotation that stays while you perform actions. // Overlays are pointer-events: none, so they won't block clicks. const annotation = await page.screencast.showOverlay( `
✓ Item added successfully
`, ); // Perform more actions while the annotation is visible await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 }); await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter'); await page.waitForTimeout(1500); // Remove the annotation when done await annotation.dispose(); // You can also highlight relevant locators and provide contextual annotations. const bounds = await page.getByText('Walk the dog').boundingBox(); await page.screencast.showOverlay( `
Check it out, it is right above this text
`, { duration: 2000 }); await page.screencast.stop(); } ``` -------------------------------- ### Check Playwright CLI Version with npx Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Use npx to run the Playwright CLI without global installation to check its version. ```bash npx --no-install playwright-cli --version ``` -------------------------------- ### Record Tracing for Debugging with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Start and stop tracing to capture detailed execution information for debugging browser interactions. ```bash playwright-cli open https://example.com playwright-cli tracing-start playwright-cli click e4 playwright-cli fill e7 "test" playwright-cli tracing-stop playwright-cli close ``` -------------------------------- ### Concurrent Scraping with Named Sessions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md This bash script demonstrates how to scrape multiple websites concurrently by launching each in a separate named browser session. It starts browsers in the background, waits for them, takes snapshots, and then cleans up. ```bash #!/bin/bash # Scrape multiple sites concurrently # Start all browsers playwright-cli -s=site1 open https://site1.com & playwright-cli -s=site2 open https://site2.com & playwright-cli -s=site3 open https://site3.com & wait # Take snapshots from each playwright-cli -s=site1 snapshot playwright-cli -s=site2 snapshot playwright-cli -s=site3 snapshot # Cleanup playwright-cli close-all ``` -------------------------------- ### Attach to Running Browser via Extension Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Connect to a browser instance that has the Playwright browser extension installed. This method allows Playwright to communicate with the browser through the extension. ```bash playwright-cli attach --extension ``` -------------------------------- ### Get JSON Output from Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Pass the --json option to receive structured output, with every reply wrapped as a JSON object. ```bash playwright-cli list --json ``` -------------------------------- ### Preferred Seed Test with Fixture Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md A recommended approach for a seed test that pushes navigation logic into a fixture, allowing scenario tests to reuse it for a consistent starting state. ```typescript // tests/fixtures.ts import { test as baseTest } from '@playwright/test'; export { expect } from '@playwright/test'; export const test = baseTest.extend({ page: async ({ page }, use) => { await page.goto('https://example.com/'); await use(page); }, }); ``` ```typescript // tests/seed.spec.ts import { test } from './fixtures'; test('seed', async ({ page }) => { // Fixture already navigates. This empty body tells agents where to start. }); ``` -------------------------------- ### Explore Before Recording Actions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Illustrates the workflow of using `open` and `snapshot` commands to understand page structure before recording user interactions. ```bash playwright-cli open https://example.com playwright-cli snapshot # Review the element structure playwright-cli click e5 ``` -------------------------------- ### Open Browser Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Opens a browser instance, optionally navigating to a specified URL. ```bash playwright-cli open [url] ``` -------------------------------- ### Get All CSS Classes of an Element with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/element-attributes.md Execute a JavaScript function via `playwright-cli eval` to get the `className` property of an element, which contains all its CSS classes. ```bash playwright-cli eval "el => el.className" e7 ``` -------------------------------- ### Open a URL and Annotate Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Opens a specified URL in a browser and enables annotation mode for UI review or design feedback. Use this when requesting UI review or design feedback from the user. ```bash playwright-cli open https://example.com playwright-cli show --annotate ``` -------------------------------- ### Get Raw Output from Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Use the --raw option to strip extra information and get only the command's result value. This is useful for piping output to other tools. ```bash playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart' ``` ```bash playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json ``` ```bash playwright-cli --raw snapshot > before.yml ``` ```bash playwright-cli click e5 ``` ```bash playwright-cli --raw snapshot > after.yml ``` ```bash diff before.yml after.yml ``` ```bash TOKEN=$(playwright-cli --raw cookie-get session_id) ``` ```bash playwright-cli --raw localstorage-get theme ``` -------------------------------- ### Get Specific Cookie Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Retrieves a specific cookie by its name. ```bash playwright-cli cookie-get session_id ``` -------------------------------- ### Drag and Drop Elements Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Performs a drag-and-drop operation between a start and end element. ```bash playwright-cli drag ``` -------------------------------- ### Get Single sessionStorage Value Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Retrieve the value associated with a specific key from sessionStorage. ```bash playwright-cli sessionstorage-get form_data ``` -------------------------------- ### Handle File Downloads Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Handle file downloads by waiting for the 'download' event, clicking a download link, and saving the file. ```bash # Handle file download playwright-cli run-code "async page => { const downloadPromise = page.waitForEvent('download'); await page.getByRole('link', { name: 'Download' }).click(); const download = await downloadPromise; await download.saveAs('./downloaded-file.pdf'); return download.suggestedFilename(); }" ``` -------------------------------- ### Get Single localStorage Value Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Retrieve the value associated with a specific key from localStorage. ```bash playwright-cli localstorage-get token ``` -------------------------------- ### Open Browser with Persistent Profile Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Use the --persistent flag to launch a browser session with a persistent profile instead of an in-memory one. A custom directory can be specified using the --profile option. ```bash playwright-cli open --persistent ``` ```bash playwright-cli open --profile=/path/to/profile ``` -------------------------------- ### Open Website in Headed Mode Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Use the `--headed` flag to open the browser and see the interaction visually. This is useful for debugging. ```bash playwright-cli open https://playwright.dev --headed ``` -------------------------------- ### List All localStorage Items Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Use this command to view all key-value pairs currently stored in the browser's localStorage. ```bash playwright-cli localstorage-list ``` -------------------------------- ### Get ARIA Label Attribute with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/element-attributes.md Inspect the `aria-label` attribute of an element using `playwright-cli eval` and the `getAttribute` method. ```bash playwright-cli eval "el => el.getAttribute('aria-label')" e7 ``` -------------------------------- ### Navigate to URL Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Navigates the current browser page to a specified URL. ```bash playwright-cli goto ``` -------------------------------- ### Open Browser with Specific Browser Type Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Use the --browser option to specify which browser to launch when creating a new session. ```bash playwright-cli open --browser=chrome ``` ```bash playwright-cli open --browser=firefox ``` ```bash playwright-cli open --browser=webkit ``` ```bash playwright-cli open --browser=msedge ``` -------------------------------- ### Minimal Seed Test Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md A basic seed test file that navigates to a specified URL. This serves as the starting point for scenarios when no other seed exists. ```typescript // tests/seed.spec.ts import { test } from '@playwright/test'; test('seed', async ({ page }) => { await page.goto('https://example.com/'); }); ``` -------------------------------- ### Manage Network Requests Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Commands for mocking network requests and managing routes. ```bash playwright-cli route [opts] # mock network requests playwright-cli route-list # list active routes playwright-cli unroute [pattern] # remove route(s) ``` -------------------------------- ### CLI commands for generating Playwright code Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Demonstrates sequential CLI commands used during spec-driven test generation to capture application state and generate Playwright code. ```bash playwright-cli snapshot # find refs playwright-cli fill e3 "John Doe" # -> page.getByRole('textbox', {...}).fill(...) playwright-cli press Enter playwright-cli click e7 ``` -------------------------------- ### Create New Browser Tab Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Creates a new browser tab, optionally navigating to a URL. ```bash playwright-cli tab-new [url] ``` -------------------------------- ### Emulate Media Features Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Emulate different media features like color scheme, reduced motion, or print media. ```bash # Emulate dark color scheme playwright-cli run-code "async page => { await page.emulateMedia({ colorScheme: 'dark' }); }" ``` ```bash # Emulate light color scheme playwright-cli run-code "async page => { await page.emulateMedia({ colorScheme: 'light' }); }" ``` ```bash # Emulate reduced motion playwright-cli run-code "async page => { await page.emulateMedia({ reducedMotion: 'reduce' }); }" ``` ```bash # Emulate print media playwright-cli run-code "async page => { await page.emulateMedia({ media: 'print' }); }" ``` -------------------------------- ### Interactive Todo App Testing Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Demonstrates a sequence of Playwright CLI commands to interact with a todomvc application, including adding items and checking them off. ```bash > Use playwright skills to test https://demo.playwright.dev/todomvc/. Take screenshots for all successful and failing scenarios. ``` ```bash playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type "Buy groceries" playwright-cli press Enter playwright-cli type "Water flowers" playwright-cli press Enter playwright-cli check e21 playwright-cli check e35 playwright-cli screenshot ``` -------------------------------- ### Retrieve a Specific Data Attribute with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/element-attributes.md Use `playwright-cli eval` to get the value of a custom data attribute (e.g., 'data-testid') from an element using `getAttribute`. ```bash playwright-cli eval "el => el.getAttribute('data-testid')" e7 ``` -------------------------------- ### Configure Browser Session Settings Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Customize browser session behavior when opening a new session using flags like `--config`, `--browser`, `--headed`, and `--persistent`. These options allow fine-grained control over the browser environment. ```bash # Open with config file playwright-cli open https://example.com --config=.playwright/my-cli.json # Open with specific browser playwright-cli open https://example.com --browser=firefox # Open in headed mode playwright-cli open https://example.com --headed # Open with persistent profile playwright-cli open https://example.com --persistent ``` -------------------------------- ### Generated Playwright TypeScript test file Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md An example of a Playwright TypeScript test file generated from a spec file. It includes imports, test descriptions, and assertions based on the spec. ```typescript // spec: specs/basic-operations.plan.md // seed: tests/seed.spec.ts import { test, expect } from './fixtures'; // or '@playwright/test' if no fixtures file test.describe('Signing in and out', () => { test('should sign in', async ({ page }) => { // 1. Navigate to the application // (handled by the seed fixture) // 2. Type 'John Doe' into the username field await page.getByRole('textbox', { name: 'username' }).fill('John Doe'); // 3. Type password await page.getByRole('textbox', { name: 'password' }).fill('TestPassword'); // 4. Press Enter to submit await page.getByRole('textbox', { name: 'password' }).press('Enter'); await expect(page.getByRole('heading')).toContainText('Welcome, John Doe!'); }); }); ``` -------------------------------- ### Manage Storage State Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Commands to save, load, and manage cookies, localStorage, and sessionStorage. ```bash playwright-cli state-save [filename] # save storage state playwright-cli state-load # load storage state # Cookies playwright-cli cookie-list [--domain] # list cookies playwright-cli cookie-get # get a cookie playwright-cli cookie-set # set a cookie playwright-cli cookie-delete # delete a cookie playwright-cli cookie-clear # clear all cookies # LocalStorage playwright-cli localstorage-list # list localStorage entries playwright-cli localstorage-get # get localStorage value playwright-cli localstorage-set # set localStorage value playwright-cli localstorage-delete # delete localStorage entry playwright-cli localstorage-clear # clear all localStorage # SessionStorage playwright-cli sessionstorage-list # list sessionStorage entries playwright-cli sessionstorage-get # get sessionStorage value playwright-cli sessionstorage-set # set sessionStorage value playwright-cli sessionstorage-delete # delete sessionStorage entry playwright-cli sessionstorage-clear # clear all sessionStorage ``` -------------------------------- ### Upload Files Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Uploads one or multiple files to the browser. ```bash playwright-cli upload ``` -------------------------------- ### Manual Assertions with Playwright Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Provides examples of manual assertions in Playwright tests, using various matchers like `toBeVisible`, `toHaveText`, `toHaveValue`, `toBeChecked`, and `toMatchAriaSnapshot`. These are added after generated action code. ```typescript // Generated action await page.getByRole('button', { name: 'Submit' }).click(); // Manual assertions using the outputs above: await expect(page.getByRole('alert', { name: 'Success' })).toBeVisible(); await expect(page.getByTestId('main-header')).toHaveText('Welcome, user'); await expect(page.getByRole('textbox', { name: 'Email' })).toHaveValue('user@example.com'); await expect(page.getByRole('checkbox', { name: 'Enable notifications' })).toBeChecked(); // toMatchAriaSnapshot on the whole page, finds a matching region await expect(page).toMatchAriaSnapshot(` - heading "Welcome, user" - link /\d+ new messages?/ - button "Sign out" `); // toMatchAriaSnapshot scoped to a region await expect(page.getByRole('navigation')).toMatchAriaSnapshot(` - link "Home" - link /\d+ new messages?/ - link "Profile" `); ``` -------------------------------- ### Wait Strategies Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Utilize various waiting strategies, including network idle, element visibility, function evaluation, and timeouts. ```bash # Wait for network idle playwright-cli run-code "async page => { await page.waitForLoadState('networkidle'); }" ``` ```bash # Wait for specific element playwright-cli run-code "async page => { await page.locator('.loading').waitFor({ state: 'hidden' }); }" ``` ```bash # Wait for function to return true playwright-cli run-code "async page => { await page.waitForFunction(() => window.appReady === true); }" ``` ```bash # Wait with timeout playwright-cli run-code "async page => { await page.locator('.result').waitFor({ timeout: 10000 }); }" ``` -------------------------------- ### Debug a Failing Playwright Test Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/playwright-tests.md Debug a failing test by running it with the `--debug=cli` option. This pauses the test at the start and provides debugging instructions. Attach to the running test session using `playwright-cli attach` with the provided session name. ```bash # Run the test PLAYWRIGHT_HTML_OPEN=never npx playwright test --debug=cli # ... # ... debugging instructions for "tw-abcdef" session ... # ... # Attach to the test playwright-cli attach tw-abcdef ``` -------------------------------- ### List IndexedDB Databases Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Execute custom JavaScript to list all available IndexedDB databases. This requires the `run-code` command. ```bash playwright-cli run-code "async page => { return await page.evaluate(async () => { const databases = await indexedDB.databases(); return databases; }); }" ``` -------------------------------- ### Playwright CLI Save As Commands Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Capture screenshots and generate PDF documents of the current page. ```bash playwright-cli screenshot playwright-cli screenshot e5 playwright-cli screenshot --filename=page.png playwright-cli pdf --filename=page.pdf ``` -------------------------------- ### Configure Browser Session Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Commands to control browser selection, extension attachment, CDP connection, and profile management. ```bash playwright-cli open --browser=chrome # use specific browser playwright-cli attach --extension=chrome # connect via Playwright Extension playwright-cli attach --cdp=chrome # attach to running Chrome/Edge by channel playwright-cli attach --cdp= # attach via CDP endpoint playwright-cli detach # detach an attached session, leaves the external browser running playwright-cli open --persistent # use persistent profile playwright-cli open --profile= # use custom profile directory playwright-cli open --config=file.json # use config file playwright-cli close # close the browser playwright-cli delete-data # delete user data for default session ``` -------------------------------- ### Interact with Elements using Refs Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Interacts with web page elements using references obtained from a snapshot. This is the default method for element interaction. ```bash # get snapshot with refs playwright-cli snapshot # interact using a ref playwright-cli click e15 ``` -------------------------------- ### Take a Snapshot of Elements Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Captures a snapshot of the current page to identify elements. This helps in understanding the page structure before recording actions. ```bash playwright-cli snapshot ``` -------------------------------- ### Visual Debugging and Element Interaction Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Commands to open the visual dashboard, generate locators, and apply highlights. ```bash playwright-cli show # open the visual dashboard playwright-cli show --annotate # launch dashboard for UI review / design feedback playwright-cli generate-locator # generate a playwright locator for an element playwright-cli highlight # show a persistent highlight overlay playwright-cli highlight --style= # highlight with a custom CSS style playwright-cli highlight --hide # hide highlight on a specific element playwright-cli highlight --hide # hide all page highlights ``` -------------------------------- ### Interact with Application Elements Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Simulates user interaction with specific elements on the page, such as clicking an element identified by a selector (e.g., 'e5'). ```bash playwright-cli click e5 ``` -------------------------------- ### Login and Save Authentication State Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md This snippet demonstrates logging into a web application using Playwright CLI commands and saving the authenticated session state to a file. ```bash # Step 1: Login and save state playwright-cli open https://app.example.com/login playwright-cli snapshot playwright-cli fill e1 "user@example.com" playwright-cli fill e2 "password123" playwright-cli click e3 # Save the authenticated state playwright-cli state-save auth.json # Step 2: Later, restore state and skip login playwright-cli state-load auth.json playwright-cli open https://app.example.com/dashboard # Already logged in! ``` -------------------------------- ### List All sessionStorage Items Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md View all key-value pairs currently stored in the browser's sessionStorage. ```bash playwright-cli sessionstorage-list ``` -------------------------------- ### Navigate Forward Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Navigates the browser forward to the next page in the history. ```bash playwright-cli go-forward ``` -------------------------------- ### Specify configuration file for Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Run Playwright CLI commands with a custom configuration file using the --config option. The CLI defaults to `.playwright/cli.config.json` if not specified. ```bash playwright-cli --config path/to/config.json open example.com ``` -------------------------------- ### Attach to Running Browser via Channel Name Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Connect to an already running browser instance (Chrome, Edge, etc.) by specifying its channel name. The browser must have remote debugging enabled. The session is automatically named after the channel unless overridden. ```bash # Attach to Chrome playwright-cli attach --cdp=chrome # Attach to Chrome Canary playwright-cli attach --cdp=chrome-canary # Attach to Microsoft Edge playwright-cli attach --cdp=msedge # Attach to Edge Dev playwright-cli attach --cdp=msedge-dev ``` -------------------------------- ### Name Browser Sessions Semantically Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Use clear and descriptive names for your browser sessions to easily identify their purpose. Avoid generic names like 's1'. ```bash # GOOD: Clear purpose playwright-cli -s=github-auth open https://github.com playwright-cli -s=docs-scrape open https://docs.example.com # AVOID: Generic names playwright-cli -s=s1 open https://github.com ``` -------------------------------- ### Take Snapshot On Demand Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Takes a snapshot of the current browser state. Snapshots can be saved to a file with a timestamp or a custom name. ```bash # default - save to a file with timestamp-based name playwright-cli snapshot # save to file, use when snapshot is a part of the workflow result playwright-cli snapshot --filename=after-click.yaml # snapshot an element instead of the whole page playwright-cli snapshot "#main" # limit snapshot depth for efficiency, take a partial snapshot afterwards playwright-cli snapshot --depth=4 playwright-cli snapshot e34 # include each element's bounding box as [box=x,y,width,height] playwright-cli snapshot --boxes ``` -------------------------------- ### Capture Browser State Snapshot Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Captures the current state of the browser, including URL and title, and saves it to a YAML file. This is useful for debugging or as part of a workflow. ```bash > playwright-cli goto https://example.com ### Page - Page URL: https://example.com/ - Page Title: Example Domain ### Snapshot [Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml) ``` -------------------------------- ### Playwright CLI Core Commands Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Common commands for interacting with web pages, including opening, navigating, typing, clicking, filling forms, dragging, dropping, hovering, selecting, uploading, checking, unchecking, taking snapshots, and evaluating JavaScript. ```bash playwright-cli open # open and navigate right away playwright-cli open https://example.com/ playwright-cli goto https://playwright.dev playwright-cli type "search query" playwright-cli click e3 playwright-cli dblclick e7 # --submit presses Enter after filling the element playwright-cli fill e5 "user@example.com" --submit playwright-cli drag e2 e8 # drop files or data onto an element (from outside the page) playwright-cli drop e4 --path=./image.png playwright-cli drop e4 --data="text/plain=hello world" playwright-cli hover e4 playwright-cli select e9 "option-value" playwright-cli upload ./document.pdf playwright-cli check e12 playwright-cli uncheck e12 playwright-cli snapshot playwright-cli eval "document.title" playwright-cli eval "el => el.textContent" e5 # get element id, class, or any attribute not visible in the snapshot playwright-cli eval "el => el.id" e5 playwright-cli eval "el => el.getAttribute('data-testid')" e5 playwright-cli dialog-accept playwright-cli dialog-accept "confirmation text" playwright-cli dialog-dismiss playwright-cli resize 1920 1080 playwright-cli close ``` -------------------------------- ### List and Close All Browser Sessions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Commands to list all active browser sessions and to close all of them, or forcefully kill all browser processes. ```bash playwright-cli list ``` ```bash # Close all browsers playwright-cli close-all ``` ```bash # Forcefully kill all browser processes playwright-cli kill-all ``` -------------------------------- ### Capture Application Snapshot Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Takes a snapshot of the current state of the application page, typically used to inventory interactive elements during the planning phase of spec-driven testing. ```bash playwright-cli snapshot ``` -------------------------------- ### Press Keyboard Key Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Simulates pressing a key on the keyboard. Supports special keys like 'arrowleft'. ```bash playwright-cli press ``` -------------------------------- ### Commit and Push Changes with Semantic Commit Message Source: https://github.com/microsoft/playwright-cli/blob/main/CLAUDE.md Use this command to stage changes, commit them with a semantic message, and push to the remote repository. Ensure your commit message follows the 'label(scope): description' format. ```bash git checkout -b fix-39562 # ... make changes ... git add git commit -m "$(cat <<'EOF' fix(proxy): handle SOCKS proxy authentication Fixes: https://github.com/microsoft/playwright/issues/39562 EOF )" git push origin fix-39562 ``` -------------------------------- ### Select Browser Tab Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Selects and switches to a specific browser tab identified by its index. ```bash playwright-cli tab-select ``` -------------------------------- ### Playwright CLI Storage State Management Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Save and load browser state, manage cookies, local storage, and session storage. ```bash playwright-cli state-save playwright-cli state-save auth.json playwright-cli state-load auth.json # Cookies playwright-cli cookie-list playwright-cli cookie-list --domain=example.com playwright-cli cookie-get session_id playwright-cli cookie-set session_id abc123 playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure playwright-cli cookie-delete session_id playwright-cli cookie-clear # LocalStorage playwright-cli localstorage-list playwright-cli localstorage-get theme playwright-cli localstorage-set theme dark playwright-cli localstorage-delete theme playwright-cli localstorage-clear # SessionStorage playwright-cli sessionstorage-list playwright-cli sessionstorage-get step playwright-cli sessionstorage-set step 3 playwright-cli sessionstorage-delete step playwright-cli sessionstorage-clear ``` -------------------------------- ### List Browser Tabs Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Lists all currently open browser tabs. ```bash playwright-cli tab-list ``` -------------------------------- ### Login and Save Storage State with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Use this snippet to automate a login process and save the resulting authentication state to a file. The code navigates to a login page, fills in credentials, submits the form, and waits for a dashboard URL before saving the storage state. ```bash playwright-cli run-code "async page => { await page.goto('https://example.com/login'); await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); await page.getByRole('textbox', { name: 'Password' }).fill('secret'); await page.getByRole('button', { name: 'Sign in' }).click(); await page.waitForURL('**/dashboard'); await page.context().storageState({ path: 'auth.json' }); return 'Login successful'; }" ``` -------------------------------- ### Playwright CLI Mouse Commands Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Simulate mouse actions including movement, clicks, and scrolling. ```bash playwright-cli mousemove 150 300 playwright-cli mousedown playwright-cli mousedown right playwright-cli mouseup playwright-cli mouseup right playwright-cli mousewheel 0 100 ``` -------------------------------- ### Resize Browser Window Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Resizes the browser window to the specified width and height. ```bash playwright-cli resize ``` -------------------------------- ### Building a Playwright Test File Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Collects generated code from a Playwright CLI session into a complete Playwright test file. Includes necessary imports and a basic test structure. ```typescript import { test, expect } from '@playwright/test'; test('login flow', async ({ page }) => { // Generated code from playwright-cli session: await page.goto('https://example.com/login'); await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); await page.getByRole('textbox', { name: 'Password' }).fill('password123'); await page.getByRole('button', { name: 'Sign In' }).click(); // Add assertions await expect(page).toHaveURL(/.*dashboard/); }); ``` -------------------------------- ### Navigate Backwards Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Navigates the browser back to the previous page in the history. ```bash playwright-cli go-back ``` -------------------------------- ### Capture Snapshot for Assertions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/test-generation.md Captures a snapshot of the entire page or a specific element for use with accessibility snapshot assertions. The `--raw` flag ensures plain output. ```bash playwright-cli --raw snapshot ``` ```bash playwright-cli --raw snapshot e5 ``` -------------------------------- ### Select Dropdown Option Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Selects a specific option from a dropdown element. ```bash playwright-cli select ``` -------------------------------- ### Annotate Page for User Input Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/spec-driven-testing.md Prompts the user to interactively select an element on the page, often used to gather information about UI elements during test planning. ```bash playwright-cli show --annotate ``` -------------------------------- ### Save Page as PDF Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Saves the current browser page as a PDF document. Allows specifying a filename. ```bash playwright-cli pdf ``` ```bash playwright-cli pdf --filename=page.pdf ``` -------------------------------- ### Error Handling with Try-Catch Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Implement error handling within the `run-code` command using a try-catch block to manage potential exceptions during execution. ```bash # Try-catch in run-code playwright-cli run-code "async page => { try { await page.getByRole('button', { name: 'Submit' }).click({ timeout: 1000 }); return 'clicked'; } catch (e) { return 'element not found'; } }" ``` -------------------------------- ### Fill Text into Element Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Fills the specified text into an editable element. Use --submit to press Enter after filling. ```bash playwright-cli fill ``` ```bash playwright-cli fill --submit ``` -------------------------------- ### Open Named Browser Sessions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Use the `-s` flag to open and manage isolated browser contexts for different tasks. Commands executed with the same session flag operate within that isolated context. ```bash # Browser 1: Authentication flow playwright-cli -s=auth open https://app.example.com/login # Browser 2: Public browsing (separate cookies, storage) playwright-cli -s=public open https://example.com # Commands are isolated by browser session playwright-cli -s=auth fill e1 "user@example.com" playwright-cli -s=public snapshot ``` -------------------------------- ### Perform Form Submission with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Automate form filling and submission using Playwright CLI commands. ```bash playwright-cli open https://example.com/form playwright-cli snapshot playwright-cli fill e1 "user@example.com" playwright-cli fill e2 "password123" playwright-cli click e3 playwright-cli snapshot playwright-cli close ``` -------------------------------- ### Grant Permissions Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Grant multiple permissions or specific permissions for a given origin. ```bash # Grant multiple permissions playwright-cli run-code "async page => { await page.context().grantPermissions([ 'geolocation', 'notifications', 'camera', 'microphone' ]); }" ``` ```bash # Grant permissions for specific origin playwright-cli run-code "async page => { await page.context().grantPermissions(['clipboard-read'], { origin: 'https://example.com' }); }" ``` -------------------------------- ### Scroll Mouse Wheel Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Simulates scrolling the mouse wheel horizontally (dx) and vertically (dy). ```bash playwright-cli mousewheel ``` -------------------------------- ### Filter Cookies by Path Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md Lists cookies that match a specific path. ```bash playwright-cli cookie-list --path=/api ``` -------------------------------- ### Playwright CLI DevTools and Utilities Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Commands for accessing console logs, network requests, running custom code, tracing, video recording, and generating locators. ```bash playwright-cli console playwright-cli console warning playwright-cli requests playwright-cli request 5 playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])" playwright-cli run-code --filename=script.js playwright-cli tracing-start playwright-cli tracing-stop playwright-cli video-start video.webm playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000 playwright-cli video-stop # annotate each subsequent action (click, type, ...) with a callout naming the action and highlighting the target playwright-cli video-show-actions --duration=600 --position=top-right playwright-cli video-hide-actions # launch the dashboard for UI review / design feedback — user annotates the page, you receive the annotated screenshot, snapshot, and notes playwright-cli show --annotate # generate a Playwright locator for an element from its ref or selector playwright-cli generate-locator e5 --raw # show a persistent highlight overlay for an element, optionally with a custom style playwright-cli highlight e5 playwright-cli highlight e5 --style="outline: 3px dashed red" # hide a single element highlight, or all page highlights when no target is given playwright-cli highlight e5 --hide playwright-cli highlight --hide ``` -------------------------------- ### Persistent Browser Profile Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md Persist browser profiles to disk using the `--persistent` flag with the `open` command. This ensures that cookies, local storage, and other profile data are saved between sessions. A custom directory can be specified with `--profile`. ```bash # Use persistent profile (auto-generated location) playwright-cli open https://example.com --persistent # Use persistent profile with custom directory playwright-cli open https://example.com --profile=/path/to/profile ``` -------------------------------- ### Mouse Button Down/Up Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Simulates pressing or releasing a mouse button. ```bash playwright-cli mousedown [button] ``` ```bash playwright-cli mouseup [button] ``` -------------------------------- ### Show Playwright CLI Monitoring Dashboard Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Opens a visual dashboard to monitor and control running browser sessions. Useful for observing background automation progress. ```bash playwright-cli show ``` -------------------------------- ### Run Agent with Session Environment Variable Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Instructs an agent to use a specific session by setting the PLAYWRIGHT_CLI_SESSION environment variable. ```bash PLAYWRIGHT_CLI_SESSION=todo-app claude . ``` -------------------------------- ### Grant Geolocation Permission and Set Location Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/running-code.md Grant geolocation permission and set a specific latitude and longitude for the browser context. ```bash # Grant geolocation permission and set location playwright-cli run-code "async page => { await page.context().grantPermissions(['geolocation']); await page.context().setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); }" ``` ```bash # Set location to London playwright-cli run-code "async page => { await page.context().grantPermissions(['geolocation']); await page.context().setGeolocation({ latitude: 51.5074, longitude: -0.1278 }); }" ``` ```bash # Clear geolocation override playwright-cli run-code "async page => { await page.context().clearPermissions(); }" ``` -------------------------------- ### Drop Files or Data onto Element Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Drops files from the local filesystem or specified data onto an element. ```bash playwright-cli drop --path= ``` ```bash playwright-cli drop --data="k=v" ``` -------------------------------- ### Manage Browser Sessions with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Commands to open, manage, and close named browser sessions, including persistent profiles and data deletion. ```bash playwright-cli -s=mysession open example.com --persistent ``` ```bash playwright-cli -s=mysession open example.com --profile=/path/to/profile ``` ```bash playwright-cli -s=mysession click e6 ``` ```bash playwright-cli -s=mysession close # stop a named browser ``` ```bash playwright-cli -s=mysession delete-data # delete user data for persistent session ``` -------------------------------- ### Handle Dialogs Source: https://github.com/microsoft/playwright-cli/blob/main/README.md Accepts or dismisses a JavaScript dialog (alert, confirm, prompt). ```bash playwright-cli dialog-accept [prompt] ``` ```bash playwright-cli dialog-dismiss ``` -------------------------------- ### Attach to Browser via Playwright Extension or CDP Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Connect to an existing browser instance using either the Playwright Extension or by specifying a Chrome DevTools Protocol (CDP) endpoint. ```bash playwright-cli attach --extension=chrome ``` ```bash playwright-cli attach --cdp=chrome ``` ```bash playwright-cli attach --cdp=msedge ``` ```bash playwright-cli attach --cdp=http://localhost:9222 ``` -------------------------------- ### Manage Multi-Tab Workflows with Playwright CLI Source: https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md Control multiple browser tabs, including opening new tabs, listing them, and selecting specific tabs for interaction. ```bash playwright-cli open https://example.com playwright-cli tab-new https://example.com/other playwright-cli tab-list playwright-cli tab-select 0 playwright-cli snapshot playwright-cli close ```