idealo internet GmbH Berlin Selenium Meetup

Berlin, 26.05.2015

Responsive Web Design Layout Testing

With Selenium and Galen Framework

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

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

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

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

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

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

Can we automate that?

Yes!

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

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

Demo

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

Questions?