skills.rest
gabriellst
gabriellstCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

e2e

Write and debug Playwright E2E tests with SDK-based fixtures, typed mocks, and trace diagnostics.

4|Updated Jul 30, 2026
Search Tags:#typescript#debugging#playwright#e2e testing#test fixtures#selectors#api mocking
One-click install
npx skills add https://github.com/gabriellst/codm --skill e2e-gabriellst
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e
Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/e2e
Command: npx skills add https://github.com/gabriellst/codm --skill e2e-gabriellst

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing end-to-end tests often fails through brittle selectors, hardcoded copy, slow timeouts on API errors, and fixtures that bypass the real application stack. This Skill codifies the conventions for the packages/e2e/ Playwright workspace so tests are fast, type-safe, and debuggable. ## Core Features & Use Cases - SDK-driven test setup: Build fixtures through real API calls via composable given helpers (onboardedUser, freshUser, userWithPatient) instead of UI click-paths or direct database access. - Type-safe mocking: Mock external services and SSE streams with mockRoute and mockSSE bound to SDK response types and query keys, so contract changes break compilation instead of silently passing. - Failure diagnostics: Debug failures through auto-attached network logs, fail-fast network.waitForFailure races, and Grafana Tempo trace queries that reveal the underlying business error. - Use Case: When adding a spec for a notifications page, register typed mocks for the notifications query key and SSE listener, create an onboarded user via the given fixture, navigate with the typed goto helper, and assert on i18n-sourced copy. ## Quick Start Write a Playwright e2e spec for the patients page using the given helpers and typed goto fixture from this skill.

Frequently Asked Questions about e2e

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a Playwright e2e test with API-based setup?▼

Create test data through SDK HTTP calls using given helpers like given.onboardedUser() or given.freshUser(), then navigate with the typed goto fixture. Reserve UI interaction only for the behavior the test asserts, never for fixture setup.

How do I mock API responses in Playwright with type safety?▼

Use mockRoute<ResponseType>(page, queryKey, data) where the data must satisfy the SDK response type, so contract changes fail compilation. For parameterized URLs use a glob string, and always register mocks before navigating.

Should Playwright tests use getByTestId or role-based selectors?▼

Use role, label, and text selectors such as getByRole('button', { name }) and getByLabel, never getByTestId. If a role-based selector is hard to write, fix the component by adding id, htmlFor, or aria-label attributes.

Why does my Playwright test wait 30 seconds instead of failing on an API error?▼

The test waits for a navigation that will never happen after a 4xx/5xx response. Wrap the wait in Promise.race with network.waitForFailure() so the test fails immediately when any API call errors.

How do I debug a failing e2e test when the HTTP response is a generic 500?▼

Check the auto-attached network log first, then query Grafana Tempo for the error trace to find the underlying business error such as ONBOARDING_NOT_FOUND or INVALID_STEP_TRANSITION. Finally read the use case code to understand why it occurred.

When should I mock endpoints versus test the real stack in e2e tests?▼

Always mock external services like the WhatsApp channel backend and SSE endpoints to prevent retry loops. Never mock internal API calls, since e2e tests exist to validate the real full stack through the same SDK the frontend uses.

Related Skills

Explore More Software Engineering Skills→
openmeterioopenmeterio
2.2k

api

Define API endpoints in TypeSpec and generate OpenAPI specs and SDKs.

Official
Advanced
NVIDIANVIDIA
3.2k

mcore-create-issue

Investigate failing GitHub Actions runs and file structured bug issues against NVIDIA/Megatron-LM.

Official
Intermediate
jrmatherlyjrmatherly
1

shipit-ai:ui-component

Generate React UI components with Storybook stories and unit tests.

Community
Intermediate
eleva-labseleva-labs

api-validate

Validate API implementations against OpenAPI specifications and contracts.

Official
Intermediate