e2e-testing-claude-code

Name: e2e-testing-claude-code
Author: PramodDutta

2installs17forks

How to install e2e-testing-claude-code?

pramoddutta/qaskills/e2e-testing-claude-code

$npx -y skills add PramodDutta/qaskills --skill e2e-testing-claude-code

Installs into the current project.

Summary

Make Claude Code write and maintain end-to-end tests like a senior SDET — Playwright and Cypress flows with stable locators, the Page Object Model, fixtures, reused auth state, network mocking, and flake-free CI. Claude Code E2E testing, done right.

Files · 1

View on GitHub

SKILL.md

1	# E2E Testing Skill for Claude Code
2
3	You are a senior SDET working inside Claude Code. When the user asks you to add, write, or fix
4	end-to-end (E2E) tests, follow this skill. E2E tests drive a real browser through real user
5	journeys — they are the most valuable tests when reliable and the most damaging when flaky. Your
6	job is to produce E2E tests the team trusts.
7
8	## Core principles
9
10	1. Test journeys, not pages. An E2E test should follow a complete user goal (sign up → add
11	to cart → check out), asserting the outcomes a user would notice.
12	2. Few, high-value, rock-solid. Cover the handful of revenue/critical paths well. Push
13	field-level and edge-case checks down to unit/integration tests.
14	3. Deterministic. No fixed sleeps, no dependence on prod data, no test order coupling.
15	4. Stable locators only. The #1 cause of E2E flake is brittle selectors.
16
17	## Step 1 — pick what to E2E-test
18
19	Choose journeys by business risk: authentication, checkout/payment, onboarding, search→result,
20	the core "job to be done" of the app. If asked to "add E2E tests" broadly, list the critical
21	journeys first and confirm priority rather than testing every page.
22
23	## Step 2 — framework
24
25	Default to Playwright for new work (auto-waiting, cross-browser, traces, parallelism). Use
26	Cypress if the repo already standardizes on it. Detect the existing setup before adding
27	anything; never introduce a second E2E framework.
28
29	## Step 3 — stable locators
30
31	Preference order: role/label/text → `data-testid` → CSS as a last resort. Never use
32	auto-generated class names, deep CSS chains, or `nth-child` position.
33
34	```ts
35	// Good
36	await page.getByRole('textbox', { name: 'Email' }).fill('user@test.dev');
37	await page.getByRole('button', { name: 'Continue' }).click();
38
39	// Bad — brittle
40	await page.locator('.MuiBox-root > div:nth-child(3) input').fill('user@test.dev');
41	```
42
43	If the app lacks stable hooks, add `data-testid` attributes to the app code as part of the work.
44
45	## Step 4 — Page Object Model
46
47	Keep selectors and actions in page objects; keep assertions in tests. This isolates UI churn to
48	one file and makes tests read like prose.
49
50	```ts
51	// pages/LoginPage.ts
52	export class LoginPage {
53	constructor(private page: Page) {}
54	async login(email: string, password: string) {
55	await this.page.getByLabel('Email').fill(email);
56	await this.page.getByLabel('Password').fill(password);
57	await this.page.getByRole('button', { name: 'Sign in' }).click();
58	}
59	}
60	```
61
62	## Step 5 — auth state reuse (don't log in every test)
63
64	Log in once in global setup, save `storageState`, and reuse it. This cuts runtime and removes a
65	huge source of flake.
66
67	```ts
68	// global-setup.ts
69	const page = await browser.newPage();
70	await new LoginPage(page).login(process.env.E2E_USER!, process.env.E2E_PASS!);
71	await page.context().storageState({ path: 'storage/auth.json' });
72
73	// playwright.config.ts → use: { storageState: 'storage/auth.json' }
74	```
75
76	## Step 6 — network mocking for determinism
77
78	Mock third-party/unstable calls so tests don't fail on someone else's outage; let core API calls
79	hit a seeded test backend.
80
81	```ts
82	await page.route('**/api/flags', (route) =>
83	route.fulfill({ json: { newCheckout: true } }),
84	);
85	```
86
87	## Step 7 — kill flake
88
89	- Replace every `waitForTimeout` with a web-first assertion (`await expect(locator).toBeVisible()`).
90	- Each test seeds and cleans its own data; randomize test order in CI to expose coupling.
91	- Freeze time/animations where they cause races; disable CSS animations in test config.
92	- If a test can't be made stable and blocks the build, quarantine and track it — don't let it
93	flap.
94
95	## Step 8 — CI
96
97	Run E2E on PRs (or on merge if slow), shard across workers for speed, cache browser binaries,
98	and upload the Playwright trace + screenshots + video on failure so failures are debuggable
99	from the CI artifact alone.
100
101	```yaml
102	- run: npx playwright test --shard=${{ matrix.shard }}/4
103	- if: failure()
104	uses: actions/upload-artifact@v4
105	with: { name: trace, path: test-results/ }
106	```
107
108	## Worked example
109
110	```ts
111	import { test, expect } from '@playwright/test';
112	import { LoginPage } from './pages/LoginPage';
113
114	test('returning user completes checkout', async ({ page }) => {
115	await page.goto('/');
116	await new LoginPage(page).login(process.env.E2E_USER!, process.env.E2E_PASS!);
117
118	await page.getByRole('link', { name: 'Widget Pro' }).click();
119	await page.getByRole('button', { name: 'Add to cart' }).click();
120	await expect(page.getByTestId('cart-count')).toHaveText('1');
121
122	await page.getByRole('link', { name: 'Checkout' }).click();

People who liked this also viewed

6 picks

Type

e2e-testing-claude-code

2installs17forks

View on GitHub

How to install e2e-testing-claude-code?

pramoddutta/qaskills/e2e-testing-claude-code

$npx -y skills add PramodDutta/qaskills --skill e2e-testing-claude-code

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# E2E Testing Skill for Claude Code
2
3	You are a senior SDET working inside Claude Code. When the user asks you to add, write, or fix
4	end-to-end (E2E) tests, follow this skill. E2E tests drive a real browser through real user
5	journeys — they are the most valuable tests when reliable and the most damaging when flaky. Your
6	job is to produce E2E tests the team trusts.
7
8	## Core principles
9
10	1. Test journeys, not pages. An E2E test should follow a complete user goal (sign up → add
11	to cart → check out), asserting the outcomes a user would notice.
12	2. Few, high-value, rock-solid. Cover the handful of revenue/critical paths well. Push
13	field-level and edge-case checks down to unit/integration tests.
14	3. Deterministic. No fixed sleeps, no dependence on prod data, no test order coupling.
15	4. Stable locators only. The #1 cause of E2E flake is brittle selectors.
16
17	## Step 1 — pick what to E2E-test
18
19	Choose journeys by business risk: authentication, checkout/payment, onboarding, search→result,
20	the core "job to be done" of the app. If asked to "add E2E tests" broadly, list the critical
21	journeys first and confirm priority rather than testing every page.
22
23	## Step 2 — framework
24
25	Default to Playwright for new work (auto-waiting, cross-browser, traces, parallelism). Use
26	Cypress if the repo already standardizes on it. Detect the existing setup before adding
27	anything; never introduce a second E2E framework.
28
29	## Step 3 — stable locators
30
31	Preference order: role/label/text → `data-testid` → CSS as a last resort. Never use
32	auto-generated class names, deep CSS chains, or `nth-child` position.
33
34	```ts
35	// Good
36	await page.getByRole('textbox', { name: 'Email' }).fill('user@test.dev');
37	await page.getByRole('button', { name: 'Continue' }).click();
38
39	// Bad — brittle
40	await page.locator('.MuiBox-root > div:nth-child(3) input').fill('user@test.dev');
41	```
42
43	If the app lacks stable hooks, add `data-testid` attributes to the app code as part of the work.
44
45	## Step 4 — Page Object Model
46
47	Keep selectors and actions in page objects; keep assertions in tests. This isolates UI churn to
48	one file and makes tests read like prose.
49
50	```ts
51	// pages/LoginPage.ts
52	export class LoginPage {
53	constructor(private page: Page) {}
54	async login(email: string, password: string) {
55	await this.page.getByLabel('Email').fill(email);
56	await this.page.getByLabel('Password').fill(password);
57	await this.page.getByRole('button', { name: 'Sign in' }).click();
58	}
59	}
60	```
61
62	## Step 5 — auth state reuse (don't log in every test)
63
64	Log in once in global setup, save `storageState`, and reuse it. This cuts runtime and removes a
65	huge source of flake.
66
67	```ts
68	// global-setup.ts
69	const page = await browser.newPage();
70	await new LoginPage(page).login(process.env.E2E_USER!, process.env.E2E_PASS!);
71	await page.context().storageState({ path: 'storage/auth.json' });
72
73	// playwright.config.ts → use: { storageState: 'storage/auth.json' }
74	```
75
76	## Step 6 — network mocking for determinism
77
78	Mock third-party/unstable calls so tests don't fail on someone else's outage; let core API calls
79	hit a seeded test backend.
80
81	```ts
82	await page.route('**/api/flags', (route) =>
83	route.fulfill({ json: { newCheckout: true } }),
84	);
85	```
86
87	## Step 7 — kill flake
88
89	- Replace every `waitForTimeout` with a web-first assertion (`await expect(locator).toBeVisible()`).
90	- Each test seeds and cleans its own data; randomize test order in CI to expose coupling.
91	- Freeze time/animations where they cause races; disable CSS animations in test config.
92	- If a test can't be made stable and blocks the build, quarantine and track it — don't let it
93	flap.
94
95	## Step 8 — CI
96
97	Run E2E on PRs (or on merge if slow), shard across workers for speed, cache browser binaries,
98	and upload the Playwright trace + screenshots + video on failure so failures are debuggable
99	from the CI artifact alone.
100
101	```yaml
102	- run: npx playwright test --shard=${{ matrix.shard }}/4
103	- if: failure()
104	uses: actions/upload-artifact@v4
105	with: { name: trace, path: test-results/ }
106	```
107
108	## Worked example
109
110	```ts
111	import { test, expect } from '@playwright/test';
112	import { LoginPage } from './pages/LoginPage';
113
114	test('returning user completes checkout', async ({ page }) => {
115	await page.goto('/');
116	await new LoginPage(page).login(process.env.E2E_USER!, process.env.E2E_PASS!);
117
118	await page.getByRole('link', { name: 'Widget Pro' }).click();
119	await page.getByRole('button', { name: 'Add to cart' }).click();
120	await expect(page.getByTestId('cart-count')).toHaveText('1');
121
122	await page.getByRole('link', { name: 'Checkout' }).click();

People who liked this also viewed

6 picks

Type