Back to Skills

Playwright Browser Automation

Browser automation and testing using Playwright for web application testing and scraping

playwrightbrowsertestingautomatione2e
By lackeyjb
2.6k181Updated 5 months agoJavaScriptMIT

Skill Content

# Playwright Browser Automation Skill

Automate browser interactions for testing and web scraping using Playwright.

## Overview

This skill provides Claude Code with browser automation capabilities:

- **Navigation** - Open URLs, click links, fill forms
- **Testing** - Write and run E2E tests
- **Scraping** - Extract data from web pages
- **Screenshots** - Capture visual state for debugging

## Installation

Clone the skill to your Claude Code configuration:

```bash
git clone https://github.com/lackeyjb/playwright-skill.git ~/.claude/skills/playwright-skill
```

## Requirements

- Node.js 18+ installed
- Playwright browsers installed (`npx playwright install`)

## Features

### Browser Control
- Launch Chromium, Firefox, or WebKit
- Navigate to URLs and wait for page load
- Handle popups, dialogs, and new tabs

### Form Interactions
- Fill text inputs and textareas
- Select dropdown options
- Check/uncheck checkboxes
- Upload files

### Testing Capabilities
- Assert element visibility and text content
- Wait for network requests
- Compare screenshots
- Generate test reports

### Data Extraction
- Query elements with CSS selectors
- Extract text, attributes, and HTML
- Handle dynamic content loading

## Example Usage

"Open the login page and fill in the form with test credentials"
"Take a screenshot of the dashboard after logging in"
"Write an E2E test for the checkout flow"

## Repository

