SlideShare a Scribd company logo
Advanced Strategies for Testing
Responsive Web
A Perfecto & Applitools Webinar
© 2017, Perfecto Mobile Ltd. All Rights Reserved.
Agenda
•Key coverage Recommendations for RWD testing
•Automation at scale for RWD sites
•Visual Testing for RWD sites
•Performance and RWD site optimization
11/10/2017 2© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Intro To RWD – What’s Driving The Adoption
• Digital transformation reality
• Seamless cross platform UX
• One code base to maintain
• Larger customer outreach
• Faster TTM/Platforms Support
11/10/2017 3© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Opportunities for Fast Improvements
11/10/2017 4© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Score for the ability
of a site to load its
critical content
Desktop Browsers Variance
11/10/2017 5© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Choosing Keyboard Impossible Search Box Overlap Text
Truncations
UI Optimizations
11/10/2017 6© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Apple iPhone X
Apple iPhone X
Any Mobile
Test Coverage For RWD
12/3/2016
Mobile & Web- Test Coverage Principals
Platform Specific Coverage Recommendations
11/10/2017 9© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Poll Time
What type of RWD testing is the most challenging for your
organization?
• Accessibility
• Visual Testing
• Functional testing at scale across mobile and web
• Performance and Security (Non functional)
• Other?
Automation at Scale - requirements
• Framework
• Parallel execution
• Reporting
• Easy scripting (EX. BDD)
• Retries
• Utils - (login , scroll )
• Cloud - you can not scale on local PC
• Available resources - web and mobile
• secure
• support Selenium /Appium /XCUItest /Espresso
11/10/2017 11© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Parallel Execution
11/10/2017 12© 2015, Perfecto Mobile Ltd. All Rights Reserved.
CI
Parallel Execution
11/10/2017 13© 2015, Perfecto Mobile Ltd. All Rights Reserved.
CI
Takes 6 hours need to
execute it in an hour
Parallel Execution
11/10/2017 14© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Parallel Execution
11/10/2017 15© 2015, Perfecto Mobile Ltd. All Rights Reserved.
How to analyze
results
Smart reporting system
16
Framework
Java - Quantum
https://github.com/Project-Quantum
https://github.com/Project-Quantum/Quantum-Starter-Kit
Javascript - grunt-protractor-cucumber
https://www.npmjs.com/package/grunt-protractor-cucumber
https://www.npmjs.com/package/grunt-protractor-cucumber-html-
report
11/10/2017 17© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Demo
• One script
• wikipedia site
• Two web browsers local machine
• Scale to cloud
• 3 scripts
• parallel executions
• 10 browsers and mobile devices
• Analyze results
18
AI Powered
Visual Testing
for RWD
Aakrit Prasad
Product Management
19
Visual Testing
20
Testing activity aimed to validate that a User Interface
appears Visually Perfect to users.
“Testing the Look & Feel of your Application”
21
window.innerWidth
22
Visual Differences in RWD
Web
Mobile
RWD Visual Testing Challenges
23
● Different Interfaces = Different Interactions
● Image Scaling & Navigation Menus
● Higher Bug Probability from Changes
● Greater Need for Visual Testing
Types of Visual Bugs
24
LAYOUT
& STYLE
COLOR
& NAVIGATION& CONTEXT
Effective RWD Visual Testing
25
Reducing False Positives
● Anti-Aliasing
● Pixel Brightness
● Letter Positioning
● Image Scaling
Testing for the NEW web
● Dynamic Content
● Moving Elements
26
Visual Issues
Impact of Visual Bugs
27
● Negative Customer Experience
● Poor Brand Impression
● Business Impact
More likely in RWD
28
VISUAL TEST
=
INTERACTION
+
VALIDATION
Interaction Tips
29
1. Detect page layout within its page object
(not in the test code)
1. Avoid creating layout specific page objects
2. Avoid detecting layout by window.innerWidth
30
VISUAL TEST
=
INTERACTION
+
VALIDATION
Validation Tips
31
1. Prefer full page validation
2. Focus on lower layout boundaries
3. Prefer real browsers & devices
Automated Visual Testing Workflow
32
Drive the application test and take screenshots
Compare screenshots with baseline images
Report any differences found
Update the baseline
Automated with C.I.
DEMO : www.github.com
33
Can we catch this bug again?
DEMO : RWD Testing with Applitools
34
+ + +
Documentation & Examples here:
- https://applitools.com/resources/
- https://applitools.com/resources/tutorial/
Web Vs. Mobile
11/10/2017 35© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Objects in the Screen
36
HAR data
37
Demo
Quantum (BDD) Framework Based Script
• Goto target.com
• Navigate in site
• Get HAR file from Perfecto system
38
Give Away for Webinar Attendees
11/10/2017 39© 2015, Perfecto Mobile Ltd. All Rights Reserved.
http://info.perfectomobile.com/responsive-web-design-testing-paper.html
Join thousands of Test Automation Pros that leverage
automated visual testing to increase coverage, reduce
maintenance, and speed up release cycles.
Attend our hands-on Master Class, and learn how to:
● Get started with Automated Visual Testing
● Easily integrate visual testing into your existing test
automation infrastructure
● Set up your first test and run it on the cloud
● Leverage Applitools Eyes' unique capabilities and
features for speedy and quality releases
https://register.gotowebinar.com/rt/4904512726618199042
Advanced Strategies for Testing
Responsive Web
A Perfecto & Applitools Webinar
© 2017, Perfecto Mobile Ltd. All Rights Reserved.
Thank You

More Related Content

PPTX
10 Emerging Test Frameworks for Cross Browser Testing
PPTX
Top 5 Automation Challenges Webinar
PPTX
Testing Strategy for Progressive Web Apps
PPTX
Automate More with Selenium for your RWD
PPTX
Appium vs Espresso and XCUI Test
PPTX
Make the Shift from Manual to Automation with Open Source
PPTX
Drive Faster Quality Insights through Customized Test Automation - Part 2
PPTX
Four Keys to Efficient DevOps
10 Emerging Test Frameworks for Cross Browser Testing
Top 5 Automation Challenges Webinar
Testing Strategy for Progressive Web Apps
Automate More with Selenium for your RWD
Appium vs Espresso and XCUI Test
Make the Shift from Manual to Automation with Open Source
Drive Faster Quality Insights through Customized Test Automation - Part 2
Four Keys to Efficient DevOps

What's hot (20)

PDF
Your Framework for Success: introduction to JavaScript Testing at Scale
PPTX
Selenium Automation Like You’ve Never Seen!
PDF
5 Steps to Detecting Issues Earlier in Your Release Cycles
PPTX
State of mobile Continuous Delivery at Spotify
PDF
How to Leverage XCUITest for Continuous Testing
PPTX
Appium Presentation
PPTX
Continuous Testing
PPTX
ATAGTR2017 Testing in DevOps Culture
PPTX
Tales from the Dark Side: Ori Bendet Selenium Conference India 2016
ODP
API Testing With Katalon Studio
PPTX
How To Use Jenkins for Continuous Load and Mobile Testing with SOASTA & Cloud...
PDF
Web Accessibility Testing Trends and Shift Left Testing of accessibility usin...
PDF
4 Ways to Speed Up Your Mobile App Dev Daily Grind
PPTX
5 Keys to Your Best Automated Testing Strategy
PPTX
TechTalk: Get to Know Perfecto
PDF
3x3: Speeding Up Mobile Releases
PPTX
Test Automation Frameworks: Assumptions, Concepts & Tools
PPTX
The Powerful and Comprehensive API for Mobile App Development and Testing
PPTX
DevGeekWeek 2017 Inflectra Meetup in Herzliya Presentation
PPT
Mobile Monitoring Best Practices
Your Framework for Success: introduction to JavaScript Testing at Scale
Selenium Automation Like You’ve Never Seen!
5 Steps to Detecting Issues Earlier in Your Release Cycles
State of mobile Continuous Delivery at Spotify
How to Leverage XCUITest for Continuous Testing
Appium Presentation
Continuous Testing
ATAGTR2017 Testing in DevOps Culture
Tales from the Dark Side: Ori Bendet Selenium Conference India 2016
API Testing With Katalon Studio
How To Use Jenkins for Continuous Load and Mobile Testing with SOASTA & Cloud...
Web Accessibility Testing Trends and Shift Left Testing of accessibility usin...
4 Ways to Speed Up Your Mobile App Dev Daily Grind
5 Keys to Your Best Automated Testing Strategy
TechTalk: Get to Know Perfecto
3x3: Speeding Up Mobile Releases
Test Automation Frameworks: Assumptions, Concepts & Tools
The Powerful and Comprehensive API for Mobile App Development and Testing
DevGeekWeek 2017 Inflectra Meetup in Herzliya Presentation
Mobile Monitoring Best Practices
Ad

