responsive webdesign testing using galen
Post on 07-Apr-2017
Embed Size (px)
4Write once publish everywhere
Design your development to meet users behavior and environment
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
How is itachieved?
ResponsiveWeb Design Testing66
7How to Test multiple devices/platforms??
Pages should be readable on all resolutions.
Content dened 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!
Selecting set of devices for test
Frequent changes in requirements.
Manual testing possible for all devices?
Do Emulators simulate all the devices in market?
Responsive Web Design TesterViewport Resizer for ChromeGalenBrowserStackApplitools
Galen FrameworkOpen Source Testing FrameworkDeveloped by Ivan ShubinBuilt with Responsive Web Design in mindUses Selenium for web page interactions
How does Galen WorkDefine a set of devices that needs testingWrite a spec file that defines the layout on these devicesGalen opens a browser, resizes to specified dimension and verifies the spec fileCan be used along with Selenium Grid
Galen SpecLanguage used to define the layout of the page on different devicesUses simple english words to describe the layoutHuman readableMinimal text to define the complete page
Galen spec language*.gspecObject DefinitionTaggingRelative positions (near, below, inside)AlignmentHeight and WidthColor Scheme Image ComparisonCSS properties
Galen Demogithub repo:https://github.com/PranathiB/Galen
Other FeaturesError Reporting using HTML and JSONScreenshots captureImage Comparison
Questions Time :)