Skip to content

Screenshots diff

Jump to bottom
Jacky Sun edited this page Jun 11, 2024 · 8 revisions

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 form 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 form 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.

Clone this wiki locally