/ Каталог / Песочница / playwright-skill
← Все серверы ↗ GitHub
● Сообщество lackeyjb ⚡ Сразу

playwright-skill

автор lackeyjb · lackeyjb/playwright-skill

Claude writes and runs custom Playwright scripts on-demand — headed browser, real output — no pre-baked test library to memorize.

Rather than shipping fixed helper functions, this skill teaches Claude to write bespoke Playwright code per task and execute it via run.js. The browser runs visibly by default so you can watch. Playwright API docs load on-demand so Claude has context without blowing the window.

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

playwright-skill.replay ▶ готово
0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: playwright-skill

Write a smoke test for a signup flow on demand

👤 Developers who want a test without hand-writing Playwright ⏱ ~10 min beginner

Когда использовать: You pushed a new signup flow and want to know it still works end-to-end.

Предварительные требования
  • Node + Playwright installable — The skill will install browsers via npx playwright install if missing
Поток
  1. Describe the flow
    Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ Скопировано
    → Claude writes a Playwright script, runs it headed, reports pass/fail
  2. Debug failures interactively
    It failed at the email input — add a screenshot right before the error.✓ Скопировано
    → Next run captures and returns the screenshot

Итог: A one-off smoke test you can optionally save as a persistent spec.

Подводные камни
  • Selectors chosen are brittle (e.g. nth-child) — Ask Claude to prefer role/label selectors
Сочетать с: filesystem

Spot-check responsive rendering across 3 viewports

👤 Frontend devs validating a layout change ⏱ ~5 min beginner

Когда использовать: You changed the header and want to see how it renders on desktop, tablet, and mobile.

Поток
  1. Request screenshots
    Use playwright to screenshot localhost:3000 at 1440, 768, and 390 width. Save them.✓ Скопировано
    → 3 PNGs saved and paths returned

Итог: Three screenshots for quick visual review.

Подводные камни
  • Screenshots don't wait for fonts/images — Add a networkidle wait before snapping
Сочетать с: filesystem

Комбинации

Сочетайте с другими MCP — эффект x10

playwright-skill + filesystem

Save test specs and screenshots alongside the code they test

Write the smoke test and save it under tests/e2e/signup.spec.js.✓ Скопировано
playwright-skill + github

Run the test, fail the workflow, post results on the PR

Run the playwright spec against the deploy preview, then post results as a comment on PR #42.✓ Скопировано
playwright-skill + ios-simulator-skill

Playwright for web, ios-simulator-skill for native — use both in a cross-platform test session

Run the playwright web flow and the ios-simulator native flow in sequence, report both.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
Custom Playwright script generation task description Any browser automation ask 0
run.js executor script path After script generation 0
Headed/headless toggle flag CI vs local debugging 0

Стоимость и лимиты

Во что обходится

Квота API
None
Токенов на вызов
1-5k per test run, depending on how much Playwright reference Claude pulls in
Деньги
Free — you only need Node + Playwright browsers on disk
Совет
Keep prompts focused; don't ask for 'test everything' in one shot.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: No credentials in the skill. If your tests hit authenticated pages, keep creds in env vars — never in the generated script.
Исходящий трафик: Only to sites your test visits

Устранение неполадок

Частые ошибки и исправления

'browserType.launch: Executable doesn't exist'

Run npx playwright install chromium

Проверить: npx playwright --version
Selector fails intermittently

Switch to role/label selectors; add await expect(...).toBeVisible() waits.

Script hangs

Claude likely forgot to close the browser. Tell it to always wrap in try/finally with await browser.close().

Альтернативы

playwright-skill в сравнении

АльтернативаКогда использоватьКомпромисс
playwright MCPYou want structured MCP tools (click, fill, snapshot) rather than code generationMCP abstracts away code; this skill writes real scripts you can reuse
Puppeteer skills / chrome-devtools MCPChrome-only workflows, DevTools protocol featuresLess cross-browser

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills