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.

Responsive testing in Drupal - Drupal Developer Days

451 views

Published on

Our QA Drupal experts Alejandro Gómez -QA team leader in Emergya- and Óscar Castaño -Drupal, Angular and Symfony Team Leader- show everything you need to know about the testing process and the importance of responsive developments.

Published in: Technology
  • Be the first to comment

Responsive testing in Drupal - Drupal Developer Days

  1. 1. Responsive testing in Drupal Óscar Castaño Calle ♦ Alejandro Gómez Morón
  2. 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. 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. 4. Roadmap ● What is Responsive Testing? ● What is Galen Framework? ● GSpecs language ● Do you want to improve your tests? ● Hands on! @drupaldevdays #drupaldevdays
  5. 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. 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. 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. 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. 9. Galen Spec Language ● Object definition: ○ @objects section. ○ Represents an HTML element. ○ Can be selected by id, css and xpath. @drupaldevdays #drupaldevdays
  10. 10. Galen Spec Language @drupaldevdays #drupaldevdays
  11. 11. Galen Spec Language ● Object specs: ○ Behaviour of the @objects. ○ Possibility to customize it depending on the screen type! @drupaldevdays #drupaldevdays
  12. 12. Galen Spec Language @drupaldevdays #drupaldevdays
  13. 13. Galen Spec Language @drupaldevdays #drupaldevdays
  14. 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. 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. 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. 17. Hands on! @drupaldevdays #drupaldevdays https://github.com/agomezmoron/DrupalDevDays-Responsive-Testing-Workshop Repository
  18. 18. THANKS! @drupaldevdays #drupaldevdays
  19. 19. THANKS! @drupaldevdays #drupaldevdays
  20. 20. Thanks! @drupaldevdays #drupaldevdays

×