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.
AUTOMATING THE
RESPONSIVE WEBSITE
TESTING
Pranathi Birudugadda
Pranathi Birudugadda
Quality Enthusiast
Agile Practitioner
Test Automation Engineer
Occasional Blogger
2
ABOUT ME
@Pranath...
3
WHAT IS RESPONSIVE
WEB DESIGN
4
• Write once publish everywhere
• Design your development to meet user’s behavior and environment
HOW IS IT ACHIEVED
5
▫︎A flexible grid based layout
▫︎Page element sizing should
be in relative units
▫︎Enable flexible medi...
7
RESPONSIVE WEB
DESIGN TESTING
How to Test multiple devices/platforms??
Pages should be readable on all
resolutions
Content defined ‘important’
need to be visible in all
breakpoints
Text, control...
Selecting set of devices for test
COMMON CHALLENGES
Frequent change of requirements
Manual testing on all the devices?
Responsive
Web Design
Tester
Viewport resize
Browserstack
Applitools
Galen
Framework
Online website
checkers Google
respon...
12
GALEN FRAMEWORK
Open Sourced, distributed under Apache License 2
Developed by Ivan Shubin
Designed with responsiveness in mind
Uses Seleni...
HOW GALEN WORKS
▫︎Define a set of devices that needs testing
▫︎Write a spec file that defines the layout on these
devices
▫︎G...
GALEN SPEC FILE
● Language used to define the layout of the page on
different devices
● Uses simple english words to describ...
16
GALEN SPEC FILE
GALEN SPEC LANGUAGE
● *.gspec
● Object Definition
● Tagging
● Relative positions (near, below, inside)
● Alignment
● Height...
DEMO
Github repo:
https://github.com/PranathiB/Galen
OTHER FEATURES
● Error Reporting using HTML and JSON
● Screenshot capture
● Image Comparison
● Warning levels
● Custom err...
Questions?
THANK YOU
Automating the responsive website testing
Automating the responsive website testing
Upcoming SlideShare
Loading in …5
×

Automating the responsive website testing

491 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Automating the responsive website testing

  1. 1. AUTOMATING THE RESPONSIVE WEBSITE TESTING Pranathi Birudugadda
  2. 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. 3 WHAT IS RESPONSIVE WEB DESIGN
  4. 4. 4 • Write once publish everywhere • Design your development to meet user’s behavior and environment
  5. 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
  6. 6. 7 RESPONSIVE WEB DESIGN TESTING
  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 COMMON CHALLENGES Frequent change of requirements Manual testing on all the devices?
  10. 10. Responsive Web Design Tester Viewport resize Browserstack Applitools Galen Framework Online website checkers Google responsive checker AVAILABLE TOOLS IN THE MARKET
  11. 11. 12 GALEN FRAMEWORK
  12. 12. Open Sourced, distributed under Apache License 2 Developed by Ivan Shubin Designed with responsiveness in mind Uses Selenium for web page interactions GALEN FRAMEWORK
  13. 13. 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
  14. 14. 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
  15. 15. 16 GALEN SPEC FILE
  16. 16. GALEN SPEC LANGUAGE ● *.gspec ● Object Definition ● Tagging ● Relative positions (near, below, inside) ● Alignment ● Height and Width ● Color Scheme ● Image Comparison ● CSS properties
  17. 17. DEMO Github repo: https://github.com/PranathiB/Galen
  18. 18. OTHER FEATURES ● Error Reporting using HTML and JSON ● Screenshot capture ● Image Comparison ● Warning levels ● Custom errors
  19. 19. Questions? THANK YOU

×