Storybook CSF React Tutorial

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

storybook-marketecture.png

Prerequisites

  1. A free Applitools account and Applitools API KEY API-key

  2. Node.js https://nodejs.org​ Needs Node.js 10.x or higher

Getting Started

Running the Example Project

  1. Clone or download the repository and navigate to that folder
git clone git@github.com:applitools/tutorial-storybook-csf-react.git
cd tutorial-storybook-csf-react
1
2

Note: you can alternatively download the project as a Zip file and extract it

  1. Install the dependencies
npm install
1
  1. Run the example test
APPLITOOLS_API_KEY="[Your API Key]" npm test
1

This will first set your APPLITOOLS_API_KEY into the node process then run npm test.

Notes:

You can alternatively run npx eyes-storybook.

npx comes as part of Node.js installation. It automatically runs the eyes-storybook executable.

Adding Applitools Eyes to an Existing Storybook Project

Install Applitools Eyes dependencies:

npm install --save-dev @applitools/eyes-storybook
1

Customizations

The SDK provides additional tools to customize how you run, please check them out at the Applitools Storybook repo.

Advanced Configuration

Note

Please see the Github repo for all the latest configuration features

storybook-common-adv-config.png

Other options

Please see the Github repo for CLI options, Independent Storybook Server and various other options.

Learn more

Applitools Eyes is a powerful platform for automated visual UI testing that supports full page screenshots, page layout matching, cross-device and browser testing, test batching, baseline branching and merging, automated baseline maintenance, collaboration features, and much more. Applitools has over 40 SDKs supporting a broad range of testing environments.

Reference documentation

To learn more, check out the Applitools Eyes documentation and tutorials for other testing environments.

Request a demo

If you want to see a demo of all our other features, you do request a demo

Knowledge base and Support

You can search our Knowldege base for more information. You can also file a contact our support team and file a Ticket.


Terms & Conditions Privacy Policy GDPR© 2020 Applitools. All rights reserved.

Last Updated: 2/10/2021, 10:25:17 AM