Storybook CSF React Tutorial
Run your first test!
Looking to just try it out? Get started by running your first test on GitHub!
- Create a new repository sandbox from our template
- Update your Applitools API key in GitHub Secrets under the "Settings" tab
- Run your first test with GitHub Actions under the "Actions" tab running the CI workflow
Getting Started with Applitools Eyes & Storybook
Note: This tutorial showcases how to use Storybook with the Component Story Format (CSF). To use the legacy format, check out Applitools Eyes for Storybook React
Testing Storybook with Applitools Eyes
- Install Applitools Eyes for Storybook
In order to use Applitools Eyes, we need to first install the Eyes SDK for Storybook as an npm package.
npm i -D @applitools/eyes-storybook
- Set your Applitools API key
Before running your test, you need to make your API key available to the environment. You can do this by either prepending your test command or exporting it in your terminal session.
To prepend, run a command like
npm test as:
APPLITOOLS_API_KEY="[Your Key]" npm test
To export your API key on a Mac, run:
export APPLITOOLS_API_KEY="[Your Key]"
To export your API key on Windows, run:
set APPLITOOLS_API_KEY="[Your Key]"
- Run your new tests!
Now you're ready to run your tests.
To test all of your stories, run the following command:
And that's it! Applitools will automatically run visual tests on all of your stories.
Your tests should now be available to review in the Applitools dashboard.
Applitools Eyes Storybook SDK
How it works
The Applitools Eyes Storybook SDK does not require you to change any code! You simply need to add Applitools SDK as a dependency and run the CLI command!
Our SDK simply opens up different stories from your project and upload the DOM to our Visual grid servers. It uploads multiple DOMs concurrently. The visual grid receives these DOMs and renders them in parallel using real browsers. Then it take pictures of each stories. And finally, these pictures are then sent to our AI servers to check for differences.
The picture below shows how it works
Check out a working demo
See it in action with our example over on GitHub!https://github.com/applitools/tutorial-storybook-csf-react
@applitools/eyes-storybook npm package page contain more information about advanced configuration, best practices and troubleshooting. Visit eyes-storybook SDK repo to find out more about what's possible with Applitools' Storybook SDK.
Getting Started with Applitools
Want to learn more about the Applitools platform and how it works? First get started with one of the following: