Embed Size (px)
Citation preview
Automating visual software testing
ADVANCED TEST AUTOMATION TECHNIQUES FOR RESPONSIVE
APPS AND SITES
Adam Carmi (@carmiadam)Co-Founder and CTO at Applitools
Automating visual software testing
AGENDA
• What are responsive web sites?
• Let’s test Github!
• Best practices
• Q & A
Automating visual software testing
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.
“WIKIPEDI
A
Automating visual software testing
window.innerWidth
Automating visual software testing
TEST=
INTERACTION+
VALIDATION
Automating visual software testing
LET’S TEST!
+ + +
Automating visual software testing
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
Automating visual software testing
TEST=
INTERACTION+
VALIDATION
Automating visual software testing
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.
“WIKIPEDI
A
Automating visual software testing
VISUAL TESTING
A quality assurance activity aimed to verify that a Graphical User Interface appears correctly to users
Automating visual software testing
Automating visual software testing
THE WORKFLOWDrive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline
Automating visual software testing
LET’S TEST!
+ + +
Automating visual software testing
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
Automating visual software testing
QUESTIONS?Adam Carmi (@carmiadam)
Co-Founder and CTO at Applitools
