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?