`Quick Start`

Learn the basics of Fault Sense in 5 minutes

The core concept is simple: add a trigger to specify when to create an assertion, then add assertion types and modifiers to specify how to resolve the assertion. Fault Sense handles the rest, including timing, DOM monitoring, and reporting results.

Your First Assertion

Let's start with a simple button click. We'll validate that clicking the button shows a success message.

<button 
  fs-trigger="click"
  fs-assert-visible="#success-message"
>
  Click Me
</button>

<div id="success-message" style="display: none;">
  Success! The button works.
</div>

Understanding the Attributes

Let's break down what each attribute does in the example above:

fs-trigger="click"
// Creates an assertion when the button is clicked

fs-assert-visible="#success-message"
// Validates that the element with id="success-message" becomes visible

Form Validation

Fault Sense excels at validating forms. Here's how to ensure a form submission works correctly:

<form 
  fs-trigger="submit"
  fs-assert-response-status="200"
  fs-assert-visible="#thank-you-message"
  action="/api/contact"
  method="POST"
>
  <input name="email" type="email" required />
  <button type="submit">Submit</button>
</form>

<div id="thank-you-message" style="display: none;">
  Thank you for your submission!
</div>

Dynamic Content

Validate that dynamic content loads correctly when elements appear on screen:

<div 
  fs-trigger="mount"
  fs-assert-loaded="#profile-image"
>
  <img id="profile-image" src="/api/user/avatar" alt="Profile" />
</div>

Multiple Validations

You can add multiple assertions to a single element to validate complex interactions:

<button 
  fs-trigger="click"
  fs-assert-visible="#results"
  fs-assert-removed="#loading"
  fs-assert-response-status="200"
>
  Search
</button>

Viewing Results

As you interact with elements that have Fault Sense attributes, validation results appear in the validation panel on the right side of the screen. In production, these results are sent to your configured collector endpoint for aggregation and analysis.

What's Next

Now that you understand the basics, explore the documentation to learn about all available triggers, assertion types, and modifiers. The Examples section shows real-world patterns you can use in your applications.

Quick Start