Uploaded byBirudugadda Pranathi
Responsive Web Design testing using Galen Framework
The document provides an overview of responsive web design testing. It discusses how responsive web design works through flexible grids, relative sizing, and media queries. It outlines things to keep in mind when testing such as selecting devices, handling frequent changes, and challenges with emulators. The document then introduces the Galen framework for responsive web design testing. It describes how Galen works by defining devices and layout specs, and opening browsers to specified dimensions to verify specs. Key aspects of the Galen spec language are outlined such as object definition, tagging, positions, alignment, and comparing CSS properties and images. Finally, the document advertises a question and answer period.
More Related Content
![Ship quality mobile apps with speed [Webinar]](https://cdn.slidesharecdn.com/ss_thumbnails/shipqualitymobileappswithspeed-190702171419-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Responsive Web Design testing using Galen Framework
Responsive Web Design testing using Galen Framework
- 1. Responsive Web Design Testing Pranathi Birudugadda ShilpaBadekila vodQA Aug 2015
- 2. 2 • Introduction toResponsive Web Design • Responsive Web Design Testing • Introduction to Galen • Galen Demo • Q&A Agenda Agenda
- 3.
- 4. 4 • Write oncepublish everywhere • Design your development to meet user’s behavior and environment
- 5. 5 •A flexible gridbased 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 it achieved?
- 6.
- 7. 7 How to Testmultiple devices/platforms??
- 8. 8 •Pages should bereadable 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 ofdevices for test •Frequent changes in requirements. •Manual testing possible for all devices? •Do Emulators simulate all the devices in market? Challenges?
- 10. 10 • Responsive WebDesign Tester • Viewport Resizer for Chrome • Galen • BrowserStack • Applitools Tools
- 11.
- 12. 10 Galen Framework • OpenSource Testing Framework • Developed by Ivan Shubin • Built with Responsive Web Design in mind • Uses Selenium for web page interactions
- 13. 10 How does Galen Work • Definea 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. 10 Galen Spec • Languageused 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.
- 16. 10 Galen spec language •*.gspec • Object Definition • Tagging • Relative positions (near, below, inside) • Alignment • Height and Width • Color Scheme • Image Comparison • CSS properties
- 17.
- 18. 10 Other Features • Error Reportingusing HTML and JSON • Screenshots capture • Image Comparison
- 19.