Transcript
Page 1: Responsive WebDesign Testing Using Galen

Responsive Web Design Testing

Pranathi BirudugaddaShilpa Badekila

vodQA Aug 2015

Page 2: Responsive WebDesign Testing Using Galen

2

• Introduction to Responsive Web Design

• Responsive Web Design Testing

• Introduction to Galen

• Galen Demo

• Q&A

AgendaAgenda

Page 3: Responsive WebDesign Testing Using Galen

ResponsiveWeb Design

3

Page 4: Responsive WebDesign Testing Using Galen

4

• Write once publish everywhere

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

Page 5: Responsive WebDesign Testing Using Galen

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?

Page 6: Responsive WebDesign Testing Using Galen

ResponsiveWeb Design Testing

66

Page 7: Responsive WebDesign Testing Using Galen

7

How to Test multiple devices/platforms??

Page 8: Responsive WebDesign Testing Using Galen

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!

Page 9: Responsive WebDesign Testing Using Galen

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?

Page 10: Responsive WebDesign Testing Using Galen

10

• Responsive Web Design Tester

• Viewport Resizer for Chrome

• Galen

• BrowserStack

• Applitools

Tools

Page 11: Responsive WebDesign Testing Using Galen

Galen Framework

66

Page 12: Responsive WebDesign Testing Using Galen

10

Galen Framework • Open Source Testing Framework

• Developed by Ivan Shubin

• Built with Responsive Web Design in mind

• Uses Selenium for web page interactions

Page 13: Responsive WebDesign Testing Using Galen

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

Page 14: Responsive WebDesign Testing Using Galen

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

Page 15: Responsive WebDesign Testing Using Galen

10

Galen Spec

Page 16: Responsive WebDesign Testing Using Galen

10

Galen spec language • *.gspec

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

Page 17: Responsive WebDesign Testing Using Galen

10

Galen Demo

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

Page 18: Responsive WebDesign Testing Using Galen

10

Other Features

• Error Reporting using HTML and JSON

• Screenshots capture

• Image Comparison

Page 19: Responsive WebDesign Testing Using Galen

10

Questions Time :)


Top Related