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); 
}, 

和所有工作正常。