Post on 07-Apr-2017
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
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 :)