Everyone wants to make quick releases, but the look-and-feel UX validation is a manual, slow, and error-prone activity. Any UX-related issues propping up cause huge brand-value and revenue loss, may lead to social-trolling, and, even worse, dilute your user base. This is an area where AI & ML can help. In this hands-on workshop, using examples, we will explore: the importance of automated visual validation how an AI-powered tool, Applitools Visual AI, can solve this problem. Integrate Applitools Visual AI in your Selenium-Java automation and learn by practice: The different AI algorithms various Applitools capabilities and features scale your automation using the Applitools Ultrafast Grid.
34. @BagmarAnand
• Business / Revenue loss
• Brand / Credibility loss
• You lose your users!
If Visual Testing is NOT done …
35
35. @BagmarAnand
• Mostly done manually done
• tedious
• very error prone
• impossible to scale and repeat – especially in days of CD!
• Functional Automation may help – a little
Challenges of Visual Testing
36
39. @BagmarAnand
● Creating the baseline
○ For each browser type / device / viewport size
○ Contextual (not mock / wireframe based)
● Maintaining / Updating the baseline
○ Product evolves, so do your baselines!
● Accurate comparison
○ Dynamic and contextual Data
○ Responsive Design
The 3 Challenges of Visual Testing
40
42. @BagmarAnand
18 Lines of
Code
21 Locators
and Labels
60 Minutes
Navigation
Button
Click
Validation
First, Let’s Provide Initial Coverage
43
43. @BagmarAnand
NEW
Real Bug Escapes
Text Changes
Caught
New Feature
Missed
Visual Bug
Escapes
Broken Locators
2 Late
Stage Bugs
2 Changes
Caught
2 False
Positives
Baseline New Candidate
New Feature
Missed
Next, We Test a New Build
44
44. @BagmarAnand
Test Results Maintenance Action Time
Functional Bug Write Another Validation 15 mins
Visual Bug Try Writing New Validations, Then Give Up 15 mins
Placeholder Text Differences Update Existing Validations 10 mins
New Terms & Conditions Feature Write Another Validation 5 mins
Changed Locators Update Locators 15 mins
Total Time Spent 60 mins
NEW
Finally, We Have to Maintain our Tests
45
45. @BagmarAnand
Plus Those 21 Locators and Labels That Might
Change Without any Notice!
Build & Maintain:
120 Minutes
Bug Detection:
40%
False Positive Rate:
40%
Build and Maintenance Summary
46
47. @BagmarAnand
2 Minutes to Create
Vs. 60 Minutes
1 Locator
Vs. 21 Locators
and Labels
Let’s Provide Initial Coverage Using Visual AI
48
48. @BagmarAnand
Found Functional Bug
NEW
Found Text Changes
Found Visual Bug
Found New Feature
Original New Build
No Broken Locators
All Bugs Found
Text Changes and
New Feature
Detected
0 Broken Locators
Visual AI Handles the New Build
49
49. @BagmarAnand
Test Results Visual AI Maintenance Action Legacy Visual AI
Functional Bug None; Found Automatically 15 mins 0 mins
Visual Bug None; Found Automatically 15 mins 0 mins
Placeholder Text Differences “Thumbs Up” for Each Difference 10 mins 40 secs
New Terms & Conditions Feature “Thumbs Up” for Difference 5 mins 20 secs
Changed Locators Locators No Longer Used 15 mins 0 mins
Total Time Spent 60 mins 1 min
NEW
Visual AI Streamlines Test Maintenance
50
50. @BagmarAnand
Legacy Test Automation Visual AI
40x Faster
21x More Stable
2.5x Increase in
Bug Detection
Eliminate False Positives!
Build & Maintain:
3 Minutes
Locators:
1
Build & Maintain:
120 Minutes
Locators and Labels:
21
Bug Detection:
100%
Bug Detection:
40%
False Positive Rate:
0%
False Positive Rate:
40%
Visual AI Delivers Results
51
51. @BagmarAnand
A single assertion for complete functional
coverage
Bonus: validates the UI
Does not break when the UI changes
No coding skills required to maintain baselines
Seamless scaling
60+ SDKs to integrate with your Automated
Functional Tests
Advantages of Visual Assertions
52
53. @BagmarAnand
Help teams release perfect apps much faster at a reduced
cost.
Inventers of Visual AI that replicates the human eye and
brain, looks at every screen and page in seconds, and spots
app regressions that truly matter.
Applitools Visual AI
54
54. @BagmarAnand
Visual AI
Industry’s only AI powered computer vision
replicates the human eye & brain.
SDKs & Integrations
SDKs to augment all modern test frameworks, and
integrations with popular source control, CI, and
defect tracking systems.
Perfection Across All
Screens
Ultrafast Grid ensures visual perfection across all
browsers, screens, and viewports.
Ultrafast Grid Architecture >>
Speed of CI/CD
Execute tests in seconds vs minutes for faster builds
and on-time delivery.
Ultimate Efficiency
Create tests faster & with fewer brittle locators and
labels.
Increase Test Coverage
Open-ended, AI powered assertions, reduce code,
maintenance while increasing test coverage.
Applitools Cloud
Visual AI Platform
Adding Applitools Visual AI to your existing test automation framework allows quality teams to release perfect apps
faster and as a reduced cost.
One Intelligent Platform
55
58. @BagmarAnand
1. Prequisites
2. Run test (Selenium-Java or Appium-Java)
3. Add “eyes” to your automation using Applitools Visual AI
4. Scale your test execution using Applitools Ultrafast Grid
Workshop Activity
59
59. @BagmarAnand
• Web
• Clone - http://bit.ly/getting-started-with-visualtesting
• Open project in IDE
• Refresh dependencies
• Android
• Clone - http://bit.ly/getting-started-with-mobile-visualtesting
• Open project in IDE
• Refresh dependencies
• Setup Android SDK, Emulator/Device
1. Prerequisites
60
60. @BagmarAnand
• Web
• http://bit.ly/getting-started-with-visualtesting
• Run test: mvn test –Dtest=HelloWorldTest
• Android
• http://bit.ly/getting-started-with-mobile-visualtesting
• Connect your Android device / start emulator
• Run test: mvn test –Dtest=CalcTest
2. Run test (Selenium/Appium-Java)
61
61. @BagmarAnand
• Sign up for free Applitools account - http://bit.ly/ApplitoolsSignup
• Add APPLITOOLS_API_KEY to your environment variables
• Web
• Run test: mvn test –Dtest=EyesTest
• Android
• Run test: mvn test –Dtest=EyesTest
3. Add “eyes” to your tests
62
68. @BagmarAnand
Applitools Visual AI
Solution for the challenges in Visual Testing
● Creating the baseline
○ For each browser type / device / viewport size
○ Contextual (not mock / wireframe based)
● Maintaining / Updating the baseline
○ Product evolves, so do your baselines!
● Accurate comparison
○ Dynamic and contextual Data
○ Responsive Design
Automatic creation of baselines
Simple to update the baselines
AI Algorithms
70