Get browser.element into page objects with children

问题

I am doing testing when I fork a driver instance to send messages between browsers. I also use page objects for mapping the view. In my page objects I have other page objects, some of who inherits from another page object. Though, when I have forked a driver instance and have two browsers to work with, it's troublesome to get the element function from the forked driver in the page objects. Especially for the page object who other PO inherits from. This is a sample from my code:

var NavBar = function () {  
    this.button = element(by.buttonText('Click'));
};

var MySiteElement = function () {
    this.someElement = element(by.name('hiddenElement'));
};

NavBar.prototype = new MySiteElement();

var HomeView = function (element) {
    this.navbar = new NavBar()
};

module.exports = HomeView;

Let's say my spec looks like this:

describe('Home View', funciton () {
    it('should get text from right browser', function () {
        browser.get('http://localhost:3000/#/home');
        var browser2 = browser.forkNewDriverInstance(true);
        var view = new HomeView(browser.element);
        var view2 = new HomeView(browser2.element);
        view2.navbar.content.click()
        expect(view.navbar.someElement.getText()).toBe('unchanged')
        expect(view2.navbar.someElement.getText()).toBe('changed')
    });
});

Let's say that my site is composed so that when the navbar button is clicked, the someElement's text change to 'changed'. But I have to click on the right element, and it's not right to use just element when I have a forked browser that I want to interact with. But I don't know how to set the right element variable inside the HomeView page object. I now that browser2.element get me the element variable from the forked driver, but how do I expose that to all the page object. Currently I pass the browser instance's element property as an argument to the page object, but I don't know how to go further.

Please help, this has got me crazy!

回答1:

I came up with a solution. Since the element function only should be passed once (when instantiating the HomeView since every other PO is a child of the HomeView) I only pass the element function once. All declarations of the classes are then nested inside the HomeView object function:

var HomeView = function (element) {
    var NavBar = function () {  
        this.button = element(by.buttonText('Click'));
    };

    var MySiteElement = function () {
        this.someElement = element(by.name('hiddenElement'));
    };

    NavBar.prototype = new MySiteElement();

    this.navbar = new NavBar(element);
};

module.exports = HomeView;

However, if you have several View objects, this means repeating yourself (no good). I use node modules for importing the page objects, and the modules' scope don't inherit from where they're required. But to this I have a solution as well. In the module where the page object lies, export a function holding the page object declaration and pass the element to it.

var HomeView = function (element) {
    var NavBar = require('./navBar.po.js')(element):

    this.navbar = new NavBar();
};

module.exports = HomeView

And ./navBar.po.js would look like this:

module.exports = function (element) {
    require('./mySiteElement.po.js')(element);

    var NavBar = function () {
        this.button = element(by.buttonText('Click'));
    }

    NavBar.prototype = new MySiteElement();

    return NavBar;
};

来源：https://stackoverflow.com/questions/29829013/get-browser-element-into-page-objects-with-children

标签

javascript

Prototype

protractor