With 4 out of 10 user transactions completed using more than one screen, it's essential to deliver great user experiences across web and mobile. In this webinar, we'll explain how you can efficiently execute and analyze a single test script across digital platforms including real mobile devices, tablets and wearables to: -Develop and execute cross platform mobile and web selenium test code in Eclipse. -Shorten the feedback loop from developers to testers using 1 test report for all digital platforms. -Optimize your test lab coverage for Mobile and Web while mitigating risks. -Complement digital test coverage using interactive testing for Mobile and Web.

1. Responsive Web Design:
Testing to Deliver a
Consistent User Experience
April 2016
Adam Carmi
Co-Founder, VP R&D –
Applitools
Eran Kinsbruner
Dir. Technical Evangelist
Perfecto
Uzi Eilon
Director of Technology
Perfecto
Adam Carmi
Co-Founder, VP R&D
Applitools

2. Agenda
4/14/2016 2© 2015, Perfecto Mobile Ltd. All Rights Reserved.
01
RWD Introduction
02
RWD Test Plan Building Blocks
03
Live Demonstrations
04
Q & A

3. Responsive Web Design (RWD) - Definition
4/14/2016 3© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Responsive web design (RWD) is an approach to web design to
provide an optimal viewing and interaction experience—easy
reading and navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from desktop computer
monitors to mobile phones)

4. RWD vs Non RWD
https://github.com
vs
https://en.wikipedia.org
4/14/2016 4© 2015, Perfecto Mobile Ltd. All Rights Reserved.

5. Drivers & Benefits To Moving to RWD
4/14/2016 5© 2016, Perfecto Mobile Ltd. All Rights Reserved.
Provide consistent DX
and coverage across
all digital platforms
Support end user
work flow across multi
screens
Consolidate
resources & align
business goals
across platforms
Be ready for any new
OS/Platform release
faster

6. Building Blocks for RWD Testing
4/14/2016 6© 2016, Perfecto Mobile Ltd. All Rights Reserved.

7. © 2016, Perfecto Mobile Ltd. All Rights Reserved.4/14/2016 7
Digital Test Coverage
Choosing The Right
Platforms

8. Mobile Test Coverage Method

9. Web Test Coverage Method (cont’)
FireFox
Test on Latest,
Previous and Beta
on 3 Major
Windows OS
Chrome
Test on Latest and
Previous against 3
major windows OS
and 2 major Mac
OS. Add Beta
testing on latest
Windows and
latest Mac
Safari
Test on latest
version against 3
Mac OS + previous
2 on their
reference OS (e.g.
Safari 9, El
Capitan)
IE/Edge
Test IE 11 on
Windows 7, 8.1, 11
and Edge latest on
Windows 10

10. © 2016, Perfecto Mobile Ltd. All Rights Reserved.4/14/2016 10
User Condition Testing
for RWD Sites

11. • Locations & context
• Playing Video across platforms, different screen orientations
• Incoming events and interrupts
• Mobile – Calls, SMS, BG apps pop ups
• Web – ads, plugins
• Network conditions
• Poor, good, no network
User Condition Testing
4/14/2016 11© 2015, Perfecto Mobile Ltd. All Rights Reserved.

12. © 2016, Perfecto Mobile Ltd. All Rights Reserved.4/14/2016 12
Visual Testing

13. WHAT IS VISUAL TESTING?
A quality assurance activity to verify
that a Graphical User Interface
appears correctly to users

16. WHY AUTOMATE?
The test matrix is too big to cover manually
• Web browsers
• Devices
• Operating systems
• Screen resolutions
• Responsive design
• L10n
• 3rd Party upgrades

17. WHY AUTOMATE?
Release cycles keep getting shorter

18. HOW DOES IT WORK?
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

19. + +
+ +
DEMO

20. Visual Testing Is Critical For RWD!
The majority of RWD bugs are visual and can’t be detected using
traditional functional test automation tools
• Assure that Important page content is visible in all resolutions
and screen orientations
• Test the Alignment, size, style and color of text, controls and images
• Validate that Elements aren’t cut at the edges of the screen
• Assure that Typed text (data entry) scrolls and displays properly
4/14/2016 20© 2016, Perfecto Mobile Ltd. All Rights Reserved.

21. © 2016, Perfecto Mobile Ltd. All Rights Reserved.4/14/2016 21
Demonstration
Client Side Performance and
Navigation Testing

22. Client Side Performance – Optimize for great UX
4/14/2016 22© 2016, Perfecto Mobile Ltd. All Rights Reserved.
• Relevant content and content compression
• Size allocation
• Load testing KPI’s across platforms and networks
• Varying locations measurements
• Measure UI rendering time
Source: HTTPArchive.org

23. Client Side Performance Testing
4/14/2016 23© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Backend Web Server

24. Demo Flow – Navigation Testing
4/14/2016 24© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Perfecto
Digital
Lab
reports
One script Resources selection
Side by
side
Execution
data

25. Script Flow
4/14/2016 25© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Load time
Visual validation

26. One Script for all Digital Platforms
4/14/2016 26© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Time
Validation
Page
selection
Objects locator
Data Input
Page action

27. Special Offers to Webinar Attendees
4/14/2016 27© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Free Whitepaper
Complete Guide to Building a Responsive Web Testing Strategy
http://info.perfectomobile.com/responsive-web-design-testing-paper.html
Free “Visually Perfect” T-shirt
(1) Open your Free Applitools Eyes account http://bit.ly/1s49J2X
(2) Run your first visual test
(3) Email test results to webinars@applitools.com
(4) Get your new “Visually Perfect” t-shirt

28. Thank You for Joining Us