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?