Multi-Step Form – Falcoma

Step 1 — Personal details

Full name

Email address

Step 2 — Your background

Current role

Years of experience

Step 3 — Review & confirm

Name
Email
Role
Experience

🎉

All done!

Your answers were submitted successfully.

🎭

How to automate this page

Multi-step forms require asserting both the current visible panel and the historical state recorded in the step indicator.

terminal # One-time setup
npm init playwright@latest

# Run your tests
npx playwright test

# Open the HTML report
npx playwright show-report

1 Step 1 shows errors when next is clicked with empty fields step validation ▼

Click Next on Step 1 without filling in any fields. Both the name and email errors should appear and the wizard should stay on Step 1.

tetsing-lab.spec.ts

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

test('Step 1 validates before advancing', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/multistep-form-demo');

  await page.click('[data-testid=btn-next-1]');

  await expect(page.locator('[data-testid=error-name]')).toHaveText('Name is required.');
  await expect(page.locator('[data-testid=step-panel-1]')).toBeVisible();
  await expect(page.locator('[data-testid=step-panel-2]')).not.toBeVisible();
});

2 Completing Step 1 advances to Step 2 navigation ▼

Fill both Step 1 fields with valid values and click Next. The step indicator should show step 1 as done and step 2 as active.

tetsing-lab.spec.ts

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

test('valid Step 1 advances to Step 2', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/multistep-form-demo');

  await page.fill('[data-testid=input-name]', 'Vincent Wong');
  await page.fill('[data-testid=input-email]', 'vincent@falcoma.com');
  await page.click('[data-testid=btn-next-1]');

  await expect(page.locator('[data-testid=step-panel-2]')).toBeVisible();
  await expect(page.locator('[data-testid=step-dot-1]')).toContainText('✓');
});

3 Review screen shows all entered values review step ▼

Complete both steps and reach the review screen. Assert that the review table shows exactly what was entered in steps 1 and 2.

tetsing-lab.spec.ts

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

test('review screen shows all entered data', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/multistep-form-demo');

  // Step 1
  await page.fill('[data-testid=input-name]', 'Vincent Wong');
  await page.fill('[data-testid=input-email]', 'vincent@falcoma.com');
  await page.click('[data-testid=btn-next-1]');

  // Step 2
  await page.selectOption('[data-testid=select-role]', 'QA Engineer');
  await page.selectOption('[data-testid=select-experience]', '4-6 years');
  await page.click('[data-testid=btn-next-2]');

  // Step 3 – review
  await expect(page.locator('[data-testid=review-name]')).toHaveText('Vincent Wong');
  await expect(page.locator('[data-testid=review-role]')).toHaveText('QA Engineer');
});

4 Confirm shows the success screen happy path ▼

Complete all three steps and click Confirm. The success screen should be visible, and the step indicator and all form panels should be hidden.

tetsing-lab.spec.ts

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

test('full wizard submission shows the success screen', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/multistep-form-demo');

  await page.fill('[data-testid=input-name]', 'Vincent Wong');
  await page.fill('[data-testid=input-email]', 'vincent@falcoma.com');
  await page.click('[data-testid=btn-next-1]');

  await page.selectOption('[data-testid=select-role]', 'QA Engineer');
  await page.selectOption('[data-testid=select-experience]', '4-6 years');
  await page.click('[data-testid=btn-next-2]');

  await page.click('[data-testid=btn-submit]');

  await expect(page.locator('[data-testid=success-screen]')).toBeVisible();
});

🔐

Unlock Playwright Tutorial

Get the full automation guide for Multi-Step Form — real test code, step by step.

€ 1.99 one-time

Unlock for €1.99 →

🔒 Secure checkout · Instant access · No subscription

🪜 Multi-Step Form

All done!

Unlock Playwright Tutorial