Hyva Playwright Test

If you're writing Playwright tests for Hyvä Magento storefronts, this fixes the pain points you'll hit in the first hour. Hyvä replaces Knockout with Alpine.js, which scatters hidden x-show elements throughout the DOM that break Playwright's strict mode. The skill documents the essential workarounds: scoping message selectors to #messages, handling x-defer lazy loading with scrollIntoViewIfNeeded, waiting for Alpine's async updates with proper timeouts instead of sleep calls. It pushes you toward getByRole over CSS selectors and includes before/after examples for common gotchas like cart badges, filters, and pagination. The reference files show actual page object patterns if you need working code to copy.

skills.sh installs: 1.3K
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-playwright-test --agent claude-code

Installs into .claude/skills of the current project.

Files

Writing Playwright Tests for Hyvä + Alpine.js

Overview

Hyvä replaces Luma's KnockoutJS/RequireJS/jQuery with Alpine.js + Tailwind CSS. Playwright's strict mode (rejects locators matching multiple elements) conflicts with Alpine.js DOM patterns where hidden elements exist throughout the page. This skill documents pitfalls and solutions discovered while writing Playwright tests for Hyvä storefronts.

The #1 Rule: Hidden Alpine Elements

Hyvä templates scatter elements like <div x-show="displayErrorMessage" class="message error"> throughout the DOM. These are invisible but present, so a bare selector like .message.error matches both hidden and visible instances, causing Playwright strict mode violations.

Always scope page-level messages to the #messages container:

// WRONG — matches hidden Alpine x-show elements throughout DOM
await expect(page.locator('.message.success')).toContainText('Added to cart');
await expect(page.locator('.message-error')).toContainText('Error');

SKILL.md on GitHub