Screenshots diff

How to write tests?

Feature File: https://github.com/adobecom/nala/tree/main/features/visual

Page Object: https://github.com/adobecom/nala/tree/main/selectors

Test File: https://github.com/adobecom/nala/tree/main/tests/visual

Examples to write tests:

1. Take screenshots for the same content with code from Milo Main and Milo Stage

https://github.com/adobecom/nala/blob/main/tests/visual/caas/cards.test.js

2. Take screenshots for the same content with code from Milo Main and Milo Stage, but add actions before taking

https://github.com/adobecom/nala/blob/main/tests/visual/feds/feds.test.js

3. Take screenshots for selector, not full page

https://github.com/adobecom/nala/blob/main/tests/visual/feds/feds.test.js

4. Take screenshots for full page but hide header and footer

https://github.com/adobecom/nala/blob/main/tests/visual/milo/milo.test.js

5. Take screenshots for different websites base on data driven

https://github.com/adobecom/nala/blob/main/tests/visual/sot/sot.test.js

6. Take screenshots for multiple steps and actions

https://github.com/adobecom/nala/blob/main/tests/visual/uar-ai/quiz.ai.test.js https://github.com/adobecom/nala/blob/main/tests/visual/uar/quiz.test.js

Examples to run them (you need key and secret for S3):

For UAR:

node run.js -c visual -p chrome,ipad,iphone -g uar-screenshots
node libs/screenshot/merge.js screenshots/uar
node libs/screenshot/compare.mjs screenshots/uar
node libs/screenshot/uploads3.js screenshots/uar

For Milo:

node run.js -c visual -p chrome,ipad,iphone -g milo-screenshots
node libs/screenshot/merge.js screenshots/milo
node libs/screenshot/compare.mjs screenshots/milo
node libs/screenshot/uploads3.js screenshots/milo

For Feds:

node run.js -c visual -p chrome,ipad,iphone -g feds-screenshots
node libs/screenshot/merge.js screenshots/feds
node libs/screenshot/compare.mjs screenshots/feds
node libs/screenshot/uploads3.js screenshots/feds

For updating the base one, use the command below to clean and run again. This is an example for milo:

node libs/screenshot/cleans3.js milo screenshots/milo

Result website (Need VPN):

http://nala-auto.corp.adobe.com/

Add SOT screenshots:

http://nala-auto.corp.adobe.com/imagediff/sot

Just add more links if you need in data/sot/sot-basic.yml.