Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience like easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to mobile phones). Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device. This has the net effect of penalizing sites that are not mobile friendly. The responsive web design responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device and provides the enhanced user-experience by re-structuring the contents as per the end-user devices. With plethora devices releasing every day, this has gained significance in the web designing and along with it came the testing challenges. In this workshop, we are going to discuss the challenges in testing RWD websites and how to overcome those by using the tools available online. Why Galen? Galen is an open source framework built for responsive websites. It provides the feasibility to test the various pages on screen sizes and browsers. The test and spec files can be written in plain English which makes it easier for the business people to understand and contribute.

1. AUTOMATING THE
RESPONSIVE WEBSITE
TESTING
Pranathi Birudugadda

2. Pranathi Birudugadda
Quality Enthusiast
Agile Practitioner
Test Automation Engineer
Occasional Blogger
2
ABOUT ME
@Pranathi_B
https://in.linkedin.com/in/pranathi
pranathibirudugadda.wordpress.com
ThoughtWorks TechnologiesIndia
https://github.com/PranathiB

3. 3
WHAT IS RESPONSIVE
WEB DESIGN

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

5. HOW IS IT ACHIEVED
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

7. 7
RESPONSIVE WEB
DESIGN TESTING

8. How to Test multiple devices/platforms??

9. 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

10. Selecting set of devices for test
COMMON CHALLENGES
Frequent change of requirements
Manual testing on all the devices?

11. Responsive
Web Design
Tester
Viewport resize
Browserstack
Applitools
Galen
Framework
Online website
checkers Google
responsive
checker
AVAILABLE TOOLS IN THE MARKET

12. 12
GALEN FRAMEWORK

13. Open Sourced, distributed under Apache License 2
Developed by Ivan Shubin
Designed with responsiveness in mind
Uses Selenium for web page interactions
GALEN FRAMEWORK

14. HOW GALEN WORKS
▫︎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

15. GALEN SPEC FILE
● 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

16. 16
GALEN SPEC FILE

17. GALEN SPEC LANGUAGE
● *.gspec
● Object Definition
● Tagging
● Relative positions (near, below, inside)
● Alignment
● Height and Width
● Color Scheme
● Image Comparison
● CSS properties

18. DEMO
Github repo:
https://github.com/PranathiB/Galen

20. OTHER FEATURES
● Error Reporting using HTML and JSON
● Screenshot capture
● Image Comparison
● Warning levels
● Custom errors

21. Questions?
THANK YOU