1.
Responsive testing in Drupal
Óscar Castaño Calle ♦ Alejandro Gómez Morón

2.
Who are we?
● QA lead at @LaDrupalera by @Emergya.
● Devoted to processes of software quality:
improvement, delivery, deployment…
● A lover of @LaDrupalera.
@drupaldevdays #drupaldevdays

3.
Who are we?
● QA & Tech lover (Selenium, Java, TypeScript,
Drupal, Ionic, AngularJS, Gulp…).
● QA leader at @LaDrupalera by @Emergya.
● QA Lecturer at @EPSUPO.
● @SevillaQA organizer.
● I am passionate about challenges and I hate
repeating processes!
@drupaldevdays #drupaldevdays

4.
Roadmap
● What is Responsive Testing?
● What is Galen Framework?
● GSpecs language
● Do you want to improve your tests?
● Hands on!
@drupaldevdays #drupaldevdays

5.
What is Responsive Testing?
● Responsive Web Design (RWD) is an approach to web design
aimed at crafting sites to provide an optimal viewing experience.
● So, Responsive Testing is ensuring everything looks and
works as it was designed.
@drupaldevdays #drupaldevdays

6.
What is Galen Framework?
● It is a test framework which was originally introduced for testing
layout of web-applications in a real browser. Nowadays it
became a fully functional testing framework with rich reporting
and test management system.
@drupaldevdays #drupaldevdays

7.
What is Galen Framework?
● It works in a following way:
a. Galen opens a page in browser (Selenium).
b. Resizes browser to specified size.
c. Tests the layout with Galen Specs.
@drupaldevdays #drupaldevdays

8.
Galen Spec Language
● It is quite flexible and gives you the opportunity to express
exactly how you want your website to behave on different
devices. There are two main parts in page specs file: object
definitions and object specs.
@drupaldevdays #drupaldevdays

9.
Galen Spec Language
● Object definition:
○ @objects section.
○ Represents an HTML element.
○ Can be selected by id, css and xpath.
@drupaldevdays #drupaldevdays

10.
Galen Spec Language
@drupaldevdays #drupaldevdays

11.
Galen Spec Language
● Object specs:
○ Behaviour of the @objects.
○ Possibility to customize it depending on the
screen type!
@drupaldevdays #drupaldevdays

12.
Galen Spec Language
@drupaldevdays #drupaldevdays

13.
Galen Spec Language
@drupaldevdays #drupaldevdays

14.
Do you want to improve your tests?
● agomezmoron/galen-framework-handler
○ Some Galen Framework functionalities improved.
○ Set of devices defined (iPhone5, 6, Nexus, etc).
○ Configuration object (URLs, devices to test…)
@drupaldevdays #drupaldevdays

15.
Tell me and I’ll listen.
Show me and I’ll watch.
Let me experience and I’ll learn.
Lao Tzu
@drupaldevdays #drupaldevdays
Ready?

16.
Hands on!
@drupaldevdays #drupaldevdays
1. Check you have Internet connection
2. Look for a partner!
3. Make sure you will learn having fun!

17.
Hands on!
@drupaldevdays #drupaldevdays
https://github.com/agomezmoron/DrupalDevDays-Responsive-Testing-Workshop
Repository

18.
THANKS!
@drupaldevdays #drupaldevdays

19.
THANKS!
@drupaldevdays #drupaldevdays

20.
Thanks!
@drupaldevdays #drupaldevdays