Advanced Playwright Features: Beyond the Basics

introduce

Playwright is known for its simplicity and efficiency in automating end-to-end testing. While Playwright’s basics get you started quickly, its advanced features unlock unparalleled capabilities for complex scenarios. In this article, we’ll explore some of Playwright’s more advanced features and how you can leverage them to build a powerful and flexible testing framework.

1. Network interception and simulation

One of Playwright’s standout features is its ability to intercept and simulate network requests. This allows you to simulate backend responses without relying on the actual API.

example:Mock API response

import { test, expect } from '@playwright/test';

test('mock API response', async ({ page }) => {
  await page.route('https://api.example.com/data', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ key: 'mocked value' }),
    });
  });

  await page.goto('https://your-app-url.com');
  const data = await page.locator('#data').textContent();
  expect(data).toBe('mocked value');
});

Key use cases:

• Test UI behavior for different API states (success, failure, slow response).
• Isolate front-end tests from back-end dependencies.

2. Action and device simulation

Playwright supports device emulation, making it easy to test responsive designs and mobile-specific features.

example: Simulate iPhone 12

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

const iPhone12 = devices['iPhone 12'];

test.use({
  ...iPhone12,
});

test('responsive design test', async ({ page }) => {
  await page.goto('https://your-app-url.com');
  const isMobileMenuVisible = await page.locator('#mobile-menu').isVisible();
  expect(isMobileMenuVisible).toBe(true);
});

Key use cases:

• Test mobile layouts and touch interactions.
• Verify browser-specific behavior.

3. Processing Certification

Many modern applications require authentication for most functions. Playwright provides tools to handle authentication efficiently, such as persisting login sessions or logging in programmatically.

example:reuse authenticated session

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

let authState;

test.beforeAll(async ({ browser }) => {
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://your-app-url.com/login');
  await page.fill('#username', 'user');
  await page.fill('#password', 'pass');
  await page.click('#login-button');
  await page.context().storageState({ path: 'auth.json' });
  authState = page.context().storageState();
});

test.use({ storageState: authState });

test('authenticated test', async ({ page }) => {
  await page.goto('https://your-app-url.com/dashboard');
  const welcomeMessage = await page.locator('#welcome').textContent();
  expect(welcomeMessage).toContain('Welcome');
});

Key use cases:

• Execute tests that require logged in status.
• Speed ​​up testing by skipping repeated login steps.

4. Visual regression testing

Playwright can take screenshots and compare them for visual regression testing.

example: Compare screenshots

import { test, expect } from '@playwright/test';

test('visual regression test', async ({ page }) => {
  await page.goto('https://your-app-url.com');
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot('homepage.png');
});

Key use cases:

• Detect unexpected UI changes.
• Verify visual consistency between versions.

5. Parallel test execution

Playwright’s parallel test execution can significantly reduce test run times by executing tests simultaneously.

Configuration: adjust workers

in your playwright.config.ts:

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

export default defineConfig({
  workers: 4, // Number of parallel workers
});

Key use cases:

• Accelerated test suite.
• Optimize CI/CD pipeline.

6. Customized test fixture

Playwright lets you create custom devices to configure reusable testing utilities.

example: Custom database fixture

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

const test = base.extend({
  db: async ({}, use) => {
    const db = new DatabaseConnection();
    await db.connect();
    await use(db);
    await db.disconnect();
  },
});

test('test with database', async ({ db, page }) => {
  const data = await db.query('SELECT * FROM users');
  expect(data).not.toBeNull();
});

7. Continuous integration and reporting

Integrating Playwright with CI tools (such as GitHub Actions, GitLab CI) ensures that tests are automatically executed when code changes. Playwright’s built-in reporter makes it easy to analyze test results.

example: HTML reporter

exist playwright.config.ts:

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

export default defineConfig({
  reporter: [['html', { outputFolder: 'test-results' }]],
});

Key use cases:

• Automate testing execution on CI platform.
• Generate detailed test reports for debugging and analysis.

in conclusion

Mastering Playwright’s advanced features will enable you to handle complex testing scenarios with ease. Whether it’s mocking an API, handling authentication, or running tests in parallel, Playwright has tools for every challenge.

Which advanced feature do you find most interesting? Share your thoughts or questions in the comments below!