Storybook CSF React Tutorial

Getting Started with Applitools

Want to learn more about the Applitools platform and how it works? First get started with one of the following:

Running Tests with Applitools

Prerequisites

A free Applitools account and Applitools API KEY

Tip: Unsure how to set up your API key?

Learn how to get started at Setting Upstarted/setting-up-your-environment.html

Node.js https://nodejs.org
Git https://git-scm.com

Note: Installing `git` is optional

Installing git is used to clone the demo project from the Github repository. Instead of installing git, you can simply download the Zip file from the repository. Further, if you are Mac, you already have git.

Running the Example Project

Clone or download the repository and navigate to that folder

git clone https://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

Install the dependencies

npm install

Run the example test

APPLITOOLS_API_KEY="[Your API Key]" npm test

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 Node.js Storybook Project

Install Applitools Eyes dependencies:

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

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

More information

The @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.

# Storybook CSF React Tutorial

# Getting Started with Applitools

# Running Tests with Applitools

# Running the Example Project

# Adding Applitools Eyes to an Existing Node.js Storybook Project

# Applitools Eyes Storybook SDK

# How it works

# More information

# Resources