Automated Testing of Responsive Design – Galen Framework

By Nagesh Kumar 3 min read

The rapid growth of mobile and tablet usage over the desktop machines have made us question whether or not our business is ready for mobilization. Are our business portals designed to work and look good on various mobile or tablet devices? In response, more companies are now implementing Responsive Web Designs for developing their web applications and sites.

According to Wikipedia, “Responsive Web Design (RWD) is an approach to web design aimed at allowing desktop web pages to be viewed in response to the size of the screen or web browser one is viewing with. Also, it’s important to understand that Responsive Web Design tasks include offering the same support to a variety of devices for a single website.” A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Testing Responsiveness for Web Applications and Sites and Its Challenges

One of the possible approaches for testing is using different physical devices with various screen sizes. However, it’s not feasible to test all available mobile or tablet devices of the market. Though we prioritize devices using web analytics, it’s very costly to buy a sufficient number of devices; even keeping the software version up-to-date is a troublesome task.

Another possible approach is to use device emulators. However, emulators have their limitations, but they show a close approximation of how a web application will look on a particular sized mobile device.

The best possible approach will be to use emulators initially in the development cycle and, after the design becomes stable, test the application on physical devices based on the analytics.

When designing a user interface, there is always a challenge – how do we automate testing for it? How do we make sure the website arrangement remains responsive and displays properly on all sorts of devices with various screen sizes?

Device Testing Challenges

  • Hard to define and select set of devices for test
  • Frequent Requirement changes
  • Testing manually on all devices, a time intensive process
  • Not all Emulators simulate all the devices in market

Automated Responsive Web Design Testing – Galen Framework

Any testing cycle requires us to test the application with multiple iterations, and testing a responsive design is quite an effort. However, it can easily be conquered by using Automation Framework. If we use open source framework, then it’s a “win-win” situation for everyone.

Galen Framework – Highlights

  • Open Source Testing Framework
  • Responsive Web Design as a primary focus
  • Selenium used for web page interactions
  • Layout Testing, Responsive Design Testing, and Cross Browser Testing

With Galen Framework, it’s easy to set up testing for different browser sizes. Galen uses Selenium to open a browser, resize it to a defined size, and then check the page according to specifications set in a test script.

Using Galen Specs Language, it’s easy to describe any complex layout including different screen sizes or browsers. It’s easy to read and write even if you aren’t an expert in the programming language. Once a proper page spec file is written, it can be used as a requirements user interface.

Capabilities of Galen

  • Testing relative location of elements in web page
  • Checking visible text
  • Integration with Selenium Grid
  • Inject JavaScript into code
  • Color scheme testing
  • Integration with Appium for real Mobile device automation
  • Integrated with Browser Stack, Sauce labs

Explore Additional Resources

Learn more on how to select the Right CMS for your business and excel the Digital Experience.

Our web and mobile development services range from initial prototyping and wire-framing to full creation of responsive websites ready to serve tens of thousands of users every day.

Our Quality Assurance team helps our clients build a managed QA department.


GET HELP FROM OUR EXPERTS

Over the past 19 years, we have completed thousands of digital projects globally. We have one of the largest and deepest multi-solutions digital consulting teams in the world. Our proprietary processes and years of Digital Experience expertise have earned us a 97% customer satisfaction rating with our clients ranging from Global Fortune 1000 to Mid-Market Enterprises, leading educational institutions, and Non-Profits.

Contact us today if your organization needs assistance with your Quality Assurance projects.

About TA Digital

TA Digital is the only global boutique digital transformation agency that helps organizations realize immediate and long-lasting value through exceptional user experience and data-driven methodology. For nearly two decades, we have been helping clients overcome the lack of scale and resource diversity of small regional agencies and the quantity-not-quality approach of large system integrators. We are known as a global leader that helps marketing and technology executives understand the digital ecosystem, identify operational gaps within their organization and finally ushering them into a more mature and profitable digital landscape.

TA Digital has high-level strategic partnerships with digital experience platform companies like AdobeSAP and Salesforce. TA Digital also has global partnerships with industry leaders like SitecoreEpiserverElastic PathBigCommerce, AWS, Azure and Coveo. The company was also recognized in 2013, 2014, 2015, and 2019 Inc. 5000 list as one of the most successful technology companies in the United States.

Nagesh Kumar

Written By

Nagesh Kumar