AndyShiu

Claude Skill Playwright Browser — Testing skill for Claude Code

Testing community

Claude Code skill: a background Playwright browser for screenshots (desktop/tablet/mobile), frontend health checks, visual diffs, scripted UI flows and logged-in pages — in any project.

How to install Claude Skill Playwright Browser

This entry records only its repository, not the path inside it, so there is no exact command to give. Open AndyShiu/claude-skill-playwright-browser and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Skill Playwright Browser does

Claude Code skill: a background Playwright browser for screenshots (desktop/tablet/mobile), frontend health checks, visual diffs, scripted UI flows and logged-in pages — in any project. ｜讓 Claude Code 擁有背景瀏覽器：多尺寸截圖、前端健檢、視覺比對、操作流程與登入頁面，適用任何專案。

Alternatives in Testing

Playwright — claude-plugins-official Browser automation, E2E testing, screenshots 29.4k ★
Spectra App — Spec-driven development for coding agents — a desktop app, a CLI, and skills for Codex, Claude Code, Cursor, C 735 ★
Web Design — A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second 686 ★

README

claude-skill-playwright-browser

**English** | [繁體中文](README.zh-TW.md)

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Release](https://img.shields.io/github/v/release/AndyShiu/claude-skill-playwright-browser)](https://github.com/AndyShiu/claude-skill-playwright-browser/releases) ![Node.js ≥18](https://img.shields.io/badge/node-%E2%89%A518-339933?logo=node.js&logoColor=white) ![Playwright 1.63](https://img.shields.io/badge/playwright-1.63-2EAD33?logo=playwright&logoColor=white) ![Platforms](https://img.shields.io/badge/platform-macOS%20%7C%20Linux%20%7C%20Windows-lightgrey) ![Claude Code skill](https://img.shields.io/badge/Claude%20Code-skill-D97757)

Gives [Claude Code](https://claude.com/claude-code) a **browser that runs in the background**. Ask in plain language — "screenshot the homepage on mobile", "why does the Submit button do nothing on this page?", "health-check the checkout page" — and Claude opens a browser, clicks around, takes screenshots, runs checks, and hands you the results and files. It never touches the browser you're using, and it works in any project (frontend, backend, even non-Node projects).

What it does

Feature	Details
📸 Screenshots	Desktop / tablet / mobile, full page or a single element, many pages in one batch
🩺 Frontend health check	Console errors, failed API calls (4xx/5xx), broken images, broken links, mobile layout overflow (and which element causes it), accessibility issues (axe), performance (LCP / CLS)
🔍 Visual comparison	Save a baseline before a CSS change, compare afterwards, get a diff image with changes highlighted in red
🧭 UI flows	Log in, click through menus, fill forms, page through lists, assert results — with a screenshot at each step and an automatic screenshot on failure
🔐 Sites that need login	You log in once yourself; Claude then reuses that session in the background (your password is never stored)
🧪