Show case Visual refression automation Technology Angular version 8.3.8. Percy
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.
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.
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.
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.
Run ng test to execute the unit tests via Karma.
npm run cypress:open
npm run test
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.