javascript，量角器和类的问题

Question

我在理解类范围以及如何在系统中使用对象，原型等方面遇到了一些麻烦。在我看来，我正在做的事情，但它不工作，我希望有人能向我解释或让我指出正确的方向。

因此，情况如下： 我想创建一个通用页面对象和验证对象，将处理与关联的文本标签的输入框。如果我在与页面对象结构相同的类中进行验证，情况确实会发挥作用，但我最近了解到这是糟糕的设计。

这是一个Angular 2 rc1网站。我正在使用量角器3.3.0，并通过使用webdriver-manager确保项目版本的selenium和chromedriver是最新的。

因此，这里是我做了什么（文件名是在评论在每节的开始）：

'use strict'; 

/* 
* InputLabelPageObject.js 
* 
* This object will provide basic methods for an Input box with an attached label. 
* It is expected that the label will have an element called "label" and an element called "input" 
*/ 

module.exports = InputLabelPageObject; 

/** 
* Create an object that will provide methods for an input/label combination of elements. 
* 
* @param container The selector for the __container of the input/label combination of elements. 
*/ 
function InputLabelPageObject(container) { 
    this.Container = container; 
} 

InputLabelPageObject.prototype = { 
    constructor: InputLabelPageObject, 
    /** 
    * Return the element for the label of the input/label combination of elements. 
    * 
    * @returns {protractor.element} 
    */ 
    getLabel: function() { 
     return this.Container.$('label'); 
    }, 
    /** 
    * 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'); 
    }, 
    /** 
    * Get the placeholder text shown in the input of the input/label combination of elements. 
    * 
    * @returns {Promise} 
    */ 
    getPlaceholder: function() { 
     return this.getInput().getAttribute('placeholder'); 
    }, 
    /** 
    * 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() { 
      return el.sendKeys(data); 
     }); 
    } 
}; 

-

'use strict'; 

/* 
* InputLabelVerification.js 
* 
* Provide verification methods associated with an Input and Label 
* combination of elements. 
*/ 

module.exports = InputLabelVerifications; 

var inputLabelPageObject; 

function InputLabelVerifications(inputLabelPageObject) { 
    this.__setPageObject(inputLabelPageObject); 
} 

InputLabelVerifications.prototype = { 
    constructor: InputLabelVerifications, 
    __setPageObject: function (ilpo) { 
     inputLabelPageObject = ilpo; 
    }, 
    /** 
    * Verify the text on the label of the input/label combination of elements. 
    * 
    * @param expected The expected text on the label. 
    */ 
    verifyText: function (expected) { 
     //console.log('Asserting text [' + expected + ']'); 
     expect(inputLabelPageObject.getLabel()).toEqual(expected); 
    }, 
    /** 
    * 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(inputLabelPageObject.getValue()).toEqual(expected); 
    }, 
    /** 
    * Verify the placeholder text shown in the input of the input/label combination of elements. 
    * 
    * @param expected The expected text of the placeholder. 
    */ 
    verifyPlaceholder: function (expected) { 
     //console.log('Verifying placeholder text [' + expected + ']'); 
     expect(inputLabelPageObject.getPlaceholder()).toEqual(expected); 
    } 
}; 

-

'use strict'; 

/* 
* LoginPageObject.js 
* 
*/ 

var InputLabelPageObject = require('./generics/InputLabelPageObject.js'); 

module.exports = LoginPageObject; 

var __container = $('login-component'); 
var username = new InputLabelPageObject(__container.$('form:nth-child(2) > div:nth-child(1)')); 
var password = new InputLabelPageObject(__container.$('form:nth-child(2) > div:nth-child(2)')); 

/** 
* Create an object that contains the methods necessary to perform actions against the LoginPageObject page. 
* 
* @param url The base URL string. If not undefined, it will load the url+'/login' page. 
* @constructor new LoginPageObject('http://localhost:9000'); 
*/ 
function LoginPageObject(url) { 
    if (url) { 
     this.loadPage(url) 
    } 
} 

LoginPageObject.prototype = { 
    constructor: LoginPageObject, 
    loadPage: function (url) { 
     url = url + '/login'; 
     console.log('Loading page: '+ url); 
     browser.get(url); 
    }, 
    welcome: { 
     /** 
     * Return the element for the Welcome text 
     * 
     * @returns {ElementFinder} 
     */ 
     get: function() { 
      return __container.$('section:first-child h1:first-child'); 
     }, 
    }, 
    /** 
    * Return an InputLabelPageObject object specific for the username input and label elements. 
    */ 
    username: username, 
    /** 
    * Return an InputLabelPageObject object specific for the password input and label elements. 
    */ 
    password: password, 
    loginButton: { 
     /** 
     * Return the element for the login button. 
     * 
     * @returns {ElementFinder} 
     */ 
     get: function() { 
      return __container.$('form > button'); 
     }, 
     /** 
     * Click the LoginPageObject button. 
     * @returns {*|void|webdriver.promise.Promise<void>|ActionSequence|!webdriver.promise.Promise.<void>} 
     */ 
     click: function() { 
      return this.get().click(); 
     } 
    } 
}; 

-

'use strict'; 

/* 
* LoginPageVerifications.js 
*/ 

var LoginPageObject = require('../pageObjects/LoginPageObject'); 
var verifyText = require('./generics/VerifyText'); 
var inputLabelVerifications = require('./generics/InputLabelVerifications'); 

module.exports = LoginPageVerifications; 

var __loginPageObject = new LoginPageObject(); 

function LoginPageVerifications(url) { 
    if (url) { 
     __loginPageObject = new LoginPageObject(url); 
    } 
} 

LoginPageVerifications.prototype = { 
    constructor: LoginPageVerifications, 
    loginPageObject: new LoginPageObject(), 
    welcome: { 
     verifyText: function (expected) { 
      verifyText(__loginPageObject.welcome.get(), expected); 
     } 
    }, 
    username: new inputLabelVerifications(__loginPageObject.username), 
    password: new inputLabelVerifications(__loginPageObject.password), 
    loginButton: { 
     verifyText: function (expected) { 
      verifyText(__loginPageObject.loginButton.get(), expected); 
     } 
    }, 
    /** 
    * Performs the actions of logging in. That is, enter the username and password values, 
    * then click the LoginPageObject button. This does *not* verify page load. 
    * 
    * @param username The username to login with. 
    * @param password The password to login with. 
    */ 
    doLogin: function (username, password) { 
     var uPromise = __loginPageObject.username.sendKeys(username); 
     var pPromise = __loginPageObject.password.sendKeys(password); 
     protractor.promise.asap(this.username.verifyValue(username)); 
     protractor.promise.asap(this.password.verifyValue(password)); 
     protractor.promise.all([uPromise, pPromise]).then(this.loginButton.click()); 
    }, 
    /** 
    * Verifies all page elements' text or other default attributes. 
    * 
    * @param welcomeText The expected Welcome text 
    * @param userText The expected username label text. 
    * @param userPlaceholder The expected username's input element's placeholder text. 
    * @param passText The expected password label text. 
    * @param passPlaceholder The expected password's input element's placeholder text. 
    * @param loginText The expected login button text. 
    */ 
    verifyPage: function (welcomeText, userText, userPlaceholder, passText, passPlaceholder, loginText) { 
     this.welcome.verifyText(welcomeText); 
     this.username.verifyText(userText); 
     this.username.verifyPlaceholder(userPlaceholder); 
     this.password.verifyText(passText); 
     this.password.verifyPlaceholder(passPlaceholder); 
     this.loginButton.verifyText(loginText); 
    } 

}; 

个

-

'use strict'; 

/* 
* login-spec.js 
*/ 

var LoginPageVerifications = require('../components/actions/LoginPageVerifications'); 

var myUrl = 'http://localhost:3000'; 

describe('My Login Page test', function() { 
    var loginPage; 
    beforeAll(function() { 
     loginPage = new LoginPageVerifications(myUrl); 
    }); 

    it('should verify username input and label values', function() { 
     var welcomeText = 'Thank you for visiting my login page'; 
     var userText = 'Username'; 
     var userPlaceholder = 'Enter your username'; 
     var passText = 'Password'; 
     var passPlaceholder = 'Enter your password'; 
     var loginText = 'Login'; 

     loginPage.username.verifyText(userText); 
     // loginPage.verifyPage(welcomeText, userText, userPlaceholder, passText, passPlaceholder, loginText); 
    }); 
}); 

说我平时看到的结果： 如果InputLabelVerification.js我离开了var inputLabelPageObject或者尝试只在构造函数来设置的值，我得到Failed: Cannot read property 'getLabel' of undefined。所以，我认为我必须按照上面显示的方式进行设置。

我似乎得到最接近的是，当我得到如下回应：

A Jasmine spec timed out. Resetting the WebDriver Control Flow. 
F 

Failures: 
1) My Login Page test should verify username input and label values 
Expected ({ ptor_: ({ controlFlow: Function, schedule: Function, 
setFileDetector: Function, getSession: Function, getCapabilities: Function, 
quit: Function, actions: Function, touchActions: Function, 
executeScript: Function, executeAsyncScript: Function, call: Function, 
wait: Function, sleep: Function, getWindowHandle... }) }) to equal 'Username'. 

在LoginPageVerification.js，我测试过，并确保其他验证（欢迎和loginButton）做工精细。

而且，如果从登录-spec.js我加入这一行：

expect(loginPage.loginPageObject.username.getLabel().getText()).toEqual(userText); 

这种期望通过测试。

Answer 1

我已经得到了答案。现在我感到很傻。我会在两天内发布答案。 （这仅花了我好几天得到它的权利。）

本质上讲，我从InputLabelPageObject从InputLabelVerifications，它返回一个ElementFinder调用.getLabel() ...它不回报需要一个字符串。（哎呀）

在InputLabelPageObject，我添加了以下行：

getText: function() { 
    this.getLabel().getText(); 
} 

然后叫该函数在InputLabelVerifications类，

verifyText: function (expected) { 
    //console.log('Asserting text [' + expected + ']'); 
    expect(inputLabelPageObject.getText()).toEqual(expected); 
}, 

和所有工作正常。