Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced test automation techniques for responsive apps and sites

847 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Advanced test automation techniques for responsive apps and sites

  1. 1. Automating visual software testing ADVANCED TEST AUTOMATION TECHNIQUES FOR RESPONSIVE APPS AND SITES Adam Carmi (@carmiadam) Co-Founder and CTO at Applitools
  2. 2. Automating visual software testing AGENDA • What are responsive web sites? • Let’s test Github! • Best practices • Q & A
  3. 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. 4. Automating visual software testing https://github.com
  5. 5. Automating visual software testing window.innerWidth
  6. 6. Automating visual software testing TEST = INTERACTION + VALIDATION
  7. 7. Automating visual software testing LET’S TEST! + + +
  8. 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. 9. Automating visual software testing TEST = INTERACTION + VALIDATION
  10. 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. 11. Automating visual software testing VISUAL TESTING A quality assurance activity aimed to verify that a Graphical User Interface appears correctly to users
  12. 12. Automating visual software testing
  13. 13. Automating visual software testing THE WORKFLOW Drive the AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
  14. 14. Automating visual software testing LET’S TEST! + + +
  15. 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. 16. Automating visual software testing QUESTIONS? Adam Carmi (@carmiadam) Co-Founder and CTO at Applitools

×