Galen Framework was made with responsive design in mind. It works in a following way:
- Galen opens a page in browser
- Resizes browser to specified size
- Tests the layout with Galen Specs
Galen Specs is the language with which you define how the page should look like for different devices. The language is quite advanced and allows you to express complete layout of your website with minimal text. Take a look at the following example.
= Main section = @on * header: height 100px inside screen 0px top width 100% of screen/width menu: height 50 to 60px width 100% of screen/width below header ~ 0px search-button: inside menu 20 to 50px left, 0 to 10px top @on mobile search-button: width 100px @on desktop search-button: width 150px
Galen uses Selenium for interacting with elements on page and getting their locations and dimensions.
Once Galen sees that something is wrong – it reports the error, makes a screenshot and highlights the misbehaving element on it.
You can also run test against Selenium Grid in case you want to cover cross-browser layout testing.
In case you don’t have resources to set up a Selenium Grid you can also run Galen tests with Sauce Labs or BrowserStack. Actually with BrowserStack and Sauce Labs you can even run your tests against real mobile devices like iPhone or Android so you don’t need to emulate the mobile layout by resizing a browser.
Galen offers two ways of reporting:
- Html Reports - gives nice overview of all test suites with complete reports, screenshots and highlighted errors
- TestNG Reports - can be used for embedding Galen in a CI tool like Jenkins
Galen is licensed with Apache License, Version 2.0 and is distributed for free.
If you find any issues please report them on GitHub