playbooks

home / skills / ladderchaos / tora-skills / playwriter

playwriter skill

/playwriter

This skill automates browser tasks with Playwright via a Chrome extension, enabling testing, scraping, form filling, and seamless web interactions.

npx playbooks add skill ladderchaos/tora-skills --skill playwriter

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.1 KB
---
name: playwriter
description: Browser automation via Playwriter MCP - works as a Chrome extension with full Playwright API access. Use for browser testing, web scraping, form filling, and any browser interaction.
mcp:
  playwriter:
    command: npx
    args: ["-y", "playwriter@latest"]
---

# Playwriter Browser Automation

Browser automation via Chrome extension with full Playwright API access.

## Prerequisites

1. Install Chrome extension: https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe
2. Click extension icon on tabs to control (turns green when connected)

## Usage

Use the `execute` tool to run Playwright code:

```javascript
// Navigate
await page.goto('http://localhost:5173')

// Screenshot with accessibility labels
await screenshotWithAccessibilityLabels({ page })

// Click using aria-ref
await page.locator('aria-ref=e5').click()

// Fill form
await page.fill('input[name="email"]', '[email protected]')
```

## Key Features

- Single `execute` tool with full Playwright API
- Less context window usage than traditional browser MCPs
- Works with your existing Chrome extensions
- Can bypass automation detection

Overview

This skill provides browser automation via a Chrome extension that exposes the full Playwright API. It connects the agent to your active Chrome tabs so you can run Playwright scripts directly from the extension. Use it for testing, scraping, form automation, and any complex browser interaction that benefits from Playwright's capabilities.

How this skill works

Install the Chrome extension and click its icon on the tab you want to control to establish a connection. Use a single execute tool to run Playwright code against the connected tab: navigate, interact, take screenshots, and access advanced locator APIs like aria-ref. The extension leverages your browser environment and installed extensions, reducing the need for heavy context passing and helping avoid common automation detection.

When to use it

  • End-to-end browser testing and regression checks
  • Web scraping that needs robust selectors and navigation control
  • Automating repetitive web form filling and data entry
  • Capturing screenshots with accessibility overlays for audits
  • Interacting with sites that require real browser extensions or state

Best practices

  • Ensure the extension is installed and the tab shows a connected state before running scripts
  • Prefer stable locators (aria, data attributes) over brittle CSS selectors
  • Use explicit waits and Playwright’s built-in expect assertions for reliable flows
  • Keep scripts modular: separate navigation, interactions, and assertions for reuse
  • Respect robots.txt and site terms; throttle scraping and include delays to avoid overloading servers

Example use cases

  • Run automated smoke tests that navigate to pages, fill forms, and assert UI elements
  • Collect product data by navigating pages, extracting structured fields, and storing results
  • Perform accessibility checks: take screenshots annotated with accessibility labels for reporting
  • Automate account setup flows that require interacting with third-party extensions or OAuth flows
  • Record and replay complex user flows during bug investigation or QA triage

FAQ

Do I need to install anything besides the Chrome extension?

No additional installs are required to run Playwright code via the extension; just ensure the extension is enabled and connected to the target tab.

Can the extension use other Chrome extensions or browser state?

Yes. The automation runs in your real browser profile and can interact with installed extensions, cookies, and local storage, which helps with flows requiring existing state.

How do I avoid being blocked during scraping?

Use realistic waits, vary request timing, respect robots.txt, and rely on the real browser context provided by the extension to minimize detection.