slides for talk "Visual Regression using AI powered Applitools Eyes" at vodQA Gurgaon on 4th May 2019,

1. Shama & Nal
Visual Regression using AI
Powered Applitools Eyes

2. Key Takeaways
• What, Why and How of Visual testing?
• Available Tools for Visual Testing
• Why Applitools Eyes?
• Set-up and pre-requisites
• Demo for Web Apps

3. What is Visual Testing?
Verifying the GUI is displayed as per the User’s expectations
focusing on layouts, colors, sizes and shapes

4. Let’s watch this..
https://www.youtube.com/watch?v=ubNF9QNEQLA

5. Some visual bugs

6. Some more

7. Some more

8. Some more

9. Why Visual Testing is important?
• User experience
• Company brand
• Fasten the Mobile app release process

10. Why automate Visual Testing?
• Manual Visual testing is error prone
• Too many test environments
• Browsers
• Devices
• OS
• Faster feedback

11. Tools for Visual Testing

12. Why Applitools?
• Supports various test tools/frameworks and languages
• Selenium, Cypress, Appium, Perfecto, Coded UI
• Java, C#, JS, python
• AI-powered cognitive vision
• Cross device and browser tests (unique viewport combination)
• Mobile hybrid and Native apps
• Web apps
• Robust user access management
• Available on public or private cloud
• Automate your test maintenance
• Automate PDFs

13. contd…
• Leverage your existing tests
• Integrates with your toolchain
• Automation Tools, Collaboration Tools, CI/CD and more
• Build custom visual reports

14. How Applitools Eyes work?
Step 1 :
Capture visual differences via full-page screenshots
Step 2 :
Compare visual differences across every platform
Step 3 :
Run visual tests automatically with every release

15. Set-up used for Demo
• Development environment
• Java 8
• Maven
• Your existing Test Automation Framework
• Applitools API Key

16. Demo for WebApps

17. Getting started with Applitools Eyes
• Import the SDK into Maven's pom.xml
• Instantiate Eyes and pass your API key to Applitools
• Set the application (AUT) name, the test name and set the browser's
viewport size

18. Contd…
• Generate screenshot.
• End the test

19. Match Levels
• EXACT
• Pixel by Pixel Comparison
• STRICT
• Mimics the human eyes.
• Ignores trivial mismatches (antialiasing, small pixel movements, etc.)
• CONTENT
• Similar with STRICT plus it ignores colour changes
• LAYOUT
• Compares the layouts
• Checks the elements locations

20. Questions

21. References
• https://testautomationu.applitools.com/automated-visual-testing-a-fast-path-to-test-automation-
success/
• https://applitools.com
• https://www.joecolantonio.com/top-21-free-visual-validation-tools-testers/
• https://applitools.com/tutorials/selenium-java.html
• Code Sample used during the session - https://github.com/nalinikanth/AppliToolsVodQADemo