ADVANCED TEST AUTOMATION TECHNIQUES FOR RESPONSIVE APPS AND SITES - - PowerPoint PPT Presentation

ADVANCED TEST AUTOMATION TECHNIQUES FOR RESPONSIVE APPS AND SITES

Adam Carmi (@carmiadam) Co-Founder and CTO at Applitools

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

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

TEST = INTERACTION + VALIDATION

HOW CAN WE VALIDATE RWD?

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

“

WIKIPEDIA

VISUAL TESTING

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

THE WORKFLOW

Drive the AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline

LET’S TEST!

+ + +

VALIDATION TIPS

• Set the viewport size rather than the browser window size
• Use page object callbacks to validate layout-specific UI states
• Prefer full page validation over component validation
• Focus on lower layout boundaries

QUESTIONS?

Adam Carmi (@carmiadam) Co-Founder and CTO at Applitools