[github.com/lackeyjb/playwright-skill](https://github.com/lackeyjb/playwright-skill)

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/playwright-skill.md
  4. Use /playwright-skill in Claude Code to invoke this skill

README

View on GitHub

Playwright Skill for Claude Code

General-purpose browser automation as a Claude Skill

A Claude Skill that enables Claude to write and execute any Playwright automation on-the-fly - from simple page tests to complex multi-step flows. Packaged as a Claude Code Plugin for easy installation and distribution.

Claude autonomously decides when to use this skill based on your browser automation needs, loading only the minimal information required for your specific task.

Made using Claude Code.

Features

  • Any Automation Task - Claude writes custom code for your specific request, not limited to pre-built scripts
  • Visible Browser by Default - See automation in real-time with headless: false
  • Zero Module Resolution Errors - Universal executor ensures proper module access
  • Progressive Disclosure - Concise SKILL.md with full API reference loaded only when needed
  • Safe Cleanup - Smart temp file management without race conditions
  • Comprehensive Helpers - Optional utility functions for common tasks

Installation

This repository is structured as a Claude Code Plugin containing a skill. You can install it as either a plugin (recommended) or extract it as a standalone skill.

Understanding the Structure

This repository uses the plugin format with a nested structure:

playwright-skill/              # Plugin root
├── .claude-plugin/           # Plugin metadata
└── skills/
    └── playwright-skill/     # The actual skill
        └── SKILL.md

Claude Code expects skills to be directly in folders under .claude/skills/, so manual installation requires extracting the nested skill folder.

Option 1: Plugin Installation (Recommended)

Install via Claude Code's plugin system for automatic updates and team distribution:

# Add this repository as a marketplace
/plugin marketplace add lackeyjb/playwright-skill

# Install the plugin
/plugin install playwright-skill@playwright-skill

# Navigate to the skill directory and run setup
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

Verify installation by running /help to confirm the skill is available.

Option 2: Standalone Skill Installation

To install as a standalone skill (without the plugin system), extract only the skill folder:

Global Installation (Available Everywhere):

# Clone to a temporary location
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Copy only the skill folder to your global skills directory
mkdir -p ~/.claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill ~/.claude/skills/

# Navigate to the skill and run setup
cd ~/.claude/skills/playwright-skill
npm run setup

# Clean up temporary files
rm -rf /tmp/playwright-skill-temp

Project-Specific Installation:

# Clone to a temporary location
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Copy only the skill folder to your project
mkdir -p .claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill .claude/skills/

# Navigate to the skill and run setup
cd .claude/skills/playwright-skill
npm run setup

# Clean up temporary files
rm -rf /tmp/playwright-skill-temp

Why this structure? The plugin format requires the skills/ directory for organizing multiple skills within a plugin. When installing as a standalone skill, you only need the inner skills/playwright-skill/ folder contents.

Option 3: Download Release

  1. Download and extract the latest release from GitHub Releases
  2. Copy only the skills/playwright-skill/ folder to:
    • Global: ~/.claude/skills/playwright-skill
    • Project: /path/to/your/project/.claude/skills/playwright-skill
  3. Navigate to the skill directory and run setup: 
    cd ~/.claude/skills/playwright-skill  # or your project path
npm run setup

Verify Installation

Run /help to confirm the skill is loaded, then ask Claude to perform a simple browser task like "Test if google.com loads".

Quick Start

After installation, simply ask Claude to test or automate any browser task. Claude will write custom Playwright code, execute it, and return results with screenshots and console output.

Usage Examples

Test Any Page

"Test the homepage"
"Check if the contact form works"
"Verify the signup flow"

Visual Testing

"Take screenshots of the dashboard in mobile and desktop"
"Test responsive design across different viewports"

Interaction Testing

"Fill out the registration form and submit it"
"Click through the main navigation"
"Test the search functionality"

Validation

"Check for broken links"
"Verify all images load"
"Test form validation"

How It Works

  1. Describe what you want to test or automate
  2. Claude writes custom Playwright code for the task
  3. The universal executor (run.js) runs it with proper module resolution
  4. Browser opens (visible by default) and automation executes
  5. Results are displayed with console output and screenshots

Configuration

Default settings:

  • Headless: false (browser visible unless explicitly requested otherwise)
  • Slow Motion: 100ms for visibility
  • Timeout: 30s
  • Screenshots: Saved to /tmp/

Project Structure

playwright-skill/
├── .claude-plugin/
│   ├── plugin.json          # Plugin metadata for distribution
│   └── marketplace.json     # Marketplace configuration
├── skills/
│   └── playwright-skill/    # The actual skill (Claude discovers this)
│       ├── SKILL.md         # What Claude reads
│       ├── run.js           # Universal executor (proper module resolution)
│       ├── package.json     # Dependencies & setup scripts
│       └── lib/
│           └── helpers.js   # Optional utility functions
│       └── API_REFERENCE.md # Full Playwright API reference
├── README.md                # This file - user documentation
├── CONTRIBUTING.md          # Contribution guidelines
└── LICENSE                  # MIT License

Advanced Usage

Claude will automatically load API_REFERENCE.md when needed for comprehensive documentation on selectors, network interception, authentication, visual regression testing, mobile emulation, performance testing, and debugging.

Dependencies

  • Node.js
  • Playwright (installed via npm run setup)
  • Chromium (installed via npm run setup)

Troubleshooting

Playwright not installed? Navigate to the skill directory and run npm run setup.

Module not found errors? Ensure automation runs via run.js, which handles module resolution.

Browser doesn't open? Verify headless: false is set. The skill defaults to visible browser unless headless mode is requested.

Install all browsers? Run npm run install-all-browsers from the skill directory.

What is a Skill?

Agent Skills are folders of instructions, scripts, and resources that agents can discover and use to do things more accurately and efficiently. When you ask Claude to test a webpage or automate browser interactions, Claude discovers this skill, loads the necessary instructions, executes custom Playwright code, and returns results with screenshots and console output.

This Playwright skill implements the open Agent Skills specification, making it compatible across agent platforms.

Contributing

Contributions are welcome. Fork the repository, create a feature branch, make your changes, and submit a pull request. See CONTRIBUTING.md for details.

Learn More

License

MIT License - see LICENSE file for details.

View source on GitHub

Related

Playwright
Plugins
Playwright Browser Automation
MCP Servers

You might also like

Web App Testing
Skills
Playwright Pro
Skills
Browser Automation
Skills