Galen Framework

Automated testing of look and feel for your responsive websites

Download 2.4.4

Stay in touch

The Idea...

Layout testing seemed always a complex task. Galen Framework offers a simple solution: test location of objects relatively to each other on page. Using a special syntax and comprehensive rules you can describe any layout you can imagine

Runs in Selenium Grid

Galen Framework runs well in Selenium Grid. You can set up your tests to run in a cloud like HeadSpin, LambdaTest, Sauce Labs, or BrowserStack so that you can even test your responsive websites on different mobile devices. Galen can run multiple tests in parallel which is also a nice time saver.

Responsive Design

Galen Framework is designed with responsiveness in mind. It is easy to set up a test for different browser sizes. Galen just opens a browser, resizes it to a defined size and then tests the page according to specifications

Human Readable and Advanced Syntax

Basic syntax

@objects comments #comments article-content div.article = Main section = @on mobile, tablet comments: width 300px inside screen 10 to 30px top right near article-content > 10px right @on desktop comments: width ~ 100% of screen/width below article-content > 20px

See more

Using Galen Specs Language you are able to describe any complex layout including different screen sizes or browsers. It's not only easy to write, it is also easy to read it if you are unfamiliar with the language. You can write a proper page spec file and use it later as a requirements document for your Front-end

Advanced

@objects menu-item-* css #menu li header-logo id logo button-login xpath //button[@id='login'] = Menu = @forEach [ menu-item-* ] as itemName, next as nextItem ${itemName}: left-of ${nextItem} 10px header-logo: image file imgs/header-logo.png, error 4% button-login: color-scheme 5% #ffefd0, 87 to 90% #ae32ef

See more

There a lot of techniques that can help you optimize your specs. Together with that Galen Framework provides you with rich functionality for visual testing like image comparison and color scheme verification

Test Like a Pro

= Login box = login_box: | at the top inside content with ${content_vertical_margin} margin centered horizontally inside content 1px | every &login_box_element is more or less readable | every &login_box_textfield has height ${form_textfield_height} | every &login_box_button is tapable @on desktop, tablet | &login_box_form_elements are aligned vertically above each other with ${login_box_elements_vertical_margin} margin | first &login_box_form_element is inside login_box ${login_box_elements_side_margin} top | last &login_box_form_element is above login_button ${login_box_elements_vertical_margin} | &login_box_buttons are aligned horizontally next to each other with 0 to 5px margin @on mobile | &login_box_elements are aligned vertically above each other with ${login_box_elements_vertical_margin} margin | &login_box_elements sides are vertically inside login_box with ${login_box_elements_side_margin} margin

Galen Extras

In Galen Framework you can build your own expressions to test multiple elements in a single line. Also this way you can write clear specs and highly maintainable and reliable test code.

Detailed Html Reports

Error Reporting

Example

Galen Framework generates Html reports where you can see all your test objects on the page

Screenshots

Example

It automatically highlights the misaligned elements so it is really easy to see what is wrong on the page

Image Comparison

Example

Galen Framework gives you the ability to perform visual check and shows you the mismatching area

Execute Tests in Various Languages

Basic syntax

@@ Table devices | deviceName | size | tags | | mobile | 450x700 | mobile | | tablet | 600x800 | tablet | | desktop | 1024x768 | desktop | @@ Parameterized using devices Home page on ${deviceName} http://example.com ${size} inject custom-cookies.js check homepage.spec --include ${tags} @@ Parameterized using devices User profile page on ${deviceName} http://example.com ${size} run loginAsTestUser.js wait 1m until visible "css: #login-button" check userProfile.spec --include ${tags}

See more

Standard suites are easy for a quick start but still give you a lot of power. You can select different browser like Firefox, Chrome, Internet Explorer or switch your tests to Selenium Grid. In case the page is not easy accessible you can either inject custom JavaScript on the client-side or run a JavaScript action on a test side so that you can prepare your page for a layout check

JavaScript Tests

function Device(deviceName, size, tags) { this.deviceName = deviceName; this.size = size; this.tags = tags; } var devices = { mobile: new Device("mobile", "450x700", ["mobile"]), tablet: new Device("tablet", "600x800", ["tablet"]), desktop: new Device("dekstop", "1024x768", ["desktop"]) }; forAll(devices, function () { test("Home page on ${deviceName}", function (device){ var driver = createDriver("http://example.com", device.size); checkLayout(driver, "homepage.spec", device.tags); driver.quit(); }); });

See more

With JavaScript tests you are free to invent your own test framework and perform a lot of complex stuff. Out of the box Galen provides the following features for JavaScript tests:

  • Handling before and after test events
  • Filtering or reordering the test sequence
  • Managing custom data providers
  • Parameterizing tests by arrays or maps

Java API

public class WelcomePageTest extends GalenTestNgTestBase { @Override public WebDriver createDriver(Object[] args) { return new FirefoxDriver(); } @Test public void welcomePage_shouldLookGood_onDesktopDevice() { load("http://example.com", 1024, 768); checkLayout("/specs/welcomePage.spec", asList("mobile")); } }

See example

As Galen Framework is implemented in Java its API is also available for Java tests. Galen is released to Sonatype Central Repository so you can add it as a dependency in your Maven project.

Galen is Open-Sourced!

Galen Framework is distributed under Apache License 2 and the sources are available on GitHub.

Even this website is open-sourced and is posted on GitHub so that anyone can help improve the documentation.

Let's Start!

Checkout the "First Project" 2 minute tutorial

First Project Learn More