Organizations strive to deliver the best possible digital experience to their customers. One way to ensure this is by testing their applications, and many organizations perform functional testing to verify that the application behavior is working correctly. However, there are areas that functional testing cannot cover. This is where visual testing comes in. Visual end-to-end testing is a complementary solution to functional testing. When testing the UI of an application, a functional test doesn’t check for data, images, elements, layouts, or styles. While the application may be behaving correctly and your functional tests are passing with flying colors, you may be overlooking broken or missing visual components. Without the added visibility of visual testing you run the risk of releasing updates with missing images or flawed layouts that can frustrate users. So how can you be sure that your applications function and display exactly as intended? By pairing functional and visual testing, missing or broken items are caught earlier, any visual regressions are detected and flagged for review, and you can rest easy knowing your apps are running smoothly and looking their best. In this webinar, Sauce Labs experts will discuss visual end-to-end testing and how it can help detect visual regressions. You will also learn how visual testing complements functional testing and how to set up your visual tests to run alongside your functional tests. Key Takeaways: - Understand what visual testing is and how it can help detect visual regressions - Learn how to add visual testing to your existing functional tests - See how Sauce Visual works and how it can help your team move fast with confidence

1. October, 2020
Sauce Visual
What Functional Tests Overlook,
See It with Visual Testing
Larry Ho
Product Marketing

2. CONFIDENTIAL
THE CUSTOMER EXPERIENCE
IS NOW COMPLETELY DIGITAL

3. October, 2020
Not Just Having a Digital Experience
3
To Excel, You Must Deliver Digital Confidence
You are creating and delivering the best possible user experience for
your customers.
Your web applications look, function, and perform exactly as intended before
your users ever interact with them.
Your customers have no doubt that your web applications will work flawlessly every
single time they use them.
Digital confidence means knowing:
Source: Adopt Agile and DevOps to Drive Digital Business Success, Jan. 2020

4. October, 2020
To create a world of digital confidence.
SAUCE LABS VISION STATEMENT

5. Enterprise Security & Support
5
Sauce Labs Continuous Testing Cloud
Your Secret Sauce to Ensuring Digital Confidence
Headless
Browsers
Desktop
Browsers & OSs
Mobile Emulators
and Simulators
Scalable, Always On & Available from Anywhere Test Infrastructure
Real Devices
Analytics Debugging
Videos &
Screenshots
Productivity Tools to Find & Fix Failures Fast
Live Testing
Functional Performance Visual
Visibility into the 360° User Experience
API

6. October, 2020
Visual Testing

7. CONFIDENTIAL
Digital Confidence with Visual
7
Digital confidence means knowing your web
applications look, function, and perform
exactly as intended.
Visual testing is how you ensure your app
appears to the user as you intended.

8. CONFIDENTIAL
Spot the Difference
https://en.wikipedia.org/wiki/Spot_the_difference

9. CONFIDENTIAL
Spot the Difference
https://en.wikipedia.org/wiki/Spot_the_difference

10. CONFIDENTIAL
Example: Purchase Screen
EXPECTATION REALITY

11. CONFIDENTIAL
Challenges
Impact to Teams
Speed Manual testing is slowing down release cycles
Quality Releasing visual bugs into production
Time Time spent fixing the issues

12. Assertions: only test what has been explicitly asserted.

13. What if data is missing? ✘ Functional Tests pass ✓ 😱

14. What if images are broken? ✘ Functional Tests pass ✓ 😱

15. What if elements are missing? ✘ Functional Tests pass ✓ 😱

16. What if layout is broken? ✘ Functional Tests pass ✓ 😱

17. What if styles do not load? ✘ Functional Tests pass ✓ 😱

18. October, 2020
Sauce Visual

19. October, 2020 CONFIDENTIAL
Sauce Visual
19
Visual Component
Instantly get automated visual testing across
your React, Vue, and Angular components.
Visual End-to-End (E2E)
Harness the power of automation to test UIs
across different browsers and resolutions.
Automatically detect visual regressions across your application UI and increase test
coverage by performing both visual and functional testing in the same test run.

20. October, 2020 CONFIDENTIAL
Testing Pyramid
Unit
3
Integration
API Testing
2
End-to-End
Functional Testing
Visual Testing
Performance Testing
1

21. A Snapshot is Worth a Thousand Assertions
BEFORE: Assertions Example AFTER: Snapshot code
const h1 = await browser.$('h1');
const h2 = await browser.$('h2');
const colorH1 = await h1.getCSSProperty('color');
const colorH2 = await h2.getCSSProperty('color');
assert.strictEqual(colorH1, "rgb(255, 0, 0)");
assert.strictEqual(colorH2, "rgb(0, 255, 0)");
const sizeH1 = await h1.getSize();
const sizeH2 = await h2.getSize();
assert.strictEqual(sizeH1.width, 233);
assert.strictEqual(sizeH1.height, 35);
assert.strictEqual(sizeH2.width, 200);
assert.strictEqual(sizeH2.height, 25);
await browser('/*@visual.snapshot*/', 'Headers
Snapshot');
await browser('/*@visual.end*/');

22. CONFIDENTIAL
Customer Quote
“With Sauce Labs, we have a single visual snapshot for visual and
functional regressions, so less assertions are needed. This reduces the
complexity of writing and maintaining automated tests.
Zohar Liran, Head of Data Intelligence Group

23. Example: Pixel-based Image Diff

24. Example: Smart Hybrid Diff

25. Example: Smart Hybrid Diff

26. Example: Smart Hybrid Diff

27. Example: Smart Hybrid Diff

28. October, 2020 CONFIDENTIAL
Automated Visual Testing Benefits
Reduces time spent writing and maintaining scripts
Simplifies UI testing
Test both the functional and visual aspects of the UI
Increases coverage
Run tests in parallel for fast execution
Accelerates release velocity
Catches visual regression before it reaches production
Improvements to visual quality

29. CONFIDENTIAL
Customer Quote
“[The solution]...combines an automation testing tool with a visual
regression tool. We realized this would save QA time, make it easy to
write and maintain tests, and help us debug any issues we uncover,”
Daniel Gefen, Engineering Manager

30. October, 2020
Thank you

31. October, 2020
Q&A

32. Thank you for attending!
Slides and session recordings will be sent via email.
We want to hear from you!
Sign up to join the Sauce Labs UX Research Panel and help us continuously
improve our platform and capabilities. bit.ly/SauceUXPanel
32
What Functional Tests Overlook, See It With Visual Testing
February 24, 2021
SauceCon Online
Registration is now open for SauceCon Online, Sauce Labs
annual user conference, taking place April 20-22, 2021.
saucecon.com