e2e-test-writing

Guia para escrever testes E2E Playwright de alta qualidade para Hydrogen. Use quando o usuário pedir para "escrever testes e2e", "adicionar testes playwright", "testar este recurso…

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.

Mais skills de shopify

agent-device
shopify
Interaja com o simulador iOS ou emulador/dispositivo Android usando coordenadas baseadas em snapshots. Utiliza snapshots da árvore de acessibilidade para segmentação precisa de elementos, com…
official
analyze-feedback
shopify
Analisar artefatos de feedback de agentes de execuções de fluxo de trabalho do GitHub Actions, extrair aprendizados acionáveis e incorporá-los em arquivos de habilidades e CLAUDE.md. Rastreia…
official
fix-github-issue
shopify
Fluxo de trabalho completo para corrigir um problema no GitHub - entender o problema, reproduzir, diagnosticar a causa raiz, corrigir, testar em simuladores iOS/Android, revisar e abrir um PR
official
review-and-test
shopify
Revise um PR ou branch do FlashList, execute testes unitários, teste no simulador iOS e verifique o comportamento RTL/LTR. Contexto compartilhado com a skill fix-github-issue.
official
triage-issue
shopify
Triar um problema do GitHub — classificar prioridade (P0/P1/P2), buscar por duplicatas e aplicar rótulos.
official
upgrade-react-native
shopify
Atualiza o aplicativo de teste React Native para uma nova versão. Abrange dependências JS, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), configuração do Metro e terceiros…
official
hydrogen-dev-workflow
shopify
Guia de fluxo de trabalho de desenvolvimento para o framework Hydrogen da Shopify. Aborda testes, atualizações, receitas, convenções de PR, arquitetura de analytics, ferramentas de CLI e…
official
hydrogen-release-process
shopify
Guia do processo de release para o framework Hydrogen da Shopify. Abrange o fluxo completo de release (padrão, back-fix, snapshot), etapas manuais vs automáticas, changelog.json…
official