Interactors:
page objects for components libraries
Improve your users testing experience and make maintenance easier for yourself
Get Started- Jest
- Cypress
- Bigtest
it('subscribes to newsletter', async () => {
await Input('email').fillIn('jorge@frontside.com');
await Button('Subscribe').click();
await Heading('Thanks!').exists();
})
it('subscribes to newsletter', () => {
cy.do([
Input('email').fillIn('jorge@frontside.com'),
Button('Subscribe').click()
]);
cy.expect([
Heading('Thanks!').exists();
])
})
test('subscribes to newsletter')
.step([
Input('email').fillIn('jorge@frontside.com'),
Button('Subscribe').click()
])
.assertion(
Heading('Thanks!').exists()
);
Testing a UI should be as easy as building it
Interactors allow design systems maintainers to ship reusable and simplified testing practices alongside their components. Thus, their users can start testing right away without figuring out internal markup or selectors.
“Gone are the days of fragile, hard-coded selectors or dependencies on mark-up structure in your consumers’ test cases”
— John Coburn, Component Library Lead at FOLIO
Compatible with your test suite
Interactors work out-of-the-box with your existing tests in Jest, Cypress, BigTest, and more. You can add them in over time to improve what you already have.
UX & a11y centric
Nobody uses an app by searching [test-data-submit-button] selectors: we read labels, click buttons, or navigate through keystrokes. Interactors help you detect interaction flaws such as ambiguity in the elements of your page or the lack of adequate aria labels.
Why use Interactors?
In many typical test suites, if you change something about one button, you may have to change dozens of tests. It can take more time to update the tests than to make the change in the codebase. Does that sound familiar?
Interactors were designed to help solve this problem and bring your user interface tests closer to what users actually do.
A user finds something they want to interact with, takes action, and gets a result. The code to accomplish these same steps in a test is in one place as an Interactor. These Interactors can then be reused in many different test contexts. You can even create your own Interactors that test for whether a UI is accessible to people using assistive technology or navigating by keyboard controls.
Best of all, you do not need to throw out your existing tests when you try out Interactors! They fit right in with the work that you have already done. Try out the Quick Start guide to see this in action in your own app's test suite.