Playwright Testing for Multi-Step Form Wizard Validation

Test progressive multi-step forms with back-navigation, field persistence, conditional logic, and final submission validation in complex web wizards. This guide provides step-by-step Playwright patterns to handle this scenario reliably.

Introduction

Robust automation requires handling domain-specific patterns effectively. This article covers playwright testing for multi-step form wizard validation with production-ready Playwright code.

Architecture Overview

graph TD
    Step1["Step 1: Personal"] --> Step2["Step 2: Address"]
    Step2 --> Step3["Step 3: Review"]
    Step3 --> Submit["Submit"]
    Step2 --> Back["← Back to Step 1"]
    Back --> Step1

Implementation Guide

test('multi-step form completes successfully', async ({ page }) => {
  await page.goto('/onboarding/step-1');

  // Step 1: Personal info
  await page.getByLabel('First Name').fill('Jane');
  await page.getByLabel('Last Name').fill('Smith');
  await page.getByRole('button', { name: 'Next' }).click();

  // Step 2: Address
  await expect(page).toHaveURL(/step-2/);
  await page.getByLabel('Address').fill('123 Main St');
  await page.getByRole('button', { name: 'Next' }).click();

  // Step 3: Review & Submit
  await expect(page.getByText('Jane Smith')).toBeVisible();
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect(page.getByText('Registration complete')).toBeVisible();
});

Run Your Tests

npx playwright test --grep "Playwright Testing for"
npx playwright test --ui

Reference Table

Best Practices

Common Mistakes

Frequently Asked Questions

How to test back navigation in multi-step forms?

Navigate forward, then click Back, and verify the previous step's data is preserved.

How to test conditional step logic?

Answer a question that triggers an extra step and verify the step count and flow change accordingly.

Can Playwright test browser Back button in wizards?

Press page.goBack() and verify the wizard either handles it gracefully or warns about losing progress.

How to test form auto-save in wizards?

Partially complete the form, close and reopen the page, and verify the data was auto-saved.

How to test step validation errors?

Click Next without filling required fields and verify the inline error messages appear on the correct fields.

Summary

Test progressive multi-step forms with back-navigation, field persistence, conditional logic, and final submission validation in complex web wizards. Apply these patterns to build a reliable, maintainable automation suite for your specific use case.

Related Articles