量角器元素（..）从单独的文件返回未定义

Question

I'm writing a Protractor test and in my test.step.js file I have

element(by.css('...')).getText().then(function (text) {
    expect(text).to.equal('expectedText');
});

This works as expected and passes.

Instead I created a test.page.js file and in there put this.field = element(by.css('...')); and then in my step file had

"use strict"

module.exports = function exampleTest() {
    var TestPage = require("...");
    var testPage = new TestPage;
    ...
    test.Then(..., function (next) {
       testPage.field.getText().then(function (text) {
          expect(text).to.equal('expectedText');
       });
    });
}

then field is undefined. I have also tried adding getText() in the page file, but again get undefined or get told that I can't call 'then' on undefined.

In my mind, this should do exactly the same thing as the first example, but I'm far from an expert with Angular or JavaScript.

test.page.js looks like:

"use strict";

module.exports = (function () {
    function TestPage() {
        this.field = element(by.css('...'));
    }

    return TestPage;
});

Hoping someone can shine some light on why this is happening and what I should do instead to be able to put the CSS selector inside a page file for re-use.

Thanks

Answer 1

Your code new TestPage; returns the constructor TestPage , but it's never called.

You could return the class :

function TestPage() {
    this.field = element(by.css('...'));
}

module.exports = TestPage;

var TestPage = require("...");
var testPage = new TestPage;
testPage.field.getText().then(...

Or an instance of the class:

function TestPage() {
    this.field = element(by.css('...'));
}

module.exports = new TestPage();

var testPage = require("...");
testPage.field.getText().then(...

Answer 2

The way you defined re-usable element locators looks different. I am following some thing like below

Step 1: Define a .js file which should contain the Locator objects and re-usable methods

var Login = {

    PageElements: {
        emailInput: element(by.css('#email')),
        passwordInput: element(by.css('#password')),
        loginForm: element(by.css('#form')),
    },
    doLogin: function doLogin() {
        this.PageElements.emailInput.sendKeys('blahblah@email.com');
        this.PageElements.passwordInput.sendKeys('blahblah');
        this.PageElements.loginForm.submit();
    },
};

module.exports = Login;

Step 2: Call these page objects in your test classes.

var LoginPage = require('../pageobjects/LoginPage.js');
it('Scenario1_Login',function(){
 LoginPage.PageElements.emailInput.sendKeys('blahblah');
});

More details here