Similar to Advanced Strategies for Testing Responsive Web (20)

PPTX
Responsive Web Design: Testing to Deliver a Consistent User Experience
PPTX
Cross browser testing
PDF
Mapping mobileandweblandscape motb
PDF
How Responsive Is Your Testing?
PPTX
A Complete Guide to Testing Responsive Websites
PDF
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
PDF
Whitepaper: Responsive Test - A test framework to cover it all
PDF
Webinar key considerations in mobile web automation
PPTX
Raleigh User Forum Presentation
PPTX
Mobile test automation perfecto star east
PDF
The Ultimate Website Testing Checklist for 2022
PDF
Mastering Mobile Web with 8 Key Rules
PPTX
Mobile testing practices
PDF
Experitest & Capgemini Co-webinar -
PDF
Continuous Quality For a 5 Star Mobile Apps Delivery
PDF
Achieving 100% mobile test coverage perfecto mobile
PDF
Automation challenges - 121 Test Automation Event boston
PDF
Testing html5 meetup slideshare
PPTX
Mobile Application Testing af Frederik Carlier, Jamo Solutions
PDF
Quest2018 erank optimize test automation
Responsive Web Design: Testing to Deliver a Consistent User Experience
Cross browser testing
Mapping mobileandweblandscape motb
How Responsive Is Your Testing?
A Complete Guide to Testing Responsive Websites
Advanced Techniques for Testing Responsive Apps and Sites -- By Aakrit Prasad
Whitepaper: Responsive Test - A test framework to cover it all
Webinar key considerations in mobile web automation
Raleigh User Forum Presentation
Mobile test automation perfecto star east
The Ultimate Website Testing Checklist for 2022
Mastering Mobile Web with 8 Key Rules
Mobile testing practices
Experitest & Capgemini Co-webinar -
Continuous Quality For a 5 Star Mobile Apps Delivery
Achieving 100% mobile test coverage perfecto mobile
Automation challenges - 121 Test Automation Event boston
Testing html5 meetup slideshare
Mobile Application Testing af Frederik Carlier, Jamo Solutions
Quest2018 erank optimize test automation
Ad

More from Perfecto by Perforce (20)

