MPA Form Submission

Monitor traditional form submissions with page reloads

Overview

Multi-Page Application (MPA) mode enables Fault Sense to work across page reloads and navigation. This example demonstrates how to validate element visibility after manual page reloads, using cookies to persist state and simulate traditional web application behavior.

Implementation

<!-- Form Component -->
<form onSubmit={handleSubmit}>
  <label>Your Name</label>
  <input type="text" 
         value={name} 
         onChange={(e) => setName(e.target.value)}
         placeholder="Enter your name..." 
         required />
  
  <!-- Submit Button with MPA Mode -->
  <button type="submit" 
          class="submit-mpa-button"
          fs-feature="MPAForm"
          fs-assert="SubmitMPAForm"
          fs-trigger="click"
          fs-assert-mpa="true"
          fs-assert-visible=".success-message">
    Submit (MPA Mode)
  </button>
</form>

<!-- Success Message (appears after page reload) -->
{showSuccess && (
  <div class="success-message">
    ✓ Welcome, {savedName}! MPA assertion resolved successfully.
  </div>
)}

<!-- JavaScript Logic -->
useEffect(() => {
  const nameFromCookie = getCookie('mpa-name');
  if (nameFromCookie) {
    setSavedName(nameFromCookie);
    setShowSuccess(true);
    setCookie('mpa-name', '', -1); // Clear cookie
  }
}, []);

Try it

MPA mode allows Fault Sense to work across page reloads. Enter your name, click submit, then reload the page to see the assertion resolve.

Key Attributes

fs-feature

Groups MPA-related assertions under 'MPAForm' feature

fs-assert

Unique identifier for the MPA form submission (SubmitMPAForm)

fs-trigger

Event that triggers the assertion (click for form submission)

fs-assert-mpa

Enables MPA mode to handle page reloads and server-side rendering

fs-assert-visible

Validates that success message becomes visible after page reload

MPA Form Submission

Overview

Implementation

Try it

Key Attributes

Demo Event Collector