Visually Test Vue.js application using Applitools and Storybook [step-by-step tutorial]

How Applitools works with Storybook

pasted image 0 11

Step by Step Guide

npm install -g @vue/cli
yarn global add @vue/cli
yarn
git checkout --track origin/vuejs-testing-with-storybook
yarn serve
Screenshot 2019 04 11 at 23.33.56
npx -p @storybook/cli sb init --type vue
yarn storybook
yarn storybook
Screenshot 2019 04 11 at 23.36.56
4 1
6
npx eyes-storybook
5

Visual UI tests with custom viewports

  • Environment variables
  • The applitools.config.js file
npx eyes-storybook
Screenshot 2019 04 12 at 00.20.15
Screenshot 2019 04 12 at 00.23.24

Tweaking the Concurrency

npx eyes-storybook
Screenshot 2019 04 12 at 00.44.21
Screenshot 2019 04 12 at 00.45.46
npx eyes-storybook
Screenshot 2019 04 12 at 00.58.48
Screenshot 2019 04 12 at 01.01.43

More Reading for you

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Applitools

Applitools

Deliver visually perfect web and mobile apps with AI-powered end-to-end visual testing & monitoring. Get started, free: http://bit.ly/ApplitoolsFree