Combining Galen and Protractor frameworks

Question

The Story

We've been using Protractor framework extensively and have established a rather large test codebase. We've also been following the Page Object pattern to organize our tests.

Recently, we've started to use the Galen framework to fill the gap of visual/layout/responsive design testing. We really like the framework and would like to proceed with using it more.

The biggest problem right now is Page Objects. Both frameworks have its own ways of defining page objects.

Here is an example Protractor page object:

var LoginPage = function () {
    this.username = element(by.id("username"));
    this.password = element(by.id("password"));

    this.loginButton = element(by.binding("buttonText"));
};

module.exports = new LoginPage();

And, here is a sample Galen page object:

this.LoginPage = $page("Login page", {
    username: '#username',
    password: '#password',
    loginButton: 'button[ng-click*=login]'
});

Currently, we are duplicating the locators and repeating ourselves - violating the DRY principle. And, the other follow-up issue is that Galen only supports "by css", "by id" or "by xpath" location techniques at the moment - which means page objects don't map one-to-one.

The Question

Is there a way to avoid repeating page objects and element locators combining both Protractor and Galen together?

Answer 1

Given the information available, I don't see a direct way to combine it.

However, Galen and Protractor are available on Github and I don't see any bigger obstacle from aligning/forking/modifying them to what you need.

The best shot I see is to contribute to Galen framework and extend their GalenPages.js with a mapping functionality to Protractor Page Objects. Though there are 600+ lines of code in that .js-file, it seems doable within reasonable efforts.

At least to open an issue in the Galen GitHub project in that direction would sure be worth the effort.