Counter
Overview
A basic counter demonstrates how Fault Sense validates state changes through user interactions. Each button click is monitored to ensure the counter display updates correctly with the expected value, using both exact text matching and regex patterns.
Implementation
<!-- Counter Display -->
<div id="counter">Count: ${count}</div>
<!-- Counter Controls -->
<button fs-feature="Counter"
fs-assert="IncrementCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches="Count: ${count + 1}">
Increment
</button>
<button fs-feature="Counter"
fs-assert="DecrementCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches="Count: -?[0-9]+">
Decrement
</button>Try it
Count: 0
Key Attributes
fs-featureGroups counter assertions under the 'Counter' feature for organized reporting
fs-assertUnique identifiers for each counter action (IncrementCounter, DecrementCounter)
fs-triggerEvent that triggers the assertion (click for both buttons)
fs-assert-updatedValidates that the counter display element is updated after the action
fs-assert-text-matchesValidates the counter text matches expected value (dynamic template for increment, regex for decrement)