Galen - A good cook for automated responsive design
Co-speaker - Soumyajit.basu
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 talk, we are going to discuss the challenges in testing RWD websites and how to overcome those by using the tools available online.
I have chosen Galen tool to demonstrate the automation of Responsive web design testing. Come and experience the talk to be enlightened about this new found tool.
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. This can also be used as a guide for the UI developers where they build the layout based on the spec files agreed by the business.
My ideal target audience:
My session would cover the below topics:
1. Introduction to RWD (Responsive Web Design)
2. Challenges in testing RWD sites
3. Tools available for Automating RWD sites
4. Introduction to galen tool
5. Demo with galen tool
a. How to write a spec file
b. Write a test file for the spec file
c. Run the galen test file
d. Generating reports for the tests
e. Using screenshots to view the errors on the UI
f. Demo code can be found here: Github Link
6. Using the same for cross browser testing
Key takeaways for the audience
1. Understanding the nuances of Responsive Web Design
2. Knowing the variety of tools to used test those responsive websites
3. How to approach Responsive Web Design testing
4. What is Galen and how to use it
5. Hands-on demo of Galen