How do I organize a long test into multiple steps using Playwright?

Answer

To create a multi-step test with Playwright, use the test.step() API. This helps you split long tests into multiple steps, making them more organized and easier to read.

First, import test and expect from the @playwright/test package. Then, call the test.step() function within your test function. Each step takes two arguments: a title for the step and an async function that contains the code for that step. 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
  });
});

In this example, we have a single test with three steps. Each step has its own title and contains some asynchronous code.

When running your tests with Playwright's built-in reporters, information about each individual step will be displayed in addition to information about the overall test.

If you need to launch a web server before running your tests, use Playwright's configuration file (playwright.config.ts) to specify options such as the command to launch your server and the URL to wait for before starting tests.

Using multi-step tests can help make your end-to-end testing more organized and easier to maintain over time.