Slides from my talk at SeConf UK 2016 about testing responsive apps and sites: Responsive web design has become the preferred approach for building sites and apps that provide an optimal viewing and interaction experience on any phone, tablet, desktop or wearable device. However, automatically testing these responsive sites and apps can be quite a challenge, due to the need to cover all supported layouts, their respective navigation, and visible content. In this hands-on session, we will implement a complete Selenium-based automated visual test for a popular responsive web-site from scratch. We'll share best practices for automating responsive web-site testing, and cover advanced topics such as responsive page objects, event driven validation, and consistent browser viewport size control. For more infomration visit: https://applitools.com A video of the talk is available here: https://www.youtube.com/watch?v=VypemwBVNFg

1. Automating visual software testing
ADVANCED TEST AUTOMATION
TECHNIQUES FOR RESPONSIVE
APPS AND SITES
Adam Carmi (@carmiadam)
Co-Founder and CTO at Applitools

2. Automating visual software testing
AGENDA
• What are responsive web sites?
• Let’s test Github!
• Best practices
• Q & A

3. 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.
“ WIKIPEDIA

4. Automating visual software testing
https://github.com

5. Automating visual software testing
window.innerWidth

6. Automating visual software testing
TEST
=
INTERACTION
+
VALIDATION

7. Automating visual software testing
LET’S TEST!
+ + +

8. 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

9. Automating visual software testing
TEST
=
INTERACTION
+
VALIDATION

10. 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.
“ WIKIPEDIA

11. Automating visual software testing
VISUAL TESTING
A quality assurance activity aimed to verify that a
Graphical User Interface appears correctly to users

12. Automating visual software testing

13. Automating visual software testing
THE WORKFLOW
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline

14. Automating visual software testing
LET’S TEST!
+ + +

15. 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

16. Automating visual software testing
QUESTIONS?
Adam Carmi (@carmiadam)
Co-Founder and CTO at Applitools