** Full webinar recording: https://youtu.be/Y2MHNnWOznQ ** Responsive web design has become the preferred approach for building sites and apps that provide an optimal viewing and interaction experience on any phone, tablet, desktop or wearable device. However, automatically testing these responsive sites and apps can be quite a challenge, due to the need to cover all supported layouts, their respective navigation, and visible content. This presentation is part of an hands-on advanced hands-on session (https://youtu.be/Y2MHNnWOznQ) about how to effectively test apps and sites with responsive design -- and teaches you how to: * Implement generic tests that work for all the layouts of your app * Control the browser and viewport size in order to accurately target layout transition points * Incorporate layout-specific assertions in your tests * Effectively design responsive page objects * Visually validate the correctness of your app’s layout * Bonus: tips for planning and executing responsive website testing

1. Advanced Test Automation
Techniques for Responsive
Apps & Sites
Aakrit Prasad
VP Product @ Applitools
1

2. Agenda
2
● What is RWD
● Trends & Challenges in RWD
● Visual Testing RWD
● Demo
● RWD Tips

3. What is Responsive Web Design
3
“ Responsive web design (RWD) is an approach to web design
which makes web pages render well on a variety of devices and
window or screen sizes.
“
Source : https://en.wikipedia.org/wiki/Responsive_web_design

4. RWD Sites v. No RWD
4

5. Trends Driving RWD Testing
5
● Digital Transformation
● Release Agility
● Proliferation of Engagement
● Visual Perfection

6. Digital
Transformation
is Here
6
Adults in the US spend an
average of 10 hours a day
looking at smartphones, tablets,
personal computers, and others
screens.

7. Releases Are Expected Faster
7
Watch
TestCode
ReleaseOperate
• Agile is now a reality for over
70% of the world’s companies
according to Gartner
• CI-CD is an emerging practice
that will add even more pressure
to release faster
• Yet, business leaders expect
R&D to maintain, or even
improve, quality simultaneously
• So how do you automate your
testing in this demanding
reality?

8. Proliferation of User Interfaces
Browsers
Devices
Form Factors
Languages
RWD
Operating
Systems
100s of Customer Visual Interfaces Per Page (ie. HomePage)

9. Visual Perfection is Expected
9
• There are thousands of device &
browser combinations in market
• Responsive design adds multiple
incremental views to each
possible combination
• Dynamic content, microservices,
and browser/operating system
updates affect the user
experience constantly
User
Mobile Phone
Desktop / Laptop
Tablet
Watch
Conversion

10. Challenges with RWD
10
● Different Interfaces = Different Interactions
● Image Scaling & Navigation Menus
● High Bug Probability from Changes
● Greater Need for Visual Testing

11. Visual Testing
11
Testing activity aimed to validate that a User
Interface appears Visually Perfect to users.
“Testing the Look & Feel of your Application”

12. Types of Visual Bugs
12
+ Many Others
LAYOUT
& STYLE
COLOR
& NAVIGATION& CONTEXT

13. 13

14. 14

15. 15

16. Why Visually
Test RWD?
16
To ensure visually
perfect user experiences
on every browser and
device through
automated testing.

17. Impact of Visual Bugs
17
● Negative Customer (Digital) Experience
● Poor Brand Impression, Lower Usage
● Business Impact (ie. missing button)
● More Frequent with Release Agility
● More Likely in RWD Applications

18. Release Bug with Business Impact
18

19. Cross Browser Visual Bug = Usability Impact
19

20. Easy to Get Started
20
Drive the AUT and
take screenshots
Compare screenshots
with baseline images
Report differences
Update the baseline
Step 1 Step 2
Step 3Step 4

21. Interaction Tips
21
➢ Detect page layout within its page object
➢ Build browser & layout independent automation
➢ Avoid creating layout specific page objects (use shared components)
➢ Avoid detection layout by window.innerWidth
○ Instead set by examining the page elements
➢ Set browser size by window.innerWidth

22. 22
Demo

23. DEMO : www.github.com
23
Can we catch this bug again?

24. DEMO : RWD Testing with Applitools
24
+ + +

25. Validation Tips
25
➢ Prefer full page validation
➢ Focus on lower layout boundaries (most dense layout view)
➢ Don’t abort your tests on validation failures
➢ Prefer to use real browser (vs. headless browsers, etc)
➢ Prefer real devices

26. RWD Tip #1
26
Use a Robust Image Comparison Engine
● Reducing False Positives : Anti-Aliasing, Pixel
Brightness, Letter Positioning, Image Scaling
● Intelligent Identification : Real User Issues
● Supporting : Dynamic Content, Moving
Elements, Images of Different Size, etc ...

27. Anti - Aliasing
27

28. Anti - Aliasing
28

29. Letter Positioning
29

30. Letter Positioning
30

31. RWD Tip #2
31
Use a single baseline across browsers & devicesSTRICT
LAYOUT
LAYOUT
LAYOUT

32. RWD Tip #3
32
Codeless Baseline Maintenance
● Everyone can do it
● Responsive & Immediate
● Prefer full page validation to avoid
element locators maintenance

33. Applitools
33
• Launched in 2015
• HQ in San Mateo, CA with offices in Tel Aviv,
London, Boston, and Texas
• Market leaders in the emerging Application
Visual Management Category (AVM)
Inventors of Visual-AI
Hundreds of Enterprise Customers
AutomatedTestsRun(Millions)

34. Integrations With Your Favorite Tools
40+ SDKs
34
Language EcosystemTesting
Capybara

35. Getting Started Resources
35
• https://applitools.com/resources/tutorial
• https://applitools.com/resources

36. Thank You
Questions?
36