Custom Helpers and Utilities in Playwright
Creating custom helpers and utilities in Playwright is a great way to keep your test code clean, reusable, and maintainable. Here’s a structured guide on how to create and use them effectively.
🎯 Why Use Helpers in Playwright?
Reduce duplication
Improve readability
Make complex actions reusable (e.g., login, form-filling)
Simplify assertions or element selectors
📁 Folder Structure Example
bash
Copy code
tests/
├─ helpers/
│ ├─ authHelper.ts
│ ├─ formUtils.ts
│ └─ assertions.ts
├─ pages/
│ └─ loginPage.ts
├─ tests/
│ └─ login.spec.ts
└─ playwright.config.ts
🔧 1. Example: Custom Login Helper
helpers/authHelper.ts
ts
Copy code
import { Page } from '@playwright/test';
export async function login(page: Page, username: string, password: string) {
await page.goto('/login');
await page.fill('#username', username);
await page.fill('#password', password);
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
}
Usage in Test:
ts
Copy code
import { test } from '@playwright/test';
import { login } from '../helpers/authHelper';
test('user should see dashboard after login', async ({ page }) => {
await login(page, 'admin', 'adminpass');
await expect(page).toHaveURL('/dashboard');
});
🧱 2. Example: Utility to Fill Forms
helpers/formUtils.ts
ts
Copy code
import { Page } from '@playwright/test';
export async function fillForm(page: Page, fields: Record<string, string>) {
for (const [selector, value] of Object.entries(fields)) {
await page.fill(selector, value);
}
}
Usage:
ts
Copy code
await fillForm(page, {
'#name': 'John Doe',
'#email': 'john@example.com',
'#message': 'Hello world!'
});
✅ 3. Example: Custom Assertions
helpers/assertions.ts
ts
Copy code
import { expect, Page } from '@playwright/test';
export async function expectToast(page: Page, message: string) {
const toast = page.locator('.toast-message');
await expect(toast).toContainText(message);
await expect(toast).toBeVisible();
}
Usage:
ts
Copy code
await expectToast(page, 'Login successful');
📦 4. Shared Context Setup (Fixtures)
Playwright supports custom fixtures for helpers that need setup/teardown logic.
tests/fixtures.ts
ts
Copy code
import { test as base } from '@playwright/test';
import { login } from './helpers/authHelper';
export const test = base.extend({
loggedInPage: async ({ page }, use) => {
await login(page, 'admin', 'adminpass');
await use(page);
}
});
Usage:
ts
Copy code
import { test } from '../fixtures';
test('check dashboard', async ({ loggedInPage }) => {
await loggedInPage.goto('/dashboard');
// test logic here
});
⚙️ Tips
Use TypeScript for autocompletion and type safety
Keep helpers small and focused (single responsibility)
Group by functionality (auth, forms, assertions)
Use .extend() to mock or inject additional behavior
Add documentation/comments for shared helpers
Learn Playwright Training Course in Hyderabad
Read More
Visual Regression Testing with Playwright
Slack Notifications for Playwright Test Results
Using Playwright in a Kubernetes Environment
Using Playwright with AWS Lambda
Visit Our IHUB Talent Training Institute in Hyderabad
Comments
Post a Comment