# playwright-visual-testing

Use Playwright MCP to inspect web pages, capture screenshots, and exercise user flows. Handy for checking UI changes and responsive layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-specialized-tools/skills/playwright-visual-testing/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/playwright-visual-testing

## What it does

This skill drives a browser through Playwright MCP. It can open a page, inspect its accessibility tree, interact with controls, resize the viewport, and capture screenshots of a page or a chosen element. That gives an agent a way to check forms and user flows against the visible interface.

The described workflow moves from navigation to a page snapshot and screenshot; an existing baseline can be used for comparison. Browser tools also cover going back and closing the current page. Playwright MCP server is required for these browser actions, so the skill alone does not provide browser control.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/playwright-visual-testing/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/playwright-visual-testing/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/playwright-visual-testing/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/playwright-visual-testing/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace playwright-visual-testing
```

2. **Manually: put the files in place**
- File: `.github/skills/playwright-visual-testing/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-specialized-tools/skills/playwright-visual-testing
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/playwright-visual-testing/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-specialized-tools/skills/playwright-visual-testing/SKILL.md

## When to use it
- capture a full-page or element screenshot
- exercise a form by entering text and clicking its button
- compare a page screenshot with a baseline
- check a layout at a different viewport size
- inspect page structure through accessibility data

## Example prompts
- Open the homepage, inspect its accessibility tree, then save a full-page screenshot.
- Test the email form by entering a value and submitting it.
- Resize the browser window and capture a screenshot of the header navigation.

## Similar
- [improve-codebase-architecture](https://affpapa.org/en/nevibecode/skills/improve-codebase-architecture.md) — skill · 1163035 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [tdd](https://affpapa.org/en/nevibecode/skills/tdd.md) — skill · 1141062 installs
- [skill-creator](https://affpapa.org/en/nevibecode/skills/skill-creator.md) — skill · 414180 installs
- [agent-browser](https://affpapa.org/en/nevibecode/skills/vercel-labs-agent-browser.md) — skill · 1200000 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 38 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md