Skip to main content

Testing Vue Storybook Components with Applitools

Running the Example Project

  1. Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-storybook-vue.git
cd tutorial-storybook-vue

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

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

This will first set your APPLITOOLS_API_KEY into the node process then run npx eyes-storybook.

tip

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

You should see that it takes about 10 seconds to startup and complete all the tests.

You should see the results of all the components in seconds.

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

storybook architecture

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.

Having Trouble?

Don't suffer in silence! Let us help you. Please reach out to us to get your project working.

Taking the next steps with Applitools

Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.

Resources for next steps:

  1. 🤖 Learning how visual testing works
  2. ↔️ Setting match levels for visual checkpoints
  3. 💥 Troubleshooting common issues
  4. 🐞 Reporting bugs
  5. 🗺 Detailed overview of visual testing with Applitools

You can also: