`fs-assert-*`

Customize how Fault Sense resolves assertions with optional modifiers

Assertion modifiers are optional attributes that allow you to customize how Fault Sense resolves assertions. They provide fine-grained control over timing, validation criteria, and cross-page behavior.

Modifiers follow the form fs-assert-<modifier>="<value>" and can be combined with any assertion type. When an element has multiple assertion types, modifiers apply to all of them.

In the following examples, triggers have been omitted for brevity.

mpa

Enables multi-page application mode for assertions that should resolve on the next page load. Set to "true" to store the assertion in localStorage and resolve it after navigation.

<form fs-assert-mpa="true" fs-assert-added="#welcome-message">
  <!-- Form that navigates to new page -->
</form>

timeout

Overrides the default timeout (in milliseconds) before failing the assertion. Useful for slow operations or when you need more time for conditions to be met.

<button fs-assert-timeout="5000" fs-assert-visible="#slow-loading-content">
  Load Data
</button>

classlist

Validates that specific CSS classes exist or don't exist on the target element. Value is a JSON object mapping class names to boolean values.

<button 
  fs-assert-visible="#status-badge"
  fs-assert-classlist='{"active": true, "disabled": false}'
>
  Activate
</button>

attrs-match

Validates that specific attributes on the target element match expected values. Value is a JSON object of attribute name/value pairs.

<button 
  fs-assert-visible="#submit-button"
  fs-assert-attrs-match='{"disabled": "false", "aria-label": "Submit form"}'
>
  Enable Submit
</button>

text-matches

Validates that the text content of the target element matches a string literal or regular expression pattern.

<button 
  fs-assert-visible="#counter"
  fs-assert-text-matches="^Count: [0-9]+$"
>
  Increment
</button>

<button 
  fs-assert-visible="#message"
  fs-assert-text-matches="Success"
>
  Submit
</button>

Combining Modifiers

Multiple modifiers can be used together to create sophisticated validation rules for complex user interactions.

<button 
  fs-trigger="click"
  fs-assert-timeout="3000"
  fs-assert-visible="#result"
  fs-assert-classlist='{"success": true}'
  fs-assert-text-matches="Operation completed"
>
  Process
</button>

fs-assert-*