Playwright Skill

Универсальная автоматизация Playwright для кодирующих агентов

Agent Skill, позволяющий кодирующим агентам писать и выполнять автоматизацию Playwright на лету — от простых тестов страниц до сложных многошаговых процессов. Также доступен в виде Claude Code Plugin для удобной установки.

Claude самостоятельно решает, когда использовать этот навык, исходя из ваших потребностей в автоматизации браузера, загружая только минимально необходимую информацию для конкретной задачи.

Создано с помощью Claude Code.

Возможности

• Любая задача автоматизации — Claude пишет пользовательский код для вашего конкретного запроса, не ограничиваясь заранее созданными скриптами
• Видимый браузер по умолчанию — Наблюдайте за автоматизацией в реальном времени с headless: false
• Портативный исполнитель — Запускает файловые и встроенные скрипты с устойчивым разрешением модулей
• Постепенное раскрытие — Краткий SKILL.md с полной справочной информацией по API загружается только при необходимости
• Безопасная очистка — Умное управление временными файлами без состояния гонки
• Комплексные помощники — Дополнительные утилитарные функции для часто встречающихся задач

Установка

Этот репозиторий содержит стандартный Agent Skill и обёртку в виде плагина Claude Code. Рекомендуемый метод установки — CLI skills от Vercel, который устанавливает навыки в стандартные расположения для поддерживаемых агентов.

Зачем нужен этот навык?

Используйте этот навык, когда агенту нужно написать настоящую программу на Playwright: циклы, утверждения, несколько контекстов, перехват сетевого трафика, скриншоты, видео или скрипт, который вы хотите сохранить и запускать повторно. Он также предоставляет обнаружение dev-сервера и небольшой набор целенаправленных помощников.

Для простого интерактивного просмотра начните с официального @playwright/cli от Microsoft и установите его навыки агента с помощью команды playwright-cli install --skills. Для управления браузером на основе инструментов с моментальными снимками доступности используйте playwright-mcp. Этот проект — вариант, ориентированный на код, когда сама автоматизация является полезным артефактом.

Понимание структуры

Этот репозиторий использует формат плагина с вложенной структурой:

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

Репозиторий хранит навык внутри директории skills/ плагина. Установщики автоматически обрабатывают такую структуру; ручное копирование — это запасной вариант для клиентов без установщика.

Вариант 1: Установка с помощью skills (Рекомендуется)

Установите глобально для вашего пользователя:

npx skills add lackeyjb/playwright-skill --skill playwright-skill --global --yes

Установите только для текущего проекта, опустив --global:

npx skills add lackeyjb/playwright-skill --skill playwright-skill --yes

Чтобы нацелиться на конкретных агентов, добавьте --agent, за которым следуют один или несколько идентификаторов агентов:

npx skills add lackeyjb/playwright-skill --skill playwright-skill --agent claude-code cursor --global --yes

После установки выполните настройку из директории установленного навыка:

npm run setup

Смотрите документацию CLI skills для поддерживаемых агентов и опций.

Вариант 2: Плагин Claude Code

Установите через систему плагинов Claude Code для автоматических обновлений и распространения в команде:

# 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

Проверьте установку, выполнив /help, чтобы убедиться, что навык доступен.

Вариант 3: Установка для других агентов

Agent Skills поддерживаются Claude Code, Cursor, GitHub Copilot, Codex, Gemini CLI, OpenCode и другими клиентами. Установите директорию, содержащую SKILL.md, используя задокументированный путь навыков клиента. Если у клиента нет установщика, скопируйте skills/playwright-skill/ в задокументированную директорию навыков и выполните там npm run setup.

Вариант 4: Загрузка релиза

1. Скачайте и распакуйте последний релиз с GitHub Releases
2. Скопируйте только папку skills/playwright-skill/ в:
   • Глобально: ~/.claude/skills/playwright-skill
   • Для проекта: /путь/к/вашему/проекту/.claude/skills/playwright-skill
3. Перейдите в директорию навыка и выполните настройку: bash cd ~/.claude/skills/playwright-skill # или путь к вашему проекту npm run setup

Проверка установки

Выполните /help, чтобы убедиться, что навык загружен, затем попросите Claude выполнить простую задачу в браузере, например "Проверить, загружается ли google.com".

Быстрый старт

После установки попросите вашего агента протестировать или автоматизировать задачу в браузере. Он напишет пользовательский код на Playwright, выполнит его и вернёт результаты со скриншотами и выводом консоли.

Примеры использования

Тестирование любой страницы

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

Визуальное тестирование

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

Тестирование взаимодействий

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

Валидация

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

Как это работает

1. Опишите, что вы хотите протестировать или автоматизировать
2. Ваш агент напишет пользовательский код Playwright для задачи
3. Универсальный исполнитель (run.js) запустит его с правильным разрешением модулей
4. Браузер откроется (видимый по умолчанию), и выполнится автоматизация
5. Результаты будут отображены с выводом в консоль и скриншотами

Конфигурация

Настройки по умолчанию:

• Безголовый режим: false (браузер виден, если явно не запрошено иное)
• Замедленное выполнение: 0 мс по умолчанию; установите SLOW_MO, если это полезно
• Скриншоты: Вспомогательные скриншоты сохраняются во временной директории ОС; установите PW_ARTIFACT_DIR, чтобы выбрать другое расположение

Структура проекта

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

Расширенное использование

Claude автоматически загрузит API_REFERENCE.md при необходимости для получения исчерпывающей документации по селекторам, перехвату сетевых запросов, аутентификации, визуальному регрессионному тестированию, эмуляции мобильных устройств, тестированию производительности и отладке.

Зависимости

• Node.js
• Playwright (устанавливается через npm run setup)
• Chromium (устанавливается через npm run setup)

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

Playwright не установлен? Перейдите в директорию скилла и выполните npm run setup.

Ошибки "Модуль не найден"? Убедитесь, что автоматизация запускается через run.js, который обрабатывает разрешение модулей.

Браузер не открывается? Проверьте, установлен ли параметр headless: false. Скилл по умолчанию использует видимый браузер, если не запрошен безголовый режим.

Установить все браузеры? Выполните npm run install-all-browsers из директории скилла.

Что такое скилл?

Agent Skills — это папки с инструкциями, скриптами и ресурсами, которые агенты могут обнаруживать и использовать для более точного и эффективного выполнения задач. Когда вы просите Claude протестировать веб-страницу или автоматизировать взаимодействие с браузером, Claude обнаруживает этот скилл, загружает необходимые инструкции, выполняет пользовательский код Playwright и возвращает результаты со скриншотами и выводом в консоль.

Этот скилл Playwright реализует открытую спецификацию Agent Skills, что делает его совместимым с различными платформами агентов.

Участие в разработке

Принимаются любые вклады. Сделайте форк репозитория, создайте ветку для новой функции, внесите изменения и отправьте пулл-реквест. Подробности см. в CONTRIBUTING.md.

Узнать больше

• Спецификация Agent Skills — открытая спецификация для скиллов агентов
• Документация по скиллам Claude Code
• Документация по плагинам Claude Code
• Маркетплейсы плагинов
• API_REFERENCE.md — полная документация по Playwright
• GitHub Issues

Лицензия

Лицензия MIT — подробности см. в файле LICENSE.