PDF
Is BDD Worth It? Considerations for Advanced Test Automation
PDF
Yoda debunks the top 5 challenges of continuous testing in the cloud
PDF
5 Mobile App Trends & What They Mean for Dev & Testing
PDF
How to Scale Digital App Testing With Jenkins & Automation You Can Trust
PDF
Mastering Cross-Browser Test Automation With Cypress and Selenium
PDF
Cloud Testing Has Never Been Easier or More Accessible
PDF
Cognitive Engineering - Shifting Right with Gated.AI Testing - DevOps Next
PDF
The Rise and Benefits of Robotic Process Automation (RPA) - DevOps Next
PDF
The New Categories of Software Defects in the Era of AI and ML - DevOps Next
PDF
Moving to Modern DevOps with Fuzzing and ML - DevOps Next
PDF
Leveraging AI and ML in Test Management Systems - DevOps Next
PDF
How Does AIOps Benefit DevOps Pipeline and Software Quality? - DevOps Next
PDF
Classification of Advanced AI and ML Testing Tools - DevOps Next
PDF
Automated Code Reviews with AI and ML - DevOps Next
PDF
Advancing the State of The Art in AI and Testing - DevOps Next
PDF
How to Prepare Your Apps for iOS 14 - Test Strategy, Coverage, & Best Practices
PDF
How to Create a Risk Based Testing Strategy With Simulators, Emulators, and R...
PPTX
Fast Data, Fast Delivery: How Smart Analysis Accelerates App Testing
PDF
Best Practices for Shifting Left Performance and Accessibility Testing
PDF
Deliver Flawless Mobile Apps Faster with CI/CD & CT
Is BDD Worth It? Considerations for Advanced Test Automation
Yoda debunks the top 5 challenges of continuous testing in the cloud
5 Mobile App Trends & What They Mean for Dev & Testing
How to Scale Digital App Testing With Jenkins & Automation You Can Trust
Mastering Cross-Browser Test Automation With Cypress and Selenium
Cloud Testing Has Never Been Easier or More Accessible
Cognitive Engineering - Shifting Right with Gated.AI Testing - DevOps Next
The Rise and Benefits of Robotic Process Automation (RPA) - DevOps Next
The New Categories of Software Defects in the Era of AI and ML - DevOps Next
Moving to Modern DevOps with Fuzzing and ML - DevOps Next
Leveraging AI and ML in Test Management Systems - DevOps Next
How Does AIOps Benefit DevOps Pipeline and Software Quality? - DevOps Next
Classification of Advanced AI and ML Testing Tools - DevOps Next
Automated Code Reviews with AI and ML - DevOps Next
Advancing the State of The Art in AI and Testing - DevOps Next
How to Prepare Your Apps for iOS 14 - Test Strategy, Coverage, & Best Practices
How to Create a Risk Based Testing Strategy With Simulators, Emulators, and R...
Fast Data, Fast Delivery: How Smart Analysis Accelerates App Testing
Best Practices for Shifting Left Performance and Accessibility Testing
Deliver Flawless Mobile Apps Faster with CI/CD & CT

Recently uploaded (20)

PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PPT
Teaching material agriculture food technology
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Empathic Computing: Creating Shared Understanding
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PPTX
Cloud computing and distributed systems.
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Review of recent advances in non-invasive hemoglobin estimation
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Mobile App Security Testing_ A Comprehensive Guide.pdf
Spectral efficient network and resource selection model in 5G networks
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Reach Out and Touch Someone: Haptics and Empathic Computing
The Rise and Fall of 3GPP – Time for a Sabbatical?
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Teaching material agriculture food technology
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Empathic Computing: Creating Shared Understanding
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Cloud computing and distributed systems.
Dropbox Q2 2025 Financial Results & Investor Presentation
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
Chapter 3 Spatial Domain Image Processing.pdf

