Getting Started with Visual Testing

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

@BagmarAnand
Getting started with Visual Testing
Anand Bagmar
Software Quality Evangelist

ABOUT ME
BagmarAnand
linkedin.com/in/anandbagmar/

@BagmarAnand
Automation
3

@BagmarAnand
Bugs still escape
Traditional automated testing frameworks are not built for modern apps
4

@BagmarAnand
@BagmarAnand

@BagmarAnand
Bugs escape because our approach to
testing is incorrect
@BagmarAnand

@BagmarAnand 7
@BagmarAnand
Spot the Difference!

@BagmarAnand 8
@BagmarAnand
Spot the Difference!

@BagmarAnand 9
@BagmarAnand
Spot the Difference!

@BagmarAnand 10
@BagmarAnand
Spot the Difference!

@BagmarAnand
@BagmarAnand
Mundane
Error prone
Tedious
Running against Time
Approach to Testing is Incorrect

@BagmarAnand
But, we are testing real
software products
@BagmarAnand

@BagmarAnand 13
@BagmarAnand
Text, Images, Responsive-pages,
Form-factors, User-experience
Product has Context!

@BagmarAnand
Spot the Difference!
14

@BagmarAnand
Spot the Difference!
15

@BagmarAnand
Bugs still Escape
16

@BagmarAnand
Bugs still Escape
17

@BagmarAnand
Bugs still Escape
18

@BagmarAnand
Bugs still Escape
19

@BagmarAnand
Bugs still Escape
20

@BagmarAnand
Bugs still Escape
21

@BagmarAnand
Bugs still Escape
22

@BagmarAnand
Bugs still Escape
23

@BagmarAnand
Bugs still Escape
24

@BagmarAnand
Bugs still Escape
25

@BagmarAnand
What does this mean?

@BagmarAnand
Add Eyes to the Test Automation Pyramid
28

@BagmarAnand
What is missing here?

@BagmarAnand
How do you ensure what
was working before, is
working now as well!

@BagmarAnand
UX / Visual Testing
The Missing Piece

@BagmarAnand
Add Visual Automation in Test Pyramid
32

@BagmarAnand
Visual Testing
How do you do it?

@BagmarAnand
• Mostly done manually done
• Functional Automation can help
Visual Testing
34

@BagmarAnand
• Mostly done manually done
• tedious
• very error prone
• impossible to scale and repeat – especially in day...

@BagmarAnand
Solution
Visual Test Automation

@BagmarAnand
• Create baselines by taking screenshots of expected UI
• Compare screenshots
• Whole page
• Snippets
• Updat...

@BagmarAnand
Challenges of Automating
Visual Testing

@BagmarAnand
● Creating the baseline
○ For each browser type / device / viewport size
○ Contextual (not mock / wireframe b...

@BagmarAnand
AI in Visual Test Automation

@BagmarAnand
A Simple
One Page,
Single Browser
Example
42

@BagmarAnand
18 Lines of
Code
21 Locators
and Labels
60 Minutes
Navigation
Button
Click
Validation
First, Let’s Provide In...

@BagmarAnand
NEW
Real Bug Escapes
Text Changes
Caught
New Feature
Missed
Visual Bug
Escapes
Broken Locators
2 Late
Stage B...

@BagmarAnand
Test Results Maintenance Action Time
Functional Bug Write Another Validation 15 mins
Visual Bug Try Writing N...

@BagmarAnand
Plus Those 21 Locators and Labels That Might
Change Without any Notice!
Build & Maintain:
120 Minutes
Bug Det...

@BagmarAnand
Login Page to Test
Remember Our
Simple Example?
Let’s Try Again.
47

@BagmarAnand
2 Minutes to Create
Vs. 60 Minutes
1 Locator
Vs. 21 Locators
and Labels
Let’s Provide Initial Coverage Using ...

@BagmarAnand
Found Functional Bug
NEW
Found Text Changes
Found Visual Bug
Found New Feature
Original New Build
No Broken L...

@BagmarAnand
Test Results Visual AI Maintenance Action Legacy Visual AI
Functional Bug None; Found Automatically 15 mins 0...

@BagmarAnand
Legacy Test Automation Visual AI
40x Faster
21x More Stable
2.5x Increase in
Bug Detection
Eliminate False Po...

@BagmarAnand
A single assertion for complete functional
coverage
Bonus: validates the UI
Does not break when the UI change...

@BagmarAnand
Applitools Visual AI
53

@BagmarAnand
Help teams release perfect apps much faster at a reduced
cost.
Inventers of Visual AI that replicates the hum...

@BagmarAnand
Visual AI
Industry’s only AI powered computer vision
replicates the human eye & brain.
SDKs & Integrations
SD...

@BagmarAnand 56
Applitools - Ultrafast Grid

@BagmarAnand
Applitools Native Mobile Grid
57

@BagmarAnand
Workshop

@BagmarAnand
1. Prequisites
2. Run test (Selenium-Java or Appium-Java)
3. Add “eyes” to your automation using Applitools V...

@BagmarAnand
• Web
• Clone - http://bit.ly/getting-started-with-visualtesting
• Open project in IDE
• Refresh dependencies...

@BagmarAnand
• Web
• http://bit.ly/getting-started-with-visualtesting
• Run test: mvn test –Dtest=HelloWorldTest
• Android...

@BagmarAnand
• Sign up for free Applitools account - http://bit.ly/ApplitoolsSignup
• Add APPLITOOLS_API_KEY to your envir...

@BagmarAnand
• Dashboard
• Batch
• Visual AI validations
• Visual AI algorithms
• Fluent APIs
• Configuration
• Branch
• S...

@BagmarAnand
Scaling your test execution

@BagmarAnand 65
Applitools - Ultrafast Grid

@BagmarAnand
• Applitools Ultrafast Cloud
• https://applitools.com/platform/
• Web using Applitools Ultrafast Grid
• https...

@BagmarAnand
• Runner
• Browser / Device configurations
Applitools UFG configurations
67

@BagmarAnand
Challenges of Automating
Visual Testing

@BagmarAnand
Applitools Visual AI
Solution for the challenges in Visual Testing
● Creating the baseline
○ For each browser...

@BagmarAnand
Visual Test Automation
needs a Strategy!

@BagmarAnand
Test Pyramid … includes UX & NFRs
72

@BagmarAnand
Product Quality
73

@BagmarAnand
• The Practical Test Pyramid - https://martinfowler.com/articles/practical-test-
pyramid.html
• Testing Pyram...

Thank you!
BagmarAnand
linkedin.com/in/anandbagmar/

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1047773 views
Storytelling For The Web: Integrate... by Chiara Aliotta 961940 views
Artificial Intelligence, Data and C... by OECD Directorate ... 891371 views
How to Leverage AI to Boost Employe... by SocialHRCamp 375955 views
2024 State of Marketing Report – by... by Marius Sescu 213320 views
Everything You Need To Know About C... by Expeed Software 232066 views

View on Slideshare

1 of 73 Ad

View on Slideshare

1 of 73 Ad