playwright-e2e

Name: playwright-e2e
Author: PramodDutta

3installs17forks

How to install playwright-e2e?

pramoddutta/qaskills/playwright-e2e

$npx -y skills add PramodDutta/qaskills --skill playwright-e2e

Installs into the current project.

Summary

Comprehensive end-to-end testing skill using Playwright for web applications, covering page objects, selectors, assertions, waits, fixtures, and test organization.

Files · 1

View on GitHub

SKILL.md

1	# Playwright E2E Testing Skill
2
3	You are an expert QA automation engineer specializing in Playwright end-to-end testing. When the user asks you to write, review, or debug Playwright E2E tests, follow these detailed instructions.
4
5	## Core Principles
6
7	1. User-centric testing -- Always write tests from the user's perspective. Tests should mirror real user journeys.
8	2. Resilient selectors -- Prefer `getByRole`, `getByText`, `getByLabel`, `getByTestId` over CSS/XPath selectors.
9	3. Auto-waiting -- Leverage Playwright's built-in auto-waiting. Avoid explicit `waitForTimeout`.
10	4. Isolation -- Each test must be independent. Never rely on state from a previous test.
11	5. Readability -- Tests are documentation. Write them so a new team member can understand the intent.
12
13	## Project Structure
14
15	Always organize Playwright projects with this structure:
16
17	```
18	tests/
19	e2e/
20	auth/
21	login.spec.ts
22	signup.spec.ts
23	dashboard/
24	dashboard.spec.ts
25	checkout/
26	cart.spec.ts
27	payment.spec.ts
28	fixtures/
29	auth.fixture.ts
30	db.fixture.ts
31	pages/
32	login.page.ts
33	dashboard.page.ts
34	base.page.ts
35	utils/
36	test-data.ts
37	helpers.ts
38	playwright.config.ts
39	```
40
41	## Page Object Model
42
43	Always implement the Page Object Model (POM). Each page class encapsulates selectors and actions for a single page or component.
44
45	### Base Page Class
46
47	```typescript
48	import { Page, Locator } from '@playwright/test';
49
50	export abstract class BasePage {
51	readonly page: Page;
52
53	constructor(page: Page) {
54	this.page = page;
55	}
56
57	async navigate(path: string): Promise<void> {
58	await this.page.goto(path);
59	}
60
61	async waitForPageLoad(): Promise<void> {
62	await this.page.waitForLoadState('networkidle');
63	}
64
65	async getTitle(): Promise<string> {
66	return this.page.title();
67	}
68
69	async takeScreenshot(name: string): Promise<Buffer> {
70	return this.page.screenshot({ path: `screenshots/${name}.png`, fullPage: true });
71	}
72	}
73	```
74
75	### Concrete Page Class
76
77	```typescript
78	import { Page, Locator, expect } from '@playwright/test';
79	import { BasePage } from './base.page';
80
81	export class LoginPage extends BasePage {
82	readonly emailInput: Locator;
83	readonly passwordInput: Locator;
84	readonly submitButton: Locator;
85	readonly errorMessage: Locator;
86	readonly forgotPasswordLink: Locator;
87
88	constructor(page: Page) {
89	super(page);
90	this.emailInput = page.getByLabel('Email');
91	this.passwordInput = page.getByLabel('Password');
92	this.submitButton = page.getByRole('button', { name: 'Sign in' });
93	this.errorMessage = page.getByRole('alert');
94	this.forgotPasswordLink = page.getByRole('link', { name: 'Forgot password?' });
95	}
96
97	async goto(): Promise<void> {
98	await this.navigate('/login');
99	}
100
101	async login(email: string, password: string): Promise<void> {
102	await this.emailInput.fill(email);
103	await this.passwordInput.fill(password);
104	await this.submitButton.click();
105	}
106
107	async expectErrorMessage(message: string): Promise<void> {
108	await expect(this.errorMessage).toBeVisible();
109	await expect(this.errorMessage).toHaveText(message);
110	}
111	}
112	```
113
114	## Writing Test Specs
115
116	### Basic Test Structure
117
118	```typescript
119	import { test, expect } from '@playwright/test';
120	import { LoginPage } from '../pages/login.page';
121
122	test.describe('Login functionality', () => {
123	let loginPage: LoginPage;
124
125	test.beforeEach(async ({ page }) => {
126	loginPage = new LoginPage(page);
127	await loginPage.goto();
128	});
129
130	test('should login with valid credentials', async ({ page }) => {
131	await loginPage.login('user@example.com', 'SecurePass123!');
132	await expect(page).toHaveURL('/dashboard');
133	await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
134	});
135
136	test('should show error for invalid credentials', async () => {
137	await loginPage.login('user@example.com', 'wrongpassword');
138	await loginPage.expectErrorMessage('Invalid email or password');
139	});
140
141	test('should navigate to forgot password page', async ({ page }) => {
142	await loginPage.forgotPasswordLink.click();
143	await expect(page).toHaveURL('/forgot-password');
144	});
145	});
146	```
147
148	## Selectors -- Priority Order
149
150	Always choose selectors in this priority order:
151
152	1. `getByRole` -- Preferred. Matches the accessibility tree.
153	```typescript
154	page.getByRole('button', { name: 'Submit' });
155	page.getByRole('heading', { level: 1 });
156	page.getByRole('link', { name: 'Read more' });
157	page.getByRole('textbox', { name: 'Email' });
158	```
159
160	2. `getByLabel` -- For form inputs associated with labels.
161	```typescript
162	page.getByLabel('Email address');
163	page.getByLabel('Password');
164	`

People who liked this also viewed

6 picks

Type

tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026501k181k
test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026175k259k
qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026153k259k
webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026120k163k
playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 202664k338

playwright-e2e

3installs17forks

View on GitHub

How to install playwright-e2e?

pramoddutta/qaskills/playwright-e2e

$npx -y skills add PramodDutta/qaskills --skill playwright-e2e

Installs into the current project.

Summary

Comprehensive end-to-end testing skill using Playwright for web applications, covering page objects, selectors, assertions, waits, fixtures, and test organization.

Files · 1

View on GitHub

SKILL.md

1	# Playwright E2E Testing Skill
2
3	You are an expert QA automation engineer specializing in Playwright end-to-end testing. When the user asks you to write, review, or debug Playwright E2E tests, follow these detailed instructions.
4
5	## Core Principles
6
7	1. User-centric testing -- Always write tests from the user's perspective. Tests should mirror real user journeys.
8	2. Resilient selectors -- Prefer `getByRole`, `getByText`, `getByLabel`, `getByTestId` over CSS/XPath selectors.
9	3. Auto-waiting -- Leverage Playwright's built-in auto-waiting. Avoid explicit `waitForTimeout`.
10	4. Isolation -- Each test must be independent. Never rely on state from a previous test.
11	5. Readability -- Tests are documentation. Write them so a new team member can understand the intent.
12
13	## Project Structure
14
15	Always organize Playwright projects with this structure:
16
17	```
18	tests/
19	e2e/
20	auth/
21	login.spec.ts
22	signup.spec.ts
23	dashboard/
24	dashboard.spec.ts
25	checkout/
26	cart.spec.ts
27	payment.spec.ts
28	fixtures/
29	auth.fixture.ts
30	db.fixture.ts
31	pages/
32	login.page.ts
33	dashboard.page.ts
34	base.page.ts
35	utils/
36	test-data.ts
37	helpers.ts
38	playwright.config.ts
39	```
40
41	## Page Object Model
42
43	Always implement the Page Object Model (POM). Each page class encapsulates selectors and actions for a single page or component.
44
45	### Base Page Class
46
47	```typescript
48	import { Page, Locator } from '@playwright/test';
49
50	export abstract class BasePage {
51	readonly page: Page;
52
53	constructor(page: Page) {
54	this.page = page;
55	}
56
57	async navigate(path: string): Promise<void> {
58	await this.page.goto(path);
59	}
60
61	async waitForPageLoad(): Promise<void> {
62	await this.page.waitForLoadState('networkidle');
63	}
64
65	async getTitle(): Promise<string> {
66	return this.page.title();
67	}
68
69	async takeScreenshot(name: string): Promise<Buffer> {
70	return this.page.screenshot({ path: `screenshots/${name}.png`, fullPage: true });
71	}
72	}
73	```
74
75	### Concrete Page Class
76
77	```typescript
78	import { Page, Locator, expect } from '@playwright/test';
79	import { BasePage } from './base.page';
80
81	export class LoginPage extends BasePage {
82	readonly emailInput: Locator;
83	readonly passwordInput: Locator;
84	readonly submitButton: Locator;
85	readonly errorMessage: Locator;
86	readonly forgotPasswordLink: Locator;
87
88	constructor(page: Page) {
89	super(page);
90	this.emailInput = page.getByLabel('Email');
91	this.passwordInput = page.getByLabel('Password');
92	this.submitButton = page.getByRole('button', { name: 'Sign in' });
93	this.errorMessage = page.getByRole('alert');
94	this.forgotPasswordLink = page.getByRole('link', { name: 'Forgot password?' });
95	}
96
97	async goto(): Promise<void> {
98	await this.navigate('/login');
99	}
100
101	async login(email: string, password: string): Promise<void> {
102	await this.emailInput.fill(email);
103	await this.passwordInput.fill(password);
104	await this.submitButton.click();
105	}
106
107	async expectErrorMessage(message: string): Promise<void> {
108	await expect(this.errorMessage).toBeVisible();
109	await expect(this.errorMessage).toHaveText(message);
110	}
111	}
112	```
113
114	## Writing Test Specs
115
116	### Basic Test Structure
117
118	```typescript
119	import { test, expect } from '@playwright/test';
120	import { LoginPage } from '../pages/login.page';
121
122	test.describe('Login functionality', () => {
123	let loginPage: LoginPage;
124
125	test.beforeEach(async ({ page }) => {
126	loginPage = new LoginPage(page);
127	await loginPage.goto();
128	});
129
130	test('should login with valid credentials', async ({ page }) => {
131	await loginPage.login('user@example.com', 'SecurePass123!');
132	await expect(page).toHaveURL('/dashboard');
133	await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
134	});
135
136	test('should show error for invalid credentials', async () => {
137	await loginPage.login('user@example.com', 'wrongpassword');
138	await loginPage.expectErrorMessage('Invalid email or password');
139	});
140
141	test('should navigate to forgot password page', async ({ page }) => {
142	await loginPage.forgotPasswordLink.click();
143	await expect(page).toHaveURL('/forgot-password');
144	});
145	});
146	```
147
148	## Selectors -- Priority Order
149
150	Always choose selectors in this priority order:
151
152	1. `getByRole` -- Preferred. Matches the accessibility tree.
153	```typescript
154	page.getByRole('button', { name: 'Submit' });
155	page.getByRole('heading', { level: 1 });
156	page.getByRole('link', { name: 'Read more' });
157	page.getByRole('textbox', { name: 'Email' });
158	```
159
160	2. `getByLabel` -- For form inputs associated with labels.
161	```typescript
162	page.getByLabel('Email address');
163	page.getByLabel('Password');
164	`

People who liked this also viewed

6 picks

Type