Instrumentation that feels like magic
With a few simple HTML attributes, you can start validating critical workflows in your application.
Asserting State Updates
- The Incremement button shows how you can assert a portion of the UI is in an exact state, using a dynamic text-match.
- The decrement button shows how you can use a regular expression as a simple validation for UI state.
<div id="counter">Count: {count}</div>
<Button onClick={...}
fs-feature="Counter"
fs-assert="IncremenetCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches={`Count: ${count + 1}`}
>
Increment
</Button>
<Button onClick={...}
fs-feature="Counter"
fs-assert="DecremementCounter"
fs-trigger="click"
fs-assert-updated="#counter"
fs-assert-text-matches="Count: -?[0-9]+"
>
Decrement
</Button>Asserting Network Responses
You can execute multiple assertions in parallel off a single trigger.
This example demonstates a UI state assertion in combination with a network assertion on the response status of the API call.
Finally, we are adding an assertion modifier to extend the timeout period for the assertion to resolve.
<Button onClick={loadPosts}
fs-feature="NetworkRequests"
fs-assert="api-load-posts"
fs-trigger="click"
fs-assert-updated="#results"
fs-assert-response-status="304"
fs-assert-timeout="2600"
>
Load Posts
</Button>Try it:
Click the button to load posts from JSONPlaceholder API