Day 2: Deep Dive into Playwright Test Runner and Configuration playwright

testautomation

typescript

devops

Modern E2E testing isn’t just about writing tests—it’s about managing, configuring, and scaling them efficiently. In Day 2, we explore the heart of Playwright testing—the Playwright Test Runner—and learn how to configure it for speed, reliability, and maintainability.

What Is the Playwright Test Runner?
The Playwright Test Runner is a powerful, built-in testing framework that supports:

TypeScript/JavaScript
Parallel test execution
Snapshots
Report generation
Fixtures and hooks
Configuration inheritance

It eliminates the need for third-party frameworks like Jest or Mocha, and is built to work natively with Playwright APIs.

playwright.config.ts – The Central Control Hub
The playwright.config.ts file is the backbone of how your tests behave. Here’s a sample with explanations:

ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
testDir: './tests',
timeout: 30000,
retries: 1,
use: {
headless: true,
screenshot: 'only-on-failure',
video: 'retain-on-failure',
baseURL: 'https://example.com',
},
reporter: [['html'], ['list']],
projects: [
{ name: 'Chromium', use: { browserName: 'chromium' } },
{ name: 'Firefox', use: { browserName: 'firefox' } },
{ name: 'WebKit', use: { browserName: 'webkit' } },
],
});

Key Fields Explained:
Field Purpose
testDir Directory where all test specs live
timeout Global timeout for each test
retries Automatically retry failed tests
use Global context options (like headless mode, baseURL, etc.)
reporter Defines which test reports to generate
projects Enables cross-browser test execution

Organizing Tests: File & Directory Patterns
Playwright supports test file patterns like *.spec.ts or *.e2e.ts.

You can organize tests by feature, user flows, or browsers.

Example:

pgsql
Copy
Edit
tests/
├── auth/
│ └── login.spec.ts
├── dashboard/
│ └── widgets.spec.ts
You can also tag and filter tests using annotations:

ts

test.skip('this test is under development', async () => {});
test.only('run only this test', async () => {});
test.describe('user flow', () => { ... });

Playwright Fixtures: Reusability Made Simple
Fixtures help you define reusable test setup/teardown logic. For example:

ts

import { test as baseTest } from '@playwright/test';

const test = baseTest.extend({
adminPage: async ({ page }, use) => {
await page.goto('/admin');
await use(page);
},
});

test('Admin can access dashboard', async ({ adminPage }) => {
await expect(adminPage).toHaveURL(/admin/);
});
This is great for login flows, user roles, or pre-loaded state.

Running and Debugging Tests
Run all tests:
bash

npx playwright test
Run specific test file:
bash

npx playwright test tests/auth/login.spec.ts
Debug a single test:
bash

npx playwright test --debug
This launches the Playwright Inspector for interactive debugging.

Advanced: Using --project to Target Browsers
Want to run tests only in Firefox?

bash

npx playwright test --project=firefox
Or run tests tagged for mobile?

bash

npx playwright test --grep @mobile
Example with tag:

ts

test('@mobile Login should work on iPhone', async ({ page }) => {
// ...
});
Reports & Trace Viewer
After every run, Playwright saves results and traces.

Generate a report:
bash

npx playwright show-report
View trace (detailed replay of failed test):
bash

npx playwright show-trace trace.zip
You’ll get a timeline of actions, DOM snapshots, console logs, and network activity—perfect for debugging.

Summary
The Playwright Test Runner is more than a runner—it's a battle-tested testing ecosystem offering:

Native TypeScript/JavaScript support

Built-in parallelism and reporting

First-class browser support

Highly customizable configuration

Easy-to-use fixtures and tagging

By mastering the runner and config early, you set a solid foundation for scalable and maintainable test suites.