Automated Visual Testing

Dec 2018 QE Sharing on Applitools, Wraith and Building Our Own Visual Testing tool aka Freezer (WIP).

https://github.com/sshinnee/freezer

Transcript

1. Automated Visual Testing GovTech QE Chapter December 2018
2. Responsiveness
3. Browser Compatibility
4. Why Applitools? Visual Automated Testing DevOps Integration Dashboard and Project Management
5. Visual Automated Testing Visual Automated AI Testing - Applitools
6. Applitools Overview Automation Script File applitools.eyes Selenium Baseline Files/Images Dashboard match_window
7. Applitools Demo
8. Need Benchmarks Need Use Cases Need User Pain Points
9. Other Visual Automated Testing Options - Wraith - WebdriverCSS - Galen Framework - Phantom CSS - Gemini
10. Visual Automated Testing - Wraith - WebdriverCSS - Galen Framework - Phantom CSS - Gemini
11. Wraith - Developed at BBC - Used for checking CSS changes; intentional and unintentional Browser Automation Controller Image Comparison Usage Headless Browser CasperJS PhantomJS SlimerJS Selenium Webdriver + ChromeDriver Command Line Existing Library ImageMagick wraith capture config.yml wraith spider config.yml wraith history config.yml
14. Wraith Promise • takes screenshots of your webpages • runs a comparison task across them • outputs a diff PNG file comparing the two images, and a data.txt file which contains the percentage of pixels that have changed • packages all of this up into a gallery.html, ready for you to view • if any screenshot's diff is above the threshold you specified in your configuration file, the task exits with a system error code (useful for CI) • the failed screenshot will also be highlighted in the gallery
15. Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results
16. Ownself develop ownself?
17. Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results
18. Similarity Measures + Mean Squared Error + Structural Similarity Index Reference: https://www.pyimagesearch.com/2014/09/15/python-compare-two-images/
19. Freezer demo
20. Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results
21. That’s all! Thank you and feedback welcomed ~