Storybook Angular 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

Prerequisits:

  1. Install NodeJS Needs Node.js 10.x or higher
  2. Install Storybook CLI by running npm i -g @storybook/cli@4.0.0-alpha.24.

Note

We need Storybook alpha at the time of the writing because previous versions of Storybook doesn't support Webpack 4
  1. Sign up for Applitools Account

  2. Get the Applitools API key.

    API-key
  3. Set the APPLITOOLS_API_KEY environment variable on your computer to this API key value.

    • For Mac and Linux terminals:

      export APPLITOOLS_API_KEY=Your_API_Key_Here

    • For Windows command prompt:

      set APPLITOOLS_API_KEY=Your_API_Key_Here

    • For Windows PowerShell:

      Set-Variable -Name "APPLITOOLS_API_KEY" -Value "Your_API_Key_Here"

  4. Clone the tutorial repository.

git clone https://github.com/applitools/tutorial-storybook-angular.git

  1. Navigate to the tutorial-storybook-angular folder

cd tutorial-storybook-angular

  1. Install the NPM modules. This will installl all the dependencies including the eyes.storybook SDK.

npm install

Adding the `eyes.storybook` to an existing project

If you have an existing Storybook project, you can add eyes.storybook SDK by running the following command at the root of your project.

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

Running the test

  1. Run the following command at the root of your project (that has .storybook)

npx eyes-storybook

Notes:

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

Alternatively, if you donā€™t want to use npx, or are using npm version 5 or less, you can manually add the "eyes-storybook" script your Storybook package.json file :

"scripts": {
  "eyes-storybook": "eyes-storybook"
},

Then run npm run eyes-storybook to run your first Storybook test.

You should see that it takes about 10 seconds to startup and complete all the tests. storybook-angular-run-test.png

You should see the results of all the components in seconds. storybook-angular-results

Customizations

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

Advanced Configuration

storybook-common-adv-config.png

CLI Options

storybook-common-cli.png

Independent Storybook Server

storybook-common-server

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Ā© 2018 Applitools. All rights reserved.

Last Updated: 11/18/2018, 8:38:32 PM