Multi-step Form

Working with Multi-step Forms

Multi-step forms present unique challenges for automation because:

Elements may not be in the DOM until a specific step is reached
You need to maintain state across multiple form screens
Navigation between steps requires specific actions
Validation may occur at each step or at the end

This example demonstrates how to use TesterUtilities to automate a multi-step form by:

Using sequential field filling with step navigation
Implementing waitForElement and navigation actions
Handling conditional visibility of form elements

Account Registration Wizard

Complete the following steps to create your account.

Step 1: Account Details

Email Address

Password

Confirm Password

Step 2: Personal Information

First Name

Last Name

Date of Birth

Gender

Male Female Other

Step 3: Contact Information

Phone Number

Address

City

Country

Step 4: Review & Submit

I agree to the Terms of Service and Privacy Policy

Subscribe to our newsletter

Multi-step Form JSON Configuration

Copy this JSON configuration to test the multi-step form with TesterUtilities extension. It uses a sequence of selectors and actions to navigate through each step of the form.

{
  "registrationForm": {
    "type": "multiStep",
    "timeout": 500,
    "steps": [
      {
        "selector": "Email Address",
        "queryType": "label",
        "type": "input",
        "data": "test.user@example.com",
        "dataType": "static"
      },
      {
        "selector": "Password",
        "queryType": "label",
        "type": "input",
        "data": "SecurePassword123!",
        "dataType": "static"
      },
      {
        "selector": "Confirm Password",
        "queryType": "label",
        "type": "input",
        "data": "SecurePassword123!",
        "dataType": "static"
      },
      {
        "selector": "to-step-2",
        "queryType": "testId",
        "type": "simpleClick"
      },
      {
        "selector": "First Name",
        "queryType": "label",
        "type": "input",
        "data": "John",
        "dataType": "static"
      },
      {
        "selector": "Last Name",
        "queryType": "label",
        "type": "input",
        "data": "Doe",
        "dataType": "static"
      },
      {
        "selector": "Date of Birth",
        "queryType": "label",
        "type": "input",
        "data": "1990-01-15",
        "dataType": "static"
      },
      {
        "selector": "Male",
        "queryType": "label",
        "type": "checkCheckbox"
      },
      {
        "selector": "to-step-3",
        "queryType": "testId",
        "type": "simpleClick"
      },
      {
        "selector": "Phone Number",
        "queryType": "label",
        "type": "input",
        "data": "+1 (555) 123-4567",
        "dataType": "static"
      },
      {
        "selector": "Address",
        "queryType": "label",
        "type": "input",
        "data": "123 Main Street",
        "dataType": "static"
      },
      {
        "selector": "City",
        "queryType": "label",
        "type": "input",
        "data": "New York",
        "dataType": "static"
      },
      {
        "selector": "Country",
        "queryType": "label",
        "type": "input", 
        "data": "us",
        "dataType": "static"
      },
      {
        "selector": "to-step-4",
        "queryType": "testId",
        "type": "simpleClick"
      },
      {
        "selector": "terms",
        "queryType": "testId",
        "type": "checkCheckbox"
      },
      {
        "selector": "newsletter",
        "queryType": "testId", 
        "type": "checkCheckbox"
      },
      {
        "selector": "submit-form",
        "queryType": "testId",
        "type": "simpleClick"
      }
    ]
  }
}

Multi-step Form Automation Challenges

Automating multi-step forms comes with several challenges:

Dynamic Visibility: Elements may not be available until a specific step is reached, which requires waiting for elements to appear.
State Management: The form state needs to be preserved between steps, especially when validating input.
Sequential Actions: Actions must be performed in a specific order to advance through the form.
Error Handling: If an error occurs at any step, the automation should be able to recover and continue.

Strategy for Multi-step Forms

TesterUtilities handles multi-step forms by using a sequential approach with explicit navigation actions. The recommended strategy is:

Fill out fields in the current visible step
Use a click action on the navigation button to move to the next step
Wait for the next step to become visible
Continue with the next set of fields
Repeat until the final submission