How do I organize complex tests into smaller steps using Playwright?

Answer

To create a multi-step test with Playwright, use the test.step() API. This helps you break down complex tests into smaller, more organized steps. First, import test and expect from the @playwright/test package.

Now, call the test.step() function within your test function. Each step takes two arguments: a title and an async function containing the step's code. Here's an example:

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

test('my multi-step test', async ({ page }) => {
  await test.step('step 1', async () => {
    // code for step 1
  });

  await test.step('step 2', async () => {
    // code for step 2
  });

  await test.step('step 3', async () => {
    // code for step 3
  });
});

This test has three steps, each with its own title and asynchronous code. When running tests with Playwright's built-in reporters, information about each step will be included in the output.

Keep in mind that if a step fails, subsequent steps won't be executed. This prevents wasting time on unnecessary steps if a part of your multi-step test fails.

Using multi-step tests makes your end-to-end testing more organized and manageable by breaking down complex tests into smaller pieces.