Learn How To Test Interactions

Screener provides Interaction Testing that can be added directly to your Storybook stories. This can be used for clicking buttons, filling out forms, and getting your components into the proper visual state to test. This also helps keep your stories and interaction test code in the same place.

This is useful for:

  • Testing stateful components.
  • Testing functional flows.
  • Integration testing multiple layers of your application.


  1. Integrating Steps into Stories
  2. Steps API

Integrating Steps into Stories

To test interactions, Screener provides a class called Steps that you can add to your existing Storybook stories. Each step is an instruction to interact with the component.


For React

To add steps to a React story, wrap your component within the <Screener/> component, and pass it a 'steps' prop. The steps can then be generated using our fluent API below.

Example using React Storybook:

import Screener, {Steps} from 'screener-storybook/src/screener';
 
storiesOf('MyComponent', module)
  .add('default', () => (
    <Screener steps={new Steps()
      .click('.selector')
      .snapshot('name')
      .end()
    }>
      <MyComponent />
    </Screener>
  ));

Note: The <Screener/> component must be the top-most component returned within a story. If you use addDecorator in your stories, ensure the last decorator contains the Screener component and steps.


For Vue

To add steps to a Vue story, add a 'steps' prop to the story object being returned. The steps can then be generated using our fluent API below.

Example using Vue Storybook:

import Steps from 'screener-runner/src/steps';
 
storiesOf('MyComponent', module)
  .add('default', () => ({
    render: h => h(MyComponent),
    steps: new Steps()
      .click('.selector')
      .snapshot('name')
      .end()
  }));

Steps API

The following step methods are available. Step methods with selectors have built-in waits to simplify test flow creation.

click(selector)this will click on the first element matching the provided css selector.
snapshot(name)this will capture a Screener snapshot.
hover(selector)this will move the mouse over the first element matching the provided css selector.
setValue(selector, value)this will set the value of the input field matching the provided css selector.
executeScript(code)this executes custom JS code against the client browser the test is running in.
ignore(selector)this ignores all elements matching the provided css selector(s).
wait(ms)this will pause execution for the specified number of ms.
wait(selector)this will wait until the element matching the provided css selector is present.
end()this will return the steps to be run.

Note: When adding Steps using the fluent API, you must end the method chain with end().


Got Questions? Ask Us