Form Submission

Overview

Demonstrates handling form states during in-flight requests and API responses.

Implementation

<!-- Form with Submission Flow Validation -->
<form fs-feature="FormSubmission"
      fs-assert="FormSubmissionFlow"
      fs-trigger="submit"
      fs-assert-visible=".submit-button[disabled]"
      fs-assert-timeout="2000"
      fs-assert-response-status="201"
      fs-assert-response-headers='{"content-type":"application/json"}'>
  
  <input type="text" name="name" placeholder="Name" />
  <input type="email" name="email" placeholder="Email" />
  
  <!-- Submit Button with State Validation -->
  <button type="submit" 
          class="submit-button"
          fs-feature="FormSubmission"
          fs-assert="SubmitButtonState"
          fs-trigger="click"
          fs-assert-visible=".submit-button[disabled]">
    Submit
  </button>
  
  <!-- Success/Error Messages -->
  <div class="success-message">✓ Form submitted successfully</div>
  <div class="error-message">✗ Submission failed</div>
</form>

Try it

Key Attributes

fs-feature

Groups form-related assertions under 'FormSubmission' feature

fs-assert

Unique identifiers for form flow (FormSubmissionFlow, SubmitButtonState)

fs-trigger

Events that trigger validation (submit for form, click for button)

fs-assert-visible

Validates that disabled submit button becomes visible during submission

fs-assert-timeout

To extend the timeout for this request (for slower endpoints)

fs-assert-response-status

Validates that the API response returns the expected HTTP status code (201)

fs-assert-response-headers

Validates that the API response contains expected headers as JSON object format

Form Submission

Overview

Implementation

Try it

Key Attributes

Demo Event Collector