Setup Cypress in Vue.js 2 — part 1

Installation

open terminal or cmd from root of your project and run following command

npm install cypress

Check if cypress successfully installed all its dependency using below command, if not working you can debug here

npx cypress open

This should open a window similar to enclosed one if installed successfully

Above command would also create ‘cypress’ folder in root of your project with following folders

• fixtures — use to add mock api response to this folder
• integration — e2e testing spec files of your application
• plugins — provides a way to extend cypress behavior
• support — create custom cypress commands

Run (headless mode)

You can run example specs (downloaded while installing cypress) using following command

npx cypress run

Note: running above command would generate screenshots and videos of the test executed above, if you are using git you should update .gitignore to exclude these files from source control

Run (chrome browser)

npx cypress open

Above command would open cypress instance in chrome popup and it will show all the integration tests (downloaded while installing cypress). Click on ‘Run all specs’ button would execute all the specs in the new chrome tab and show the results

So far I haven’t mentioned about Vue at all, that’s flexibility of cypress it really doesn’t depend on what front-end framework you have. In the next story Ill include

• creating first spec in vuejs project
• mocking API response using fixtures
• configure npm script to include cypress

Still here? You may want to check part-2