Combining Fixtures, Network, Assertions and CI

Playwright’s real power appears when you combine fixtures, network controls, assertions and CI into cohesive flows. This lesson walks through an end-to-end example that ties these concepts together.

Putting Key Playwright Features Together #

Consider a checkout flow that needs authenticated users, seeded cart data, network verification and CI-friendly configuration. You can wire this through fixtures and helpers.

// fixtures/auth-and-cart.ts
import { test as base } from '@playwright/test';

export const test = base.extend({
  authPage: async ({ page }, use) => {
    await page.goto('https://demo.myshop.com/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('SuperSecret123');
    await page.getByRole('button', { name: 'Sign in' }).click();
    await use(page);
  },
});

// checkout-flow.spec.ts
import { expect } from '@playwright/test';
import { test } from './fixtures/auth-and-cart';

-test('user can complete checkout with verified API calls', async ({ authPage }) => {
+test('user can complete checkout with verified API calls', async ({ authPage }) => {
  const intercepted: string[] = [];

  authPage.on('request', req => {
    if (req.url().includes('/api/checkout')) {
      intercepted.push(req.method());
    }
  });

  await authPage.goto('https://demo.myshop.com/cart');
  await authPage.getByRole('button', { name: 'Checkout' }).click();
  await authPage.getByRole('button', { name: 'Confirm order' }).click();

  await expect(authPage.getByText('Order confirmed')).toBeVisible();
  expect(intercepted).toContain('POST');
});

This composition demonstrates how previous chapters fit together in practical, production-like scenarios.

Common Mistakes #

Mistake 1 — Treating each Playwright feature in isolation #

This misses synergy.

❌ Wrong: Using fixtures without network checks or CI integration.

✅ Correct: Combine features to build realistic, robust flows.

Mistake 2 — Overstuffing a single end-to-end test #

This reduces clarity.

❌ Wrong: One massive test that covers every path in the app.

✅ Correct: Compose smaller tests with shared building blocks.