** WATCH THE FULL RECORDING HERE: https://youtu.be/s56XGkjqLJw ** In the competitive world of mobile apps, functional bugs or poor GUI will turn off a prospective user and often result in revenue loss. Yet the pressure to shorten release cycles is overwhelming, leaving little time for testing and no room for error. ​​​​​​​ So, how do you ensure that all of the visual elements of your app are functioning flawlessly without breaking the bank or delaying time-to-market? The answer is Automated Visual Testing, an easy and reliable method to automatically validate that your app looks and acts as designed across devices, browsers, operating systems and form factors. Watch this webinar with mobility expert Manish Mathuria (Infostretch) and automated UI validation expert Adam Carmi (Applitools), and discover: * What Automated Visual Testing involves * How it can help you helps shorten testing cycles while increasing coverage * The landscape of tools and technologies available for this increasingly important type of testing * Industry-leading best practices to quickly achieve maximum value with automated visual testing

1. ©2016 Infostretch. All rights reserved. 1
Adam Carmi
Co-Founder and CTO
Applitools
BEST PRACTICES OF AUTOMATED
VISUAL TESTING
GETTING IT RIGHT FOR THE BEST UX
Manish Mathuria
Founder and CTO
Infostretch

2. ©2016 Infostretch. All rights reserved. 2
Agenda
• What is Visual Testing?
• Visual Testing Tools Requirements
• What kinds of apps must be tested Visually?
• Visual Testing Process
• Best Practices
• Demo

3. ©2016 Infostretch. All rights reserved. 3
Visual Testing in the Lifecycle
Indispensable
Late in the
lifecycle
Manually
Intensive
Does not
Capture
Visual
Defects

4. ©2016 Infostretch. All rights reserved. 4Image Source: http://baymard.com/blog/bugs-and-user-experience
Visual Bugs

5. ©2016 Infostretch. All rights reserved. 5

6. ©2016 Infostretch. All rights reserved. 6
Visual Testing - What do Testers Want?
Incremental Efforts / Automated Validation
• Effort for baseline and maintenance of the same
No False Positives
• Support for Dynamic Content
• Smart validation: ignore/validate viewport portions, comparison with tolerance level
Effective Error Reporting
• Visual Defects Reporting Integrated into Test Results
• Failure Analysis, video reports
Technical Capabilities
• Ignoring Dynamic Content
• Integration Into existing test automation framework
• Layout verification
• Screen resolution independent

7. ©2016 Infostretch. All rights reserved. 7
Visual Testing – Hi-Pot Candidates
•
•
•
•
•
Responsive
High Form
factors
Content
Rich
Device
fragmentatio
n

8. ©2016 Infostretch. All rights reserved. 8
THE WORKFLOW
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

9. ©2016 Infostretch. All rights reserved. 9
THE WORKFLOW
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

10. ©2016 Infostretch. All rights reserved. 10

11. ©2016 Infostretch. All rights reserved. 11

12. ©2016 Infostretch. All rights reserved. 12
APPLITOOLS EYES
• Handles anti-aliasing, pixel offsets, color similarity, and image scaling
• Dynamic and moving content
• Compare images of different sizes
• No error ratio configuration required
• Validates full UI pages
• Fast!
• Supports layout / structure matching

13. ©2016 Infostretch. All rights reserved. 13
DEMOIMAGE MATCHING

14. ©2016 Infostretch. All rights reserved. 14
THE WORKFLOW
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

15. ©2016 Infostretch. All rights reserved. 15
DEMO+ +

16. ©2016 Infostretch. All rights reserved. 16
FULL PAGE VALIDATION
• More coverage
• Catch unexpected bugs
• Enables codeless baseline maintenance
– Everyone can do it
– Immediately
– Avoid element locators maintenance

17. ©2016 Infostretch. All rights reserved. 17
TEST INTEGRATION OPTIONS
• Write dedicated visual tests
– Maximal control over visual coverage and AUT manipulation
– Moderate effort
• Add visual checkpoints to your existing functional tests
– More ROI out of existing tests
– Moderate to light effort
• Add implicit visual validations to your test framework
– Trivial to implement
– Full page validation
– May result with duplicate validation points
– Exclude tests that are heavily parameterized on data

18. ©2016 Infostretch. All rights reserved. 18
THE WORKFLOW
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

19. ©2016 Infostretch. All rights reserved. 19
DEMOBASELINE MAINTENANCE

20. ©2016 Infostretch. All rights reserved. 20
SPECIAL OFFERS!
Infostretch
Get a free 4-hour assessment of your visual testing strategy:
http://bit.ly/infostretch-get-free-4
Applitools
Join our free Visual Testing Master Class – learn more advanced features and in-depth
capabilities: https://goo.gl/awXPAg