responsive webdesign testing using galen

Responsive Web Design Testing

Pranathi BirudugaddaShilpa Badekila

vodQA Aug 2015

2

• Introduction to Responsive Web Design

• Responsive Web Design Testing

• Introduction to Galen

• Galen Demo

• Q&A

AgendaAgenda

ResponsiveWeb Design

3

4

• Write once publish everywhere

• Design your development to meet user’s behavior and environment

5

•A flexible grid based layout Page element sizing should be in relative

units

•Enable flexible mediaFlexible images are sized in relative units

•Addition of media queriesAllow the page to use different CSS style

rules based on the width of the browser

How is itachieved?

ResponsiveWeb Design Testing

66

7

How to Test multiple devices/platforms??

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

•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

• Responsive Web Design Tester

• Viewport Resizer for Chrome

• Galen

• BrowserStack

• Applitools

Tools

Galen Framework

66

10

Galen Framework • Open Source Testing Framework

• Developed by Ivan Shubin

• Built with Responsive Web Design in mind

• Uses Selenium for web page interactions

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

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

10

Galen Spec

10

Galen spec language • *.gspec

• Object Definition• Tagging• Relative positions (near, below, inside)• Alignment• Height and Width• Color Scheme • Image Comparison• CSS properties

10

Galen Demo

github repo:https://github.com/PranathiB/Galen

10

Other Features

• Error Reporting using HTML and JSON

• Screenshots capture

• Image Comparison

10

Questions Time :)