Downloaded 75 times
Uploaded byPerfecto by Perforce
Advanced Strategies for Testing Responsive Web
This document outlines an agenda for a webinar on advanced strategies for testing responsive web applications. The webinar will cover key recommendations for testing responsive web designs at scale using automation and visual testing techniques. It will also discuss opportunities for improving performance and optimization of responsive web sites. The webinar will include demonstrations of automating tests across desktop and mobile browsers in parallel using cloud infrastructure as well as visual testing techniques using AI.
Advanced Strategies for Testing Responsive Web
- 1. Advanced Strategies forTesting Responsive Web A Perfecto & Applitools Webinar © 2017, Perfecto Mobile Ltd. All Rights Reserved.
- 2. Agenda •Key coverage Recommendationsfor 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 FastImprovements 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/20175© 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 ForRWD 12/3/2016
- 8. Mobile & Web-Test Coverage Principals
- 9. Platform Specific CoverageRecommendations 11/10/2017 9© 2015, Perfecto Mobile Ltd. All Rights Reserved.
- 10. Poll Time What typeof 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
- 16.
- 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 forRWD Aakrit Prasad Product Management 19
- 20. Visual Testing 20 Testing activityaimed to validate that a User Interface appears Visually Perfect to users. “Testing the Look & Feel of your Application”
- 21.
- 22. 22 Visual Differences inRWD Web Mobile
- 23. RWD Visual TestingChallenges 23 ● Different Interfaces = Different Interactions ● Image Scaling & Navigation Menus ● Higher Bug Probability from Changes ● Greater Need for Visual Testing
- 24. Types of VisualBugs 24 LAYOUT & STYLE COLOR & NAVIGATION& CONTEXT
- 25. Effective RWD VisualTesting 25 Reducing False Positives ● Anti-Aliasing ● Pixel Brightness ● Letter Positioning ● Image Scaling Testing for the NEW web ● Dynamic Content ● Moving Elements
- 26.
- 27. Impact of VisualBugs 27 ● Negative Customer Experience ● Poor Brand Impression ● Business Impact More likely in RWD
- 28.
- 29. Interaction Tips 29 1. Detectpage 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.
- 31. Validation Tips 31 1. Preferfull page validation 2. Focus on lower layout boundaries 3. Prefer real browsers & devices
- 32. Automated Visual TestingWorkflow 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 Canwe catch this bug again?
- 34. DEMO : RWDTesting with Applitools 34 + + + Documentation & Examples here: - https://applitools.com/resources/ - https://applitools.com/resources/tutorial/
- 35. Web Vs. Mobile 11/10/201735© 2015, Perfecto Mobile Ltd. All Rights Reserved.
- 36. Objects in theScreen 36
- 37.
- 38. Demo Quantum (BDD) FrameworkBased Script • Goto target.com • Navigate in site • Get HAR file from Perfecto system 38
- 39. Give Away forWebinar 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 forTesting Responsive Web A Perfecto & Applitools Webinar © 2017, Perfecto Mobile Ltd. All Rights Reserved. Thank You