e2e-test-writing

Guide pour rédiger des tests E2E Playwright de haute qualité pour Hydrogen. Utilisez lorsque l'utilisateur demande "écrire des tests e2e", "ajouter des tests playwright", "tester cette fonctionnalité…

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.

Plus de skills de shopify

agent-device
shopify
Interagir avec le simulateur iOS ou l'émulateur/appareil Android à l'aide de coordonnées basées sur des instantanés. Utilise des instantanés de l'arbre d'accessibilité pour un ciblage précis des éléments, avec…
official
analyze-feedback
shopify
Analyser les artefacts de feedback d’agent issus des exécutions de workflows GitHub Actions, extraire les enseignements exploitables et les intégrer dans les fichiers de compétences et CLAUDE.md. Suit…
official
fix-github-issue
shopify
Workflow complet pour corriger un problème GitHub - comprendre le problème, reproduire, diagnostiquer la cause racine, corriger, tester sur simulateurs iOS/Android, réviser et soumettre une PR
official
review-and-test
shopify
Examiner une PR ou une branche FlashList, exécuter les tests unitaires, tester sur le simulateur iOS, et vérifier le comportement RTL/LTR. Contexte partagé avec la compétence fix-github-issue.
official
triage-issue
shopify
Trier un problème GitHub — classer la priorité (P0/P1/P2), rechercher les doublons et appliquer des étiquettes.
official
upgrade-react-native
shopify
Mettre à niveau l'application de test React Native vers une nouvelle version. Couvre les dépendances JS, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), la configuration Metro et les tiers…
official
hydrogen-dev-workflow
shopify
Guide de workflow de développement pour le framework Hydrogen de Shopify. Couvre les tests, les mises à niveau, les recettes, les conventions de PR, l'architecture d'analyse, les outils CLI, et…
official
hydrogen-release-process
shopify
Guide du processus de publication pour le framework Hydrogen de Shopify. Couvre l'ensemble du flux de publication (standard, correctif rétroactif, snapshot), les étapes manuelles et automatiques, changelog.json…
official