The document provides an overview of responsive web design testing. It discusses how responsive web design works through flexible grids, relative sizing, and media queries. It outlines things to keep in mind when testing such as selecting devices, handling frequent changes, and challenges with emulators. The document then introduces the Galen framework for responsive web design testing. It describes how Galen works by defining devices and layout specs, and opening browsers to specified dimensions to verify specs. Key aspects of the Galen spec language are outlined such as object definition, tagging, positions, alignment, and comparing CSS properties and images. Finally, the document advertises a question and answer period.

1. Responsive
Web Design
Testing
Pranathi Birudugadda
Shilpa Badekila
vodQA Aug 2015

2. 2
• Introduction to Responsive Web
Design
• Responsive Web Design Testing
• Introduction to Galen
• Galen Demo
• Q&A
Agenda
Agenda

3. Responsive
Web Design
3

4. 4
• Write once publish everywhere
• Design your development to meet user’s behavior and environment

5. 5
•A flexible grid based layout
Page element sizing should be in relative
units
•Enable flexible media
Flexible images are sized in relative units
•Addition of media queries
Allow the page to use different CSS style rules
based on the width of the browser
How is it
achieved?

6. Responsive
Web Design
Testing
66

7. 7
How to Test multiple devices/platforms??

8. 8
•Pages should be readable on all resolutions.
•Content defined ‘important’ need to be visible in
all breakpoints.
•Text, controls, image alignment
•Color, shading, gradient consistency
•Typed text (data entry) scrolls and displays
properly
Things
to
keep
in mind!

9. 9
•Selecting set of devices for test
•Frequent changes in requirements.
•Manual testing possible for all devices?
•Do Emulators simulate all the devices in market?
Challenges?

10. 10
• Responsive Web Design Tester
• Viewport Resizer for Chrome
• Galen
• BrowserStack
• Applitools
Tools

11. Galen
Framework
66

12. 10
Galen
Framework • Open Source Testing Framework
• Developed by Ivan Shubin
• Built with Responsive Web Design in mind
• Uses Selenium for web page interactions

13. 10
How does
Galen
Work
• Define a set of devices that needs testing
• Write a spec file that defines the layout on
these devices
• Galen opens a browser, resizes to specified
dimension and verifies the spec file
• Can be used along with Selenium Grid

14. 10
Galen Spec
• Language used to define the layout of
the page on different devices
• Uses simple english words to describe
the layout
• Human readable
• Minimal text to define the complete
page

15. 10
Galen
Spec

16. 10
Galen spec
language • *.gspec
• Object Definition
• Tagging
• Relative positions (near, below, inside)
• Alignment
• Height and Width
• Color Scheme
• Image Comparison
• CSS properties

17. 10
Galen
Demo
github repo:
https://github.com/PranathiB/Galen

18. 10
Other
Features
• Error Reporting using HTML and JSON
• Screenshots capture
• Image Comparison

19. 10
Questions Time :)