Full webinar recording can be found here: https://youtu.be/zlRLui6WC7M -------- Digital makes the world go ‘round, and it’s software quality on the one hand, and speed of delivery on the other, that make or break today’s business endeavours. In the era of digital experience, where the user is king, achieving quality is crucial to a business’s success -- but speed of delivery cannot be ignored anymore, or you will feel your competition breathing down your neck. Therefore, continuous refinement of the Dev-Test-Deploy pipeline is how businesses strive to achieve both quality and speed of delivery. In this unique session we will combine insider’s knowledge of industry trends and key shifts, alongside hands-on tools, tips, and best practices -- all of which will directly affect your day-to-day work processes, through-out the entire product release lifecycle. Listen to guest speaker Diego Lo Giudice (Vice President, Principal Analyst at Forrester) and Gil Tayar (Sr. Architect at Applitools), and learn: * Industry overview, importance of test automation, and where is this all going * Importance of digital experience on the bottom line – and how companies address this in their dev-test processes * AI-powered tools and solutions: how do they factor in to the agile and test automation equation * Agile, Automation and CI-CD: How visual testing must too be automated with Agile and DevOps, as part of the Continuous Delivery capabilities and practices * Real life use cases and a live demo from Applitools

1. QUEST FOR FLAWLESS UX-UI:
Trends, Threats, Challenges, and Test Automation Tools that
Help Leading Engineers Deliver the Goods
Gil Tayar
Sr. Architect & Evangelist, Applitools
@giltayar
Diego Lo Giudice
VP & Principal Analyst, Forrester Research
@dlogiudice

2. Automating visual software testing
Visual Testing -
Quality at Speed
Gil Tayar, Senior
Architect & Evangelist
@giltayar

3. Automating visual software testing
Agility

4. Automating visual software testing
Agility
“ability of a business system to rapidly respond to change”
– Wikipedia

5. Automating visual software testing
Agile
Development

6. Automating visual software testing
Lots of changes = Lots
of problems?

7. Automating visual software testing
Minimize Friction

8. Automating visual software testing
DevOps
Code Build Test Deploy Monitor
CI CD

9. Automating visual software testing
Real-world Agile Development
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor
Code Build Test Deploy Monitor

10. Automating visual software testing
Testing
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Code Build Deploy Monitor
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

11. Automating visual software testing
Types of Testing
● Unit
● Component
● Integration
● E2e
● Functional
● Acceptance
● Production Monitoring
● Oh, Myyy...

12. Automating visual software testing
How do we improve
quality while still going
at speed?

13. Automating visual software testing
Types of Testing
● Unit
● Component
● Integration
● Functional
● E2e
● Acceptance
● Production Monitoring
● Oh, Myyy...

14. Automating visual software testing
Types of Testing
● Unit
● Component
● Integration
● Functional
● E2e
● Acceptance
● Production Monitoring
● Oh, Myyy...
Visual Aspect

15. Automating visual software testing

16. Automating visual software testing
And we’ve been mostly
ignoring it till now

17. Automating visual software testing

18. Automating visual software testing

19. Automating visual software testing
https://youtu.be/vJG698U2Mvo

20. Automating visual software testing
Without Automated
Visual Testing, Your
Quality Suffers

21. Automating visual software testing
But that’s
just more
work

22. Automating visual software testing
Types of Testing
● Unit
● Component
● Integration
● Functional
● E2e
● Acceptance
● Production Monitoring
● Oh, Myyy...

23. Automating visual software testing
Functional UI Testing
● Do something
○ Open a browser
○ Navigate to page
○ Click, change form fields, click, ....
● Validate result
○ Expect this field to have that value
○ Expect this text to be that string
○ Expect this checkbox to be checked

24. Automating visual software testing
Functional UI Testing
● Do something
○ Open a browser
○ Navigate to page
○ Click, change form fields, click, ....
● Validate result
○ Expect this field to have that value
○ Expect this text to be that string
○ Expect this checkbox to be checked

25. Automating visual software testing
Functional Validation is Time
Consuming and Fragile
● Figuring out the “selectors” is time consuming work
○ And fields move all the time
● Extracting the value is work
○ A checkbox turns into two radio buttons
● Functionality changes
○ Functionality moves from page to page

