MyDreamApp

Show case Visual refression automation Technology Angular version 8.3.8. Percy

Pursope:

This POC with try to answer following questions Show case how Visual regression testing works? How Cypress and Percy visula regression are diffrent? Why Percy is better than Cypress?

Reference taken

Basics Cypress Visual regression refrence https://medium.com/norwich-node-user-group/visual-regression-testing-with-cypress-io-and-cypress-image-snapshot-99c520ccc595

For detail instalation percy with cypress https://docs.percy.io/docs/cypress-tutorial

Details to setup environment variables https://docs.percy.io/docs/environment-variables

Variable setup

export PERCY_TOKEN=8faa7d4a148a41f5e5624274cccee73d8ffa79291ed336554c01399e3eef7535

export PERCY_BRANCH = local

PERCY_BRANCH: The branch the build is being run in. Defaults to the current git branch.

PERCY_TARGET_BRANCH: The branch to compare against. Defaults to master.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running Cypress unit tests

npm run cypress:open

Running Cypress with percy visula regress testing

npm run test

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.