/cypress_visual_testing

cypress testing pwa apps with different screen sizes

Primary LanguageJavaScript

Frame Work Setup


This is a based on cypress with the cypress-image-snapshot pluging

Main reason for this project is to test the page responsiveness with multiple page sizes in a single test

Pre prerequisites

Install node https://nodejs.org/en/download/

node --version

Project set up
Clone the project from the repo

Open the project from the editor

Go to terminal and install all required dependencies using package.json

Most of the time editor will install the dependencies automatically

plugin is added inside the plugin folder

npm install


We have used cypress 4.1

Execute the tests

  • To execute the tests on you have to run the test first,it will take the sanp shots of your web pages and saved in the screen shot folder this will automatically generated.
  • Automatic folder will generated when you run the test again with the screen shot comparisions reports.
  • Run the below command twice, first time it will take the snap shots and second run it will compare the snapshots and generate the reports.
  • Test file name is example_spec.js under integration folder
npx cypress run -b chrome
  • to update the snap shots run
npx cypress run --env updateSnapshots=true

  • After completed test run

Screenshot 2022-07-27 at 16 08 37

  • Image comparission report on failed test cases,Folders with the images will automatically generated in the project root folder.

Screenshot 2022-07-27 at 16 07 05