e2e-test-writing

作成者: shopify

高品質なPlaywright E2EテストをHydrogen向けに作成するためのガイド。ユーザーが「e2eテストを書いて」「playwrightテストを追加して」「この機能をテストして」と依頼した場合に使用します。

npx skills add https://github.com/shopify/hydrogen --skill e2e-test-writing

/e2e-test-writing - E2E Test Writing for Hydrogen

Use this skill when implementing or reviewing Playwright E2E tests in this repository.

Syntax

/e2e-test-writing <task>

Examples:

  • /e2e-test-writing add recipe coverage for cart drawer quantity changes
  • /e2e-test-writing review locator quality in e2e/tests/cart.test.ts

Source of Truth

  • Follow e2e/CLAUDE.md for all active test patterns and conventions.
  • Do not duplicate large guidance here; keep this skill as the entry point.

Core Expectations

  1. Prefer role-based, accessibility-first selectors.
  2. Assert user-visible behavior, not implementation details.
  3. Wait for visible effects (expect, expect.poll), never arbitrary timeouts.
  4. Keep tests isolated and organize shared setup with beforeEach when it improves clarity.
  5. Run Playwright tests in headless mode.

Workflow

  1. Read e2e/CLAUDE.md before writing tests.
  2. Implement or update tests with user-centric assertions.
  3. Improve accessibility markup when it enables stronger locators.
  4. Run targeted Playwright tests first, then broader suites if needed.

Verification Commands

pnpm exec playwright test --project=skeleton

Use narrower test paths during iteration, then run the appropriate full project suite before finishing.

shopifyのその他のスキル

agent-device
shopify
スナップショットベースの座標を使用してiOSシミュレーターまたはAndroidエミュレーター/デバイスと対話します。アクセシビリティツリースナップショットを使用して要素を正確にターゲットし、…
official
analyze-feedback
shopify
GitHub Actionsのワークフロー実行からエージェントフィードバックアーティファクトを分析し、実用的な学びを抽出して、スキルファイルとCLAUDE.mdに組み込みます。追跡…
official
fix-github-issue
shopify
GitHubのIssueを修正するための完全なワークフロー - 問題の理解、再現、根本原因の診断、修正、iOS/Androidシミュレーターでのテスト、レビュー、PRの作成
official
review-and-test
shopify
FlashListのPRまたはブランチをレビューし、単体テストを実行し、iOSシミュレーターでテストし、RTL/LTRの動作を確認します。fix-github-issueスキルとコンテキストを共有します。
official
triage-issue
shopify
GitHubのIssueをトリアージし、優先度(P0/P1/P2)を分類し、重複を検索してラベルを適用します。
official
upgrade-react-native
shopify
React Nativeのフィクスチャアプリを新しいバージョンにアップグレードします。JS依存関係、Android(Gradle、Kotlin、SDK)、iOS(Podfile、pbxproj)、Metro設定、サードパーティ…をカバーします。
official
hydrogen-dev-workflow
shopify
ShopifyのHydrogenフレームワーク向け開発ワークフローガイド。テスト、アップグレード、レシピ、PR規約、アナリティクスアーキテクチャ、CLIツールなどをカバー。
official
hydrogen-release-process
shopify
ShopifyのHydrogenフレームワークのリリースプロセスガイド。完全なリリースフロー(標準、バックフィックス、スナップショット)、手動と自動の手順、changelog.json…をカバーしています。
official