What are Playwright Fixtures?
Fixtures in Playwright are pre‑built helpers that give your tests the resources they need. Think of them as “ready‑to‑use tools” that Playwright hands to each test automatically.
Why do we use Fixtures?
Save time: No need to repeat setup code in every test.
Keep tests clean: Focus on what you’re testing, not boilerplate.
Isolation: Each test gets its own fresh environment, so they don’t interfere with each other.
Flexibility: You can create custom fixtures (like a logged‑in user or API client).
What is Built‑in Fixture in Playwright?
These are already provided by Playwright. You don’t need to create them yourself.
- page - a new browser tab for each test
- context - a separate browser profile (like a fresh user session)
- browser - the browser itself (Chromium, Firefox, WebKit)
- request - an API client for backend testing.
Analogy: Imagine a toolbox that already comes with a hammer, screwdriver, and wrench. You don’t need to build them yourself — they’re just there whenever you need them.
Example:
test('open homepage', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
What are Custom Fixtures?
Custom fixtures are your own reusable setups that you define in Playwright. (like logging in, setting up test data, or creating an API client).
Analogy: You build a custom jig or template in your workshop to make cutting wood faster. It’s not in the default toolbox, but you made it because you need it often.
Example:
const test = base.extend({
userPage: async ({ page }, use) => {
await page.goto('https://example.com/login');
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await use(page);
},
});
test('dashboard loads', async ({ userPage }) => {
await userPage.goto('/dashboard');
await expect(userPage.locator('h1')).toHaveText('Welcome');
});
What are Worker Fixtures?
- Run once per worker (not per test).
- Useful for heavy setups like starting a server or connecting to a database.
- Shared across multiple tests in the same worker.
Analogy: The classroom sets up one projector at the start, and all students use it during the exam. It doesn’t restart for each student.
Example:
const test = base.extend<{ config: { env: string }}>({
config: [async ({}, use) => {
const config = { env: 'test' };
await use(config);
}, { scope: 'worker' }],
});
test('worker fixture test 1', async ({ config }) => {
console.log(config.env);
});
test('worker fixture test 2', async ({ config }) => {
console.log(config.env);
});
What are Test Fixtures?
- Run for each test.
- Provide a fresh, isolated resource every time (like a new page).
- Prevents tests from interfering with each other.
Analogy: Each student gets a new notebook for every exam. No one shares notebooks, so answers don’t mix.
Example:
test('test 1', async ({ page }) => {
await page.goto('https://example.com');
});
test('test 2', async ({ page }) => {
await page.goto('https://example.com/about');
});
Beginner Analogy
- Built‑in fixtures = ready tools Playwright gives you (like page, browser).
- Custom fixtures = special helpers you create (like a logged‑in user).
- Test fixtures = run fresh for every test.
- Worker fixtures = run once per worker and shared across tests.
Advantage and Disadvantage
Pros in Playwright Fixtures
Reusability- Share setup logic across tests.
Isolation- Each test runs independently.
Maintainability- Cleaner, shorter test code.
Flexibility- Custom fixtures for special needs.
Cons in Playwright Fixtures
Reusability- Too many fixtures can make code harder to follow.
Isolation- Heavy setup may slow tests.
Maintainability- Debugging fixture errors can be tricky.
Flexibility- Beginners need time to learn the pattern.
Conclusion
Playwright fixtures are helpers that prepare and share resources (built‑in, custom, test, worker) to make tests clean, reusable, isolated, and reliable.
