Skip to content

donrifad/cypress_visual_testing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

cypress testing pwa apps with different screen sizes

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published