Multi-Step Wizard

Monitor wizard navigation and step progression

Overview

Multi-step wizards are complex user flows where navigation between steps must work reliably. This example demonstrates how Fault Sense validates wizard progression, ensuring users can successfully move forward, backward, and complete the entire flow.

Implementation

<!-- Wizard Container with Initial State -->
<div fs-feature="FormWizard"
     fs-assert="WizardInitialState"
     fs-trigger="mount"
     fs-assert-visible=".wizard-step[data-step='1']">
  
  <!-- Wizard Steps -->
  <div class="wizard-step" data-step="1">
    <h3>Step 1: Personal Information</h3>
    <input placeholder="Your name" />
  </div>
  
  <div class="wizard-step" data-step="2">
    <h3>Step 2: Contact Details</h3>
    <input type="email" placeholder="Your email" />
  </div>
  
  <div class="wizard-step" data-step="3">
    <h3>Step 3: Company Information</h3>
    <input placeholder="Company name" />
  </div>
  
  <!-- Navigation Buttons -->
  <button class="prev-button"
          fs-feature="FormWizard"
          fs-assert="NavigatePrevious"
          fs-trigger="click"
          fs-assert-visible=".wizard-step[data-step='1']">
    Previous
  </button>
  
  <button class="next-button"
          fs-feature="FormWizard"
          fs-assert="NavigateNext"
          fs-trigger="click"
          fs-assert-visible=".wizard-step[data-step='2']">
    Next
  </button>
  
  <button class="complete-button"
          fs-feature="FormWizard"
          fs-assert="CompleteWizard"
          fs-trigger="click"
          fs-assert-visible=".wizard-step[data-step='1']">
    Complete
  </button>
</div>

Try it

Step 1: Personal Information

Key Attributes

fs-feature

Groups wizard-related assertions under 'FormWizard' feature

fs-assert

Navigation identifiers (WizardInitialState, NavigateNext, NavigatePrevious, CompleteWizard)

fs-trigger

Events that trigger validation (mount for initial state, click for navigation)

fs-assert-visible

Validates that the correct wizard step becomes visible after navigation

data-step