验证 sendKeys 会导致页面对象文件导致未定义的错误（量角器）

Question

所以，我有一个页面对象文件，它为页面上的元素提供了许多方法。该页面是一个登录页面，其中包含一些文本、用户名和密码输入元素以及登录按钮。我创建了一个名为“InputLabel.js”的通用对象，它将标​​签和输入元素联系在一起以进行测试。

我遇到的问题是，在我清除输入、发送数据并验证数据后，我收到了Failed: Cannot read property 'verifyValue' of undefined 错误。

以下是相关代码：

// InputLabel.js

function InputLabel(container) {
    this.Container = container;
}

InputLabel.prototype = {
    constructor: InputLabel,
    // ...
    /**
     * Return the element for the input of the input/label combination of elements.
     * 
     * @returns {ElementFinder}
     */
    getInput: function () {
        return this.Container.$('input');
    },
    /**
     * Return the text shown in the input of the input/label combination of elements.
     * 
     * @returns {Promise}
     */
    getValue: function () {
        return this.getInput().getAttribute('value');
    },
    /**
     * Verify the text shown in the input of the input/label combination of elements.
     * 
     * @param expected The expected text in the input element.
     */
    verifyValue: function (expected) {
        console.log('Asserting input value [' + expected + ']');
        expect(this.getValue()).toEqual(expected);
    },
    // ...
    /**
     * Clears the input element then puts the text from data into the input element.
     * 
     * @param data The text to be entered into the input element.
     */
    sendKeys: function (data) {
        var el = this.getInput();
        el.clear().then(function () {
            el.sendKeys(data).then(function () {
                console.log("Verifying [" + data + "] was sent to the input.")
                this.verifyValue(data);
            });
        });
    }
};

在需要文件后，我可以毫无问题地调用这些方法中的任何一个，除了 sendKeys。如果我禁用 this.verifyValue(data); 方法，sendKeys 工作正常。

// LoginPage.js

var InputLabel = require('InputLabel.js');

function LoginPage() {
}

var username = new InputLabel($('#username'));
var password = new InputLabel($('#password'));

function.prototype = {
   // ...
   username: username,
   password: password,
   loginButton: {
      get: function() { return $('#Login'); },
      click: function() { return this.get().click(); }
   },
   // ...
   login: function(user, pw) {
      this.username.sendKeys(user);
      this.password.sendKeys(pw);
      this.loginButton.click()
   }
}

我是否在范围内失去了一些东西？同样，错误是它失败了，因为它在发送密钥后无法读取未定义的属性“verifyValue”。

Answer 1

在包含“this.verifyValue(data);”的行中，“this”关键字存在范围问题。在这种情况下，“this”关键字不引用 InputLabel 类。此外，保持页面对象无断言被认为是一种好习惯。见http://martinfowler.com/bliki/PageObject.html