Advanced Strategies for Testing Responsive Web

  • 1. Advanced Strategies for Testing Responsive Web A Perfecto & Applitools Webinar © 2017, Perfecto Mobile Ltd. All Rights Reserved.
  • 2. Agenda •Key coverage Recommendations for RWD testing •Automation at scale for RWD sites •Visual Testing for RWD sites •Performance and RWD site optimization 11/10/2017 2© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 3. Intro To RWD – What’s Driving The Adoption • Digital transformation reality • Seamless cross platform UX • One code base to maintain • Larger customer outreach • Faster TTM/Platforms Support 11/10/2017 3© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 4. Opportunities for Fast Improvements 11/10/2017 4© 2015, Perfecto Mobile Ltd. All Rights Reserved. Score for the ability of a site to load its critical content
  • 5. Desktop Browsers Variance 11/10/2017 5© 2015, Perfecto Mobile Ltd. All Rights Reserved. Choosing Keyboard Impossible Search Box Overlap Text Truncations
  • 6. UI Optimizations 11/10/2017 6© 2015, Perfecto Mobile Ltd. All Rights Reserved. Apple iPhone X Apple iPhone X Any Mobile
  • 7. Test Coverage For RWD 12/3/2016
  • 8. Mobile & Web- Test Coverage Principals
  • 9. Platform Specific Coverage Recommendations 11/10/2017 9© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 10. Poll Time What type of RWD testing is the most challenging for your organization? • Accessibility • Visual Testing • Functional testing at scale across mobile and web • Performance and Security (Non functional) • Other?
  • 11. Automation at Scale - requirements • Framework • Parallel execution • Reporting • Easy scripting (EX. BDD) • Retries • Utils - (login , scroll ) • Cloud - you can not scale on local PC • Available resources - web and mobile • secure • support Selenium /Appium /XCUItest /Espresso 11/10/2017 11© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 12. Parallel Execution 11/10/2017 12© 2015, Perfecto Mobile Ltd. All Rights Reserved. CI
  • 13. Parallel Execution 11/10/2017 13© 2015, Perfecto Mobile Ltd. All Rights Reserved. CI Takes 6 hours need to execute it in an hour
  • 14. Parallel Execution 11/10/2017 14© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 15. Parallel Execution 11/10/2017 15© 2015, Perfecto Mobile Ltd. All Rights Reserved. How to analyze results
  • 17. Framework Java - Quantum https://github.com/Project-Quantum https://github.com/Project-Quantum/Quantum-Starter-Kit Javascript - grunt-protractor-cucumber https://www.npmjs.com/package/grunt-protractor-cucumber https://www.npmjs.com/package/grunt-protractor-cucumber-html- report 11/10/2017 17© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 18. Demo • One script • wikipedia site • Two web browsers local machine • Scale to cloud • 3 scripts • parallel executions • 10 browsers and mobile devices • Analyze results 18
  • 19. AI Powered Visual Testing for RWD Aakrit Prasad Product Management 19
  • 20. Visual Testing 20 Testing activity aimed to validate that a User Interface appears Visually Perfect to users. “Testing the Look & Feel of your Application”
  • 22. 22 Visual Differences in RWD Web Mobile
  • 23. RWD Visual Testing Challenges 23 ● Different Interfaces = Different Interactions ● Image Scaling & Navigation Menus ● Higher Bug Probability from Changes ● Greater Need for Visual Testing
  • 24. Types of Visual Bugs 24 LAYOUT & STYLE COLOR & NAVIGATION& CONTEXT
  • 25. Effective RWD Visual Testing 25 Reducing False Positives ● Anti-Aliasing ● Pixel Brightness ● Letter Positioning ● Image Scaling Testing for the NEW web ● Dynamic Content ● Moving Elements
  • 27. Impact of Visual Bugs 27 ● Negative Customer Experience ● Poor Brand Impression ● Business Impact More likely in RWD
  • 29. Interaction Tips 29 1. Detect page layout within its page object (not in the test code) 1. Avoid creating layout specific page objects 2. Avoid detecting layout by window.innerWidth
  • 31. Validation Tips 31 1. Prefer full page validation 2. Focus on lower layout boundaries 3. Prefer real browsers & devices
  • 32. Automated Visual Testing Workflow 32 Drive the application test and take screenshots Compare screenshots with baseline images Report any differences found Update the baseline Automated with C.I.
  • 33. DEMO : www.github.com 33 Can we catch this bug again?
  • 34. DEMO : RWD Testing with Applitools 34 + + + Documentation & Examples here: - https://applitools.com/resources/ - https://applitools.com/resources/tutorial/
  • 35. Web Vs. Mobile 11/10/2017 35© 2015, Perfecto Mobile Ltd. All Rights Reserved.
  • 36. Objects in the Screen 36
  • 38. Demo Quantum (BDD) Framework Based Script • Goto target.com • Navigate in site • Get HAR file from Perfecto system 38
  • 39. Give Away for Webinar Attendees 11/10/2017 39© 2015, Perfecto Mobile Ltd. All Rights Reserved. http://info.perfectomobile.com/responsive-web-design-testing-paper.html Join thousands of Test Automation Pros that leverage automated visual testing to increase coverage, reduce maintenance, and speed up release cycles. Attend our hands-on Master Class, and learn how to: ● Get started with Automated Visual Testing ● Easily integrate visual testing into your existing test automation infrastructure ● Set up your first test and run it on the cloud ● Leverage Applitools Eyes' unique capabilities and features for speedy and quality releases https://register.gotowebinar.com/rt/4904512726618199042
  • 40. Advanced Strategies for Testing Responsive Web A Perfecto & Applitools Webinar © 2017, Perfecto Mobile Ltd. All Rights Reserved. Thank You