How to visually test VueJS apps using Cypress.io and Applitools [step-by-step tutorial]

How Applitools works with Cypress.io

Step by Step Guide

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue create todoapp
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
? Please pick a preset: Manually select features
? Check the features needed for your project:
(Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
>(*) E2E Testing

? Check the features needed for your project: Babel, Linter, E2E

? Pick a linter / formatter config:
(Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
>ESLint + Prettier

? Pick additional lint features:
(Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
? Pick a E2E testing solution: (Use arrow keys)
>Cypress (Chrome only)
Nightwatch (Selenium-based)

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
(Use arrow keys)
>In dedicated config files
In package.json
$ yarn serve
image7
yarn test:e2e
image1
npm run test:e2e
image3
npm install @applitools/eyes.cypress --save-dev
{
"pluginsFile": "tests/e2e/plugins/index.js",
"baseUrl": "http://localhost:8081",
"supportFile": "tests/e2e/support/index.js"
}
npx eyes-setup
cy.eyesOpen({
appName: '...',
testName: '...',
browser: { ... },
});
cy.eyesCheckWindow('...');
cy.eyesClose();
npm run test:e2e
image5
image4
label {
font-weight: 600;
}
image2
image6
image8

Conclusion

--

--

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