Galen Framework — A responsive website testing
Galen Framework is a tool I stumbled upon when I was looking to automate the marketing website of the company I was working for. This is by far the most accomplished tool available for free in the market(for responsive ui testing). The script can be written in Javascript or Java. This tool provides you everything that a manager wants from the automation tool. I actively used this tool for 3–4 months (last used March 2016) after which I had to stop due to unforeseeable reasons. You can visit the website for more information www.galenframework.com
This tool is built on top of Selenium Webdriver, the genesis of UI automation framework.
Installation
http://galenframework.com/docs/getting-started-install-galen/
Project Structure
I have followed different languages and project structure styles in the past, but over the years I have used structure that has best worked for me. This is not to say that this is the best way to organize your project, but you are welcome to use what suits your style. For reference, I am going to use the project I created on my github specifically for this tool.
https://github.com/kagalenitin/galen-experiment
As you can see in the git link, I have defined,
-spec
-tests
-pages
-landingPage.js
-loginPage.js
-init.js
-landingPage.test.js
-loginPage.test.jsspec folder
This folder is specific to galen framework. In other automation tools, you will see the spec folder is where you define your test scripts. In Galen, this folder also does almost the similar thing, however, the spec defined here is to test the elements on the screen. You can define which elements you want to test and what exactly are you testing in that element.
I am going to test the username field on the screen:
username:
visible
text is “”
As you can see, I am checking to see if the element is visible and that the text inside the element is empty. You can find more reference to the spec guide here http://galenframework.com/docs/reference-galen-spec-language-guide/
pages folder
With UI automation tools, one of the biggest challenge is changing UI elements. Developers often change the elements or don’t give any id to the elements. If you have a good engineering team who understands the importance of automation, they will accommodate your needs. If not, then you fallback on what best you can do, which is, css, xpath etc. The way I overcome this challenge is by using Page Object Model. This is the most common and widely used approach for UI Automation. The idea is to define the UI element in an object and use the reference in your script.
Following example illustrates it:
username: “css: .form-control[name=\”login.username\”]”Now, when I want to access the username field, I will use the username object and interact with the element. Like below:
function(username){
this.username.typeText(username);
}If for some reason, the developer changes the css (or decides to give an id to the element) I just have to update at one place and the rest of things will be taken care.
*.test.js:
The .test.js is the file where I define functional steps for my test. Galen Framework is mainly focused on element’s spec verification on the UI. So, to interact with the elements, you need to define the logic and work your way to test the spec of a particular screen.
_test(“Verify the Login Page Elements”, environment, gridURL, deviceType, browserName, function(){
var driver = session.get(“driver”);
landingPage = new LandingPage(driver);
loginPage = new LoginPage(driver);
landingPage.load();
landingPage.loginButton.click();
loginPage.load();
checkLayout(driver, “./specs/loginPage.gspec”, deviceType);
});As you can see from the snippet above, to test the login page spec, I had to interact with the login element and then verify the login page using checkLayout() method.
Run Galen tests:
To run Galen tests, you simply need to pass the parameters using `galen test`. For more details, http://galenframework.com/docs/reference-working-in-command-line/
For the purpose of my project, I was using a few parameters to test. The UI framework must have the ability to run on multiple browsers. In Galen’s case, support different screen resolution. I also added support to run the tests locally or on the grid (Selenium Grid). If you have different test environments, viz. dev, stage, prod, you can specify that. This all will be initialized in `init.js` file of the project structure defined above.
galen test tests/*.test.js -Denvironment=local — htmlreport reports -DdeviceType=desktop -DbrowserName=firefoxSo in the above example, I have specified to run all the tests in my local environment, generate an html report, run in the desktop screen resolution on firefox browser.
That’s the gist of Galen Framework. There is a lot more to what I have mentioned in the above write up. If you think this tool is something that will be of any help you should give it a try. Given a chance, I would definitely like to work on it again.
Pros & Cons:
To begin with, there is no other tool that provides you so many features needed for UI Automation framework. The biggest asset is the pixel-to-pixel image comparison, which is hard to find in a tool when you are doing UI automation. Other than that, you have reporting, multiple-browser support, custom parameters to run test, ability to run on grid, developer support.
The only problem I see with the tool is that we have to define the objects in both spec file and the pages file to identify the element. If you are going to use this tool for functional testing, its an overhead to refer the element in two places. I am pretty sure this can be overcome someday.
Until next automation tool.
Note: Thanks to the developers of Galen Framework.