e2e-test-writing

Guía para escribir pruebas E2E de Playwright de alta calidad para Hydrogen. Úsala cuando el usuario solicite "escribir pruebas e2e", "agregar pruebas de playwright", "probar esta característica…

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.

Más skills de shopify

agent-device
shopify
Interactúa con el simulador de iOS o el emulador/dispositivo Android usando coordenadas basadas en instantáneas. Utiliza instantáneas del árbol de accesibilidad para apuntar con precisión a elementos, con…
official
analyze-feedback
shopify
Analiza los artefactos de retroalimentación del agente provenientes de ejecuciones de flujos de trabajo de GitHub Actions, extrae aprendizajes procesables e incorpóralos en archivos de habilidades y en CLAUDE.md. Realiza un seguimiento…
official
fix-github-issue
shopify
Flujo de trabajo completo para corregir un issue de GitHub: entender el problema, reproducir, diagnosticar la causa raíz, corregir, probar en simuladores de iOS/Android, revisar y crear un PR.
official
review-and-test
shopify
Revisar un PR o rama de FlashList, ejecutar pruebas unitarias, probar en el simulador de iOS y verificar el comportamiento RTL/LTR. Contexto compartido con la habilidad fix-github-issue.
official
triage-issue
shopify
Clasificar un problema de GitHub — prioridad (P0/P1/P2), buscar duplicados y aplicar etiquetas.
official
upgrade-react-native
shopify
Actualiza la aplicación de prueba de React Native a una nueva versión. Cubre dependencias JS, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), configuración de Metro y terceros…
official
hydrogen-dev-workflow
shopify
Guía de flujo de trabajo de desarrollo para el framework Hydrogen de Shopify. Cubre pruebas, actualizaciones, recetas, convenciones de PR, arquitectura de análisis, herramientas CLI y…
official
hydrogen-release-process
shopify
Guía del proceso de lanzamiento para el framework Hydrogen de Shopify. Cubre el flujo completo de lanzamiento (estándar, back-fix, snapshot), pasos manuales vs automáticos, changelog.json…
official