hyva-playwright-test — Claude Code skill: what it does, how to install
Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. It resolves locator conflicts caused by hidden DOM elements.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-codeWhat hyva-playwright-test does
The skill outlines testing strategies for Hyvä storefronts on Magento, where Alpine.js and Tailwind CSS replace Luma's default stack. A frequent stumbling block is Playwright strict mode failing on generic selectors. Alpine templates retain invisible elements like error messages in the DOM via x-show, producing multiple locator matches. Scoping flash notifications directly to #messages fixes this failure.
Inside, the skill details workarounds for Alpine lifecycle states. It explains how to scroll elements into view before evaluating x-defer="intersect" attributes and how to wait for template tags controlled by x-if. Relying on the :visible pseudo-class is explicitly discouraged in favor of container scoping and ARIA role locators.
What it helps with
- configure Playwright locators for Hyvä Magento storefronts
- fix locator strict mode errors caused by hidden Alpine.js elements
- write assertions for asynchronous Alpine.js cart count updates
- handle delayed element rendering triggered by x-defer and x-if
Example prompts for the agent
- Write a Playwright test for adding a configurable product to cart on Hyvä
- Fix strict mode locator issues with error messages on a Hyvä login form
- Show the recommended locator pattern for Hyvä pagination links
How to install hyva-playwright-test
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-code2Manually: put the files in place
~/.claude/skills/hyva-playwright-test/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/hyva-playwright-test/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a codex2Manually: put the files in place
.agents/skills/hyva-playwright-test/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a cursor2Manually: put the files in place
.cursor/skills/hyva-playwright-test/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-playwright-test2Manually: put the files in place
.github/skills/hyva-playwright-test/SKILL.md1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a gemini-cli2Platform CLI
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-playwright-testManually: put the files in place
.devin/skills/hyva-playwright-test/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about hyva-playwright-test
How to install hyva-playwright-test in Claude Code?
Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test -a claude-code in your terminal. This downloads and links the skill configuration to your agent.
What does hyva-playwright-test do?
It provides practical patterns for building resilient Playwright tests on Hyvä themes. The guidance focuses on handling Alpine.js DOM behavior and avoiding broken selectors.
Why does hyva-playwright-test advise against using :visible selectors?
The skill treats :visible as an unreliable workaround per Playwright guidance. It directs you to scope selectors to parent containers or use role and attribute locators instead.
