Playwright Skill для Claude Code

Универсальная браузерная автоматизация как Claude Skill

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

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

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

Возможности

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

Установка

Репозиторий структурирован как Claude Code Plugin, содержащий скилл. Можно установить как плагин (рекомендуется) или извлечь как отдельный скилл.

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

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

Claude Code ожидает скиллы непосредственно в папках внутри .claude/skills/, поэтому ручная установка требует извлечения вложенной папки скилла.

Вариант 1: Установка через плагин (рекомендуется)

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

# Добавить репозиторий как маркетплейс
/plugin marketplace add lackeyjb/playwright-skill

# Установить плагин
/plugin install playwright-skill@playwright-skill

# Перейти в директорию скилла и запустить настройку
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

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

Вариант 2: Установка как отдельного скилла

Для установки без системы плагинов извлеките только папку скилла:

Глобальная установка (доступна везде):

# Клонировать во временное место
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Скопировать только папку скилла в глобальную директорию скиллов
mkdir -p ~/.claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill ~/.claude/skills/

# Перейти в скилл и запустить настройку
cd ~/.claude/skills/playwright-skill
npm run setup

# Удалить временные файлы
rm -rf /tmp/playwright-skill-temp

Установка для конкретного проекта:

# Клонировать во временное место
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Скопировать только папку скилла в проект
mkdir -p .claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill .claude/skills/

# Перейти в скилл и запустить настройку
cd .claude/skills/playwright-skill
npm run setup

# Удалить временные файлы
rm -rf /tmp/playwright-skill-temp

Почему такая структура? Формат плагина требует директории skills/ для организации нескольких скиллов внутри плагина. При установке как отдельного скилла нужно только содержимое внутренней папки skills/playwright-skill/.

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

1. Скачайте и распакуйте последний релиз из GitHub Releases
2. Скопируйте только папку skills/playwright-skill/ в:
   • Глобально: ~/.claude/skills/playwright-skill
   • Для проекта: /path/to/your/project/.claude/skills/playwright-skill
3. Перейдите в директорию скилла и запустите настройку:
   bashКопировать

   cd ~/.claude/skills/playwright-skill  # или путь к вашему проекту
   npm run setup

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

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

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

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

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

Тестирование страниц

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

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

Валидация

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

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

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

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

• Headless: false (браузер видимый, если явно не указано иное)
• Slow Motion: 100ms для наглядности
• Timeout: 30s
• Скриншоты: сохраняются в /tmp/

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