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.

Berlin Selenium Meetup - Galen Framework

377 views

Published on

Slides from the Berlin Selenium Meetup 26.5.2016. Presenter Kai Kesselring from Idealo.

Published in: Technology
  • Be the first to like this

Berlin Selenium Meetup - Galen Framework

  1. 1. idealo internet GmbH Berlin Selenium Meetup Berlin, 26.05.2015 Responsive Web Design Layout Testing With Selenium and Galen Framework
  2. 2. Responsive Web Design Layout Testing Content ● About idealo ● Responsive Web Design ● Galen Framework ● Testautomation @ idealo ● Demo ● Summary 26.05.2016 2 With Selenium and Galen Framework
  3. 3. Responsive Web Design Layout Testing About idealo ● Price and product comparison portal & e-commerce ● Founded in 2000 ● on www.idealo.de o 238.5 Million offer o 52.600 shops 26.05.2016 3 With Selenium and Galen Framework
  4. 4. Responsive Web Design Layout Testing Responsive Web Design ● Web design and development paradigm ● Reacts and adapts on used devices o Layout and display of elements depending on screen size 26.05.2016 4 With Selenium and Galen Framework
  5. 5. Responsive Web Design Layout Testing Responsive Web Design ● Benefits o Maintaining one website and not multiple o One domain, big diversity of devices, OS and browser o Same great User Experience with different browsers in different devices o Higher Ranks in Google (SEO), no more duplicate content penalties o Save time/money on mobile development ● Drawbacks o Complex planning o Sophisticated technical implementation o Longer development time o Extensive testing 26.05.2016 5 With Selenium and Galen Framework
  6. 6. Responsive Web Design Layout Testing Responsive Web Design @ idealo ● Mobile first approach ● Migrating only on site type a time ● Java Script Framework Foundation ● Breakpoints for layout change 26.05.2016 6 With Selenium and Galen Framework
  7. 7. Responsive Web Design Layout Testing Responsive Web Design Testing ● Check on different Viewports ● Check on different Platforms ● Layout check becomes more important 26.05.2016 7 With Selenium and Galen Framework
  8. 8. Can we automate that? Yes!
  9. 9. Responsive Web Design Layout Testing Galen Framework ● OSS Framework for automated website layout testing ● http://galenframework.com ● Designed with responsive in mind ● Based on Selenium WebDriver ● Run from cli or JS, Java ● Comes with own spec language Galen Spec Language ● Define relations of HTML elements ● Line based text format ● Represents the expected layout 26.05.2016 9 With Selenium and Galen Framework
  10. 10. Responsive Web Design Layout Testing Testautomation @ idealo ● Agile Teams (Scrum, Kanban etc.) with dedicated test resource ● Testing tech stack Java, JUnit, Selenium, Maven, Jenkins, Selenium Grid, SauceLabs, phantomjs ● Selenium tests integrated in build and deployment process 26.05.2016 10 With Selenium and Galen Framework
  11. 11. Demo
  12. 12. Responsive Web Design Layout Testing Summary ● Layout checks proved useful ● Compare Screenshots not used ● Layout specs maintained by developers ● Stops at first spec error ● Error in spec syntax file hard to find ● Different rendering on lokal phantomJS ● Use of css checks not good practice 26.05.2016 12 With Selenium and Galen Framework
  13. 13. Questions?

×