메뉴
End-to-end (E2E) testing patterns for user journeys, browser automation, UI state, and production-like environment validation. Use when testing the system as a black box from the user's perspective.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when building or debugging apps that call the Claude API — implementing tool use, streaming, vision, prompt caching, batch processing, extended thinking, or an agentic loop with the Anthropic SDK.
Use when configuring Claude Code — installing skills or agents, writing hook configurations, setting up tool permissions, registering MCP servers, or authoring CLAUDE.md project instructions.
Use when writing Dockerfiles, setting up docker-compose for local dev, configuring Kubernetes resources (Deployment, Service, Ingress, HPA), sizing pod resource limits, or packaging a service with Helm.
Use when designing a schema, adding indexes to fix slow queries, writing a zero-downtime migration, diagnosing N+1 issues with EXPLAIN ANALYZE, or configuring connection pooling for a PostgreSQL-backed service.
Use when adding feature flag support to a service, designing a percentage-based rollout, setting up A/B experiments or multivariate tests, choosing between LaunchDarkly, Unleash, and OpenFeature, writing tests for flag-gated code, or managing flag lifecycle and cleanup.
Use when designing React component structure, deciding where state should live, implementing data fetching with TanStack Query, building validated forms, or optimizing rendering performance.
| name | end-to-end-testing |
| description | End-to-end (E2E) testing patterns for user journeys, browser automation, UI state, and production-like environment validation. Use when testing the system as a black box from the user's perspective. |
Validate complete user workflows across the entire stack, ensuring that UI components, APIs, and databases work together in a production-like environment.
| Type | Example | Stability | Recommendation |
|---|---|---|---|
| User-facing (ARIA) | getByRole("button", { name: "Submit" }) | High | Primary: Tests what the user sees |
| Data attribute | getByTestId("submit-btn") | Medium | Secondary: Use when ARIA is ambiguous |
| CSS Class/ID | locator(".btn-primary") | Low | Avoid: Highly coupled to styling |
| Concern | Strategy |
|---|---|
| Test Data | Use a dedicated setup API or direct DB seed before each run |
| State Isolation | Clean cookies, localStorage, and indexedDB between tests |
| Waiting | Use auto-waiting or "Wait for State" (loading spinner gone) over hard sleeps |
BAD
// Flaky and coupled to implementation
await page.click('.login-submit');
await page.waitForTimeout(5000);
expect(await page.url()).toContain('/dashboard');
GOOD
// Stable and user-centric
const submitBtn = page.getByRole('button', { name: /log in/i });
await submitBtn.click();
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByText(/welcome back/i)).toBeVisible();
| Risk | Solution |
|---|---|
| Animation lag | Disable CSS animations in the test environment |
| Third-party scripts | Block or stub chat widgets, ads, and telemetry |
| Race conditions | Assert state changes (e.g. "button is hidden") before next step |