`fs-assert-*`

DOM assertion types that validate element states and behaviors

Base assertions (DOM assertion types) allow you to validate that specific elements exist, do not exist, or were modified in the DOM. These assertions resolve when the specified condition is met.

All DOM assertions follow the form fs-assert-<type>="<selector>" where the selector identifies the target element to validate. When the assertion is triggered, Fault Sense monitors the DOM and resolves the assertion when the condition is satisfied.

You can have multiple assertion types on a single element, and each will create an independent assertion waiting to be resolved. This allows you to validate multiple conditions from a single user action.

added

Validates that an element matching the selector was added to the DOM. The assertion passes when the element is added, regardless of visibility.

<button fs-assert-added="#success-message">
  Submit
</button>

removed

Validates that an element matching the selector was removed from the DOM. The assertion passes when the element no longer exists in the document.

<button fs-assert-removed="#loading-spinner">
  Close Modal
</button>

updated

Validates that an element was found and was updated after the assertion was triggered. This is useful for confirming that dynamic content has changed.

<button fs-assert-updated="#counter-value">
  Increment
</button>

visible

Validates that an element exists in the DOM and is visible to the user. The assertion checks both existence and visibility state.

<button fs-assert-visible="#success-toast">
  Save Changes
</button>

hidden

Validates that an element exists in the DOM but is hidden from view. The assertion will fail if the element does not exist at all.

<button fs-assert-hidden="#error-banner">
  Dismiss Error
</button>

loaded

Validates that a load or error event was triggered on the target element. Load events cause the assertion to pass, while error events cause it to fail.

<button fs-assert-loaded="#profile-image">
  Upload Photo
</button>

Multiple Assertions

You can add multiple assertion types to a single element. Each creates an independent assertion that must be resolved.

<button 
  fs-trigger="click"
  fs-assert-added="#success-message"
  fs-assert-removed="#loading-spinner"
  fs-assert-visible="#results-container"
>
  Search
</button>

fs-assert-*