26. Automating visual software testing
Holistic Validation
● Do something
○ Open a browser
○ Navigate to page
○ Click, change form fields, click, ....
● Validate result
○ Expect this field to have that value
○ Expect this text to be that string
○ Expect this checkbox to be checked

27. Automating visual software testing
Holistic Validation
● Do something
○ Open a browser
○ Navigate to page
○ Click, change form fields, click, ....
● Validate result
○ Expect this field to have that value
○ Expect this text to be that string
○ Expect this checkbox to be checked

28. Automating visual software testing
Holistic Validation
● Do something
○ Open a browser
○ Navigate to page
○ Click, change form fields, click, ....
● Validate result
○ Check everything on the page

29. Automating visual software testing
Visual Testing
● More quality by checking
the CX
● While also speeding up
functionality tests

30. Automating visual software testing
If it’s so great, why
hasn’t it been tried
before?

31. Automating visual software testing
Sample Tools
CODE / SCRIPT
● Needle (Python WD)
● Gemini (JS DSL)
● Selenium Visual Diff (Java WD)
● VisualCeption (PHP CodeCeption)
● Shoov (JS WebDriverIO)
● Vizregress (.NET WD)
● Rspec Page Regression (Capibara)
● Applitools Eyes (Appium, Esresso, XCUI)
● PhantomCSS (JS CasperJS)

32. Automating visual software testing
How Does It Work?
You send us screenshots of your app
We compare the screenshots with baseline images
We report any differences found
You accept or reject the differences

33. Automating visual software testing
How Does It Work?
You send us screenshots of your app
We compare the screenshots with baseline images
We report any differences found
You accept or reject the differences

34. Automating visual software testing
Addition to Functional Tests

35. Automating visual software testing
How Does It Work?
You send us screenshots of your app
We compare the screenshots with baseline images
We report any differences found
You accept or reject the differences

36. Automating visual software testing

37. Automating visual software testing

38. Automating visual software testing

39. Automating visual software testing

40. Automating visual software testing
And More
• Image scaling
• 1 pixel offsets in element positioning
• Dynamic content
• Moving elements
• Images of different size
• Performance

41. Automating visual software testing
Applitools Eyes
• Handles anti-aliasing, pixel offsets, color similarity, and image scaling
• No error ratio configuration required
• Supports layout / structure matching
• Dynamic and moving content
• Compare images of different sizes
• Validates full UI pages
• Fast!

42. Automating visual software testing
How Does it Work?
You send us screenshots of your app
We compare the screenshots with baseline images
We report any differences found
You accept or reject the differences

43. Automating visual software testing
REPORT DIFFERENCES
As files on the file system

44. Automating visual software testing
REPORT DIFFERENCES
As a gallery

45. Automating visual software testing
DEMOVISUAL LAYOUT
MATCHING

46. Automating visual software testing
How Does it Work?
You send us screenshots of your app
We compare the screenshots with baseline images
We report any differences found
You accept or reject the differences

47. Automating visual software testing
UPDATE THE BASELINE
Gemini

48. Automating visual software testing
BASELINE BRANCHING
• Keep CI tests green
• Multiple app versions
• Revert to previous baselines
• A visual change log (documentation)
1 1 1
2
1
2
3 3
2
4
4

49. Automating visual software testing

50. Automating visual software testing
DEMOAUTOMATED MAINTENANCE

51. Automating visual software testing
Types of Testing
● Unit
● Component
● Integration
● Functional
● E2e
● Acceptance
● Production Monitoring
● Oh, Myyy...

52. QUESTIONS?
Gil Tayar
Sr. Architect & Evangelist, Applitools
Twitter: @giltayar
Gil’s latest blog post:
Not Only Cars:
The Six Levels of Autonomous Testing
http://testautomation.applitools.com/post/166742980267/not-only
-cars-the-six-levels-of-autonomous
Diego Lo Giudice
VP & Principal Analyst, Forrester Research
Twitter: @dlogiudice
Diego’s latest research report:
How AI Will Change Software
Development and Applications
http://reprints.forrester.com/#/assets/2/108/'RES121339'/reports