hyva-playwright-test

SKILL.md

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.

Hyvä templates scatter elements like 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.

Never use: bare .message, .message.error, .message.success, or div.message as selectors.

Alpine.js コンポーネントを使用して、Hyvä テーマの Playwright テストを作成します。このスキルは、Hyvä Magento ストアフロントの Playwright テストで e2e テストを作成するとき、ページ オブジェクトを作成するとき、またはセレクターの問題をデバッグするときに使用する必要があります。トリガー フレーズには、「write playwright test」、「playwright alpine」、「test hyva page」、「e2e test」、「playwright selector」などがあります。 ソース: hyva-themes/hyva-ai-tools。

原文を見る