--- name: playwright-cli description: "Automate browser interactions and inspect or test web pages through Playwright commands. Use when the task requires deterministic browser navigation, screenshots, selectors, or Playwright-test work. For a full local-webapp test workflow, use $webapp-testing." allowed-tools: Bash(playwright-cli:*) Bash(npx:*) Bash(npm:*) skill-dependencies: [webapp-testing] --- # Browser Automation with playwright-cli Use this skill for ad-hoc browser navigation, inspection, and interaction using CLI snapshots. When a local application needs managed server startup, custom Python assertions, or a repeatable Python test script, use `$webapp-testing`. ## Quick start ```bash # open new browser playwright-cli open # navigate to a page playwright-cli goto https://playwright.dev # interact with the page using refs from the snapshot playwright-cli click e15 playwright-cli type "page.click" playwright-cli press Enter # take a screenshot (rarely used, as snapshot is more common) playwright-cli screenshot # close the browser playwright-cli close ``` ## Commands See [`references/commands.md`](references/commands.md) for the complete catalogue of all commands organized by category: Core, Navigation, Keyboard, Mouse, Save as, Tabs, Storage (Cookies/LocalStorage/SessionStorage), Network, DevTools, Open Parameters, Browser Sessions, and Raw Output Mode. ## Snapshots After each command, playwright-cli provides a snapshot of the current browser state. ```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) ``` You can also take a snapshot on demand using `playwright-cli snapshot` command. All the options below can be combined as needed. ```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 ``` ## Targeting elements By default, use refs from the snapshot to interact with page elements. ```bash # get snapshot with refs playwright-cli snapshot # interact using a ref playwright-cli click e15 ``` You can also use css selectors or Playwright locators. ```bash # css selector playwright-cli click "#main > button.submit" # role locator playwright-cli click "getByRole('button', { name: 'Submit' })" # test id playwright-cli click "getByTestId('submit-button')" ``` ## Browser Sessions ```bash # create new browser session named "mysession" with persistent profile playwright-cli -s=mysession open example.com --persistent # same with manually specified profile directory (use when requested explicitly) playwright-cli -s=mysession open example.com --profile=/path/to/profile playwright-cli -s=mysession click e6 playwright-cli -s=mysession close # stop a named browser playwright-cli -s=mysession delete-data # delete user data for persistent session playwright-cli list # Close all browsers playwright-cli close-all # Forcefully kill all browser processes playwright-cli kill-all ``` ## Installation If global `playwright-cli` command is not available, try a local version via `npx playwright-cli`: ```bash npx --no-install playwright-cli --version ``` When local version is available, use `npx playwright-cli` in all commands. Otherwise, install `playwright-cli` as a global command: ```bash npm install -g @playwright/cli@latest ``` ## Example: Form submission ```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 ``` ## Example: Multi-tab workflow ```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 ``` ## Example: Debugging with DevTools ```bash playwright-cli open https://example.com playwright-cli click e4 playwright-cli fill e7 "test" playwright-cli console playwright-cli network playwright-cli close ``` ```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 ``` ## Specific tasks * **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md) * **Request mocking** [references/request-mocking.md](references/request-mocking.md) * **Running Playwright code** [references/running-code.md](references/running-code.md) * **Browser session management** [references/session-management.md](references/session-management.md) * **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md) * **Test generation** [references/test-generation.md](references/test-generation.md) * **Tracing** [references/tracing.md](references/tracing.md) * **Video recording** [references/video-recording.md](references/video-recording.md) * **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md)