Advanced test automation techniques for responsive apps and sites

Adam Carmi (@carmiadam)Co-Founder and VP R&D at Applitools

ADVANCED TEST AUTOMATION TECHNIQUES

FOR RESPONSIVE APPS AND SITES

AGENDA

What are responsive web sites? Let’s test Github! Best practices Q & A

RESPONSIVE WEB DESIGN

An approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices.

“WIKIPEDIA

https://github.com

vs

https://en.wikipedia.org

window.innerWidth

TEST=

INTERACTION+

VALIDATION

LET’S TEST!

+ + +

INTERACTION TIPS

Detect page layout within its page object

Build browser and layout independent automation

Avoid creating layout specific page objects

Avoid detecting layout by window.innerWidth

Set browser size by window.innerWidth

TEST=

INTERACTION+

VALIDATION

An approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices.

HOW CAN WE VALIDATE RWD???

“WIKIPEDIA

VISUAL TESTING

A quality assurance activity aimed to verify that a Graphical User Interface appears correctly to users

AUTOMATED VISUAL TESTING

Drive the AUT and take screenshots

Compare screenshots with baseline images

Report differences

Update the baseline

LET’S TEST!

+ + +

VALIDATION TIPS

Prefer full page validation

Use page object callbacks to validate layout-specific UI states

Focus on lower layout boundaries

Don’t abort your tests on validation failures

Always use real browsers

Prefer real devices

Adam Carmi (@carmiadam)Co-Founder and VP R&D at Applitools

QUESTIONS?