Responsive Web Design: Testing to Deliver a Consistent User Experience

Responsive Web Design: Testing to Deliver a Consistent User ExperienceApril 2016

Adam CarmiCo-Founder, VP R&D –

Applitools

Eran KinsbrunerDir. Technical Evangelist

Perfecto

Uzi EilonDirector of Technology

Perfecto

Adam CarmiCo-Founder, VP R&D

Applitools

Agenda

05/03/2023 2© 2015, Perfecto Mobile Ltd. All Rights Reserved.

01 RWD Introduction

02 RWD Test Plan Building Blocks

03 Live Demonstrations

04 Q & A

Responsive Web Design (RWD) - Definition


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)

RWD vs Non RWD

https://github.com

vs

https://en.wikipedia.org


https://github.com/

https://github.com/

https://en.wikipedia.org/

Drivers & Benefits To Moving to RWD


Provide consistent DX and coverage across all

digital platforms

Support end user work flow across multi

screens

Consolidate resources & align business goals

across platformsBe ready for any new OS/Platform release

faster

Building Blocks for RWD Testing


© 2016, Perfecto Mobile Ltd. All Rights Reserved. 05/03/2023 7

Digital Test CoverageChoosing The Right

Platforms

Mobile Test Coverage Method

Web Test Coverage Method (cont’)

FireFoxTest on Latest,

Previous and Beta on 3 Major

Windows OS

ChromeTest on Latest and Previous against 3

major windows OS and 2 major

Mac OS. Add Beta testing on latest

Windows and latest Mac

SafariTest on latest

version against 3 Mac OS +

previous 2 on their reference OS

(e.g. Safari 9, El Capitan)

IE/EdgeTest IE 11 on

Windows 7, 8.1, 11 and Edge latest

on Windows 10


User Condition Testing for RWD Sites

• 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



Visual Testing

WHAT IS VISUAL TESTING?

A quality assurance activity to verify

that a Graphical User Interface

appears correctly to users

WHY AUTOMATE?

The test matrix is too big to cover manually

• Web browsers• Devices• Operating systems• Screen resolutions• Responsive design• L10n• 3rd Party upgrades

WHY AUTOMATE?

Release cycles keep getting shorter

HOW DOES IT WORK?

Drive the AUT and take screenshots

Compare screenshots with baseline images

Report differences

Update the baseline

+ +

+ +

DEMO


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


DemonstrationClient Side Performance and

Navigation Testing

Client Side Performance – Optimize for great UX


• 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

http://httparchive.org/interesting.php#bytesperpage


Client Side Performance Testing

Backend Web Server


Demo Flow – Navigation Testing

Perfecto Digital Lab

reports

One script Resources selection

Side by side

Execution data


Script Flow

Load time

Visual validation


One Script for all Digital Platforms

Time Validation

Page selection

Objects locator

Data InputPage action

Special Offers to Webinar Attendees


Free WhitepaperComplete 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 [email protected](4) Get your new “Visually Perfect” t-shirt



http://bit.ly/1s49J2X

http://bit.ly/1s49J2X

mailto:[email protected]

Thank You for Joining Us