hyva-playwright-test — скилл для Claude Code: что делает и установка
Помогает писать e2e-тесты Playwright под витрины Hyvä на Magento с Alpine.js. Решает частые сбои строгого режима локаторов из-за скрытых в DOM элементов.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-codeЧто делает hyva-playwright-test
Скилл задаёт правила поиска элементов на страницах Hyvä для Magento, где вместо Luma с KnockoutJS работают Alpine.js и Tailwind CSS. Главная трудность здесь кроется в директиве x-show. Она оставляет скрытые блоки внутри разметки, из-за чего строгий режим Playwright падает на селекторах вроде обычной плашки ошибки. Текст учит привязывать сообщения к контейнеру #messages и предпочитать локаторы ролей.
Внутри собраны шаблоны работы со спецификой Alpine.js: ожидание появления блоков с x-defer="intersect", подгрузка узлов по клику для x-if и проверка асинхронных счётчиков корзины через веб-утверждения с таймаутом. Использование псевдокласса :visible скилл считает плохой практикой и предлагает заменять его селекторами атрибутов или ролей.
Какие задачи решает
- настроить локаторы Playwright под разметку витрин Hyvä
- устранить ошибки множественного совпадения селекторов в строгом режиме
- тестировать асинхронные обновления корзины на Alpine.js
- составить Page Object с учётом отложенной загрузки x-defer
Примеры запросов агенту
- Напиши e2e-тест Playwright для добавления товара в корзину на странице Hyvä
- Проверь селектор сообщения об ошибке для формы авторизации в Hyvä
- Покажи паттерн клика по меню с директивой x-show для Playwright
Как установить hyva-playwright-test
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-code2Вручную: положить файлы
~/.claude/skills/hyva-playwright-test/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hyva-playwright-test/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a codex2Вручную: положить файлы
.agents/skills/hyva-playwright-test/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a cursor2Вручную: положить файлы
.cursor/skills/hyva-playwright-test/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-playwright-test2Вручную: положить файлы
.github/skills/hyva-playwright-test/SKILL.md1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a gemini-cli2Командой платформы
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-playwright-testВручную: положить файлы
.devin/skills/hyva-playwright-test/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о hyva-playwright-test
Как установить hyva-playwright-test в Claude Code?
Выполните в терминале команду npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-code. Файлы скилла сохранятся в локальную конфигурацию агента.
Что делает hyva-playwright-test?
Скилл подсказывает правила создания надёжных e2e-тестов на Playwright для страниц магазина на базе Hyvä. Он объясняет, как обходить ложные срабатывания локаторов на скрытых элементах Alpine.js.
Почему скилл запрещает использовать голый селектор .message.error?
В шаблонах Hyvä такие элементы присутствуют в DOM постоянно и скрываются через x-show. Если не ограничить поиск контейнером #messages, строгий режим Playwright завершится ошибкой из-за нескольких найденных узлов.
