Today I had the pleasure of using Playwright to write some E2E tests.
What I really enjoyed, was how it allows you to extend the built-in test function.
This is super-useful to, for example, extract out repetitive setup and teardown logic.
This is how I would approach writing test setup/teardown logic coming from a framework like Mocha or Jest:
users.spec.ts
import { test } from '@playwright/test'import { Db } from './Db'test.describe('Users', () => {let db: Dbtest.beforeEach(async () => {db = await Db.connect()await db.cleanup()})test.afterEach(async () => {await db.disconnect()})test('logs the user in', async ({ page }) => {await db.createUser()// ...})})
Using Playwright's test.extend
we can make this so much cleaner. Notice how I'm no longer importing test
from @playwright/test
here:
users.spec.ts
import { test } from './test-helpers/test'test.describe('Users', () => {test('logs the user in', async ({ db, page }) => {await db.createUser()// ...})})
Here's how:
test-helpers/test.ts
import { test as playwrightTest } from '@playwright/test'import { Db } from '../Db'interface TestParams {db: Db}export const test = base.extend<TestParams>({db: async ({}, use) => {// Previously in test.beforeEach:const db = await Db.connect()await db.cleanup()// Run the test:await use(db)// Previously in test.afterEach:await db.disconnect()}})
Hi, I’m Max! I'm a fullstack JavaScript developer living in Berlin.
When I’m not working on one of my personal projects, writing blog posts or making YouTube videos, I help my clients bring their ideas to life as a freelance web developer.
If you need help on a project, please reach out and let's work together.
To stay updated with new blog posts, follow me on Twitter or subscribe to my RSS feed.