用途：为 Hyvä 主题（用 Alpine.js + Tailwind CSS 替代 Luma 的 KnockoutJS/RequireJS/jQuery）编写 Playwright 端到端测试、创建页面对象或调试测试时使用。Hyvä 模板会把隐藏元素散布在 DOM 中，而 Playwright 的 strict mode 拒绝匹配多个元素的定位器，二者冲突是该技能的核心问题。
主要能力：第一规则是处理隐藏的 Alpine 元素。x-show 隐藏元素虽不可见但仍存在，裸选择器如 .message.error 会同时匹配隐藏与可见实例，导致 strict mode 违规。页面级消息应限定在 #messages 容器内：page.locator('#messages .message.success') 和 page.locator('#messages .message-error, #messages .message.error')。不要使用裸 .message、.message.error、.message.success 或 div.message。例外是搜索无结果的内联提示 .message.notice，它渲染在 #maincontent 内而非 #messages 容器中，此时裸类选择器正确。
选择器策略：优先使用 getByRole()，其次 getByLabel()（表单控件）、getByText()（限定容器内）、getByPlaceholder()、getByAltText()、getByTestId()，CSS 选择器为最后手段且应优先 aria-* 属性并限定唯一容器。避免 :visible 伪选择器，除非万不得已。
Alpine.js 交互要点：x-defer="intersect" 需先 scrollIntoViewIfNeeded()；x-if 模板元素在条件成立前不存在，需先点击触发者；x-model 输入在提交后会被清空，不要提交后再断言其值；x-text/x-html 异步更新需用带超时的 web-first 断言，如 not.toHaveText('0', { timeout: 15_000 })，不要用 waitForTimeout()；x-show 子菜单需先 hover 父元素；Alpine 表单揭示需在勾选复选框后 waitFor({ state: 'visible' })；输入框上按 Enter 可能意外提交表单，优先显式 .click() 提交按钮。
断言：始终使用会自动重试的 web-first 断言，如 await expect(loc).toBeVisible() 与 toContainText()，而非先取值再判断。
还提供 Hyvä 与 Luma 的选择器差异对照，如分页用 getByRole('navigation', { name: 'pagination' })、活动页用 [aria-current="page"]、购物车角标用 #menu-cart-icon > span[x-text="summaryCount"]、成功消息用 #messages .message.success 等。
参考文件按需加载：page-object-patterns.md、selector-patterns.md（通用），以及 cart-patterns.md、product-patterns.md、account-patterns.md、category-patterns.md（按测试页面加载）。限制：该资料聚焦选择器与 Alpine 交互模式，未提供安装命令、运行配置或完整代码示例；未提及收费、价格或效果保证，这些暂未提供。