Angular2 + e2e測試 - 不能使用by.id

Question

我是Angular2的新手，還沒有開發出測試的Angular組件。但是，我應該編寫一些UI（e2e）測試，但我甚至無法在輸入字段中輸入文本。

我的問題是， element(by.id('username')).sendKeys('test') 不起作用。 （與按鈕元素等相同）

我相信它只是一個小事情，但我無法找出它是什麼。

我有以下配置：

• Proctractor：5.1.2
• 鉻司機：58.0.3029.110
• OS：Windows NT的6.1.7601 SP1 x86_64的

規格文件：

import { LoginPage } from './login.po'; 

describe('login tests', function() { 
    let page: LoginPage; 

    beforeEach(() => { 
    page = new LoginPage(); 
    }); 

    it('Demo',() => { 
    page.navigateTo(); 
    page.getUsernameInput().sendKeys('test'); 
    }); 
}); 

頁面對象文件：

import { browser, element, by } from 'protractor'; 

export class LoginPage { 
    navigateTo() { 
    return browser.get('/login'); 
    } 

    getParagraphText() { 
    return element(by.class('app-root h1')).getText(); 
    } 

    getUsernameInput() { 
    return element(by.id('username')); 
    } 
} 

HTML模板：

.... 
<div> 
    <input 
    id="username" 
    name="username" 
    ngModel 
    type="text" 
    placeholder="{{something}}" 
    autocomplete="off" 
    class="input-text" 
    required> 
</div> 
... 

Proctractor配置

var SpecReporter = require('jasmine-spec-reporter'); 

exports.config = { 
    allScriptsTimeout: 120000, 
    getPageTimeout: 120000, 
    specs: [ 
     './e2e/**/*.e2e-spec.ts' 
    ], 
    capabilities: { 
     'browserName': 'chrome' 
    }, 
    directConnect: true, 
    seleniumAddress: 'http://localhost:4444/wd/hub', 
    baseUrl: 'http://localhost:8001', 
    framework: 'jasmine', 
    jasmineNodeOpts: { 
     showColors: true, 
     defaultTimeoutInterval: 30000, 
     print: function() {} 
    }, 
    useAllAngular2AppRoots: true, 
    beforeLaunch: function() { 
     require('ts-node').register({ 
     project: 'e2e' 
     }); 
    }, 
    onPrepare: function() { 
     jasmine.getEnv().addReporter(new SpecReporter()); 
    } 
}; 

任何幫助，高度讚賞。

編輯： 沒有解決方案在我的情況下工作。我結束了使用browser.driver.findElement(by.id('username'));而不是element(by.id('username'));這不令人滿意，因爲我仍然不明白爲什麼這不起作用。如果有人能給我一個提示或解釋，我會很感激。

Answer 1

我相信這是由於您的getUsernameInput()方法在這種情況下不返回定位符。根據量角器文檔，

element（）函數返回一個ElementFinder對象。 ElementFinder知道如何使用您作爲參數傳入的定位器來定位DOM元素，但實際上還沒有這樣做。在調用操作方法之前，它不會聯繫瀏覽器。

你可以試試這個修改後的代碼

getUsernameInput() { 
     element(by.id('username')).sendKeys('text'); 
    } 
    } 

，然後使用

it('Demo',() => { 
     page.navigateTo(); 
     page.getUsernameInput(); 
    }); 
}); 

而且，我不知道你的getText()會返回文本，因爲getText()返回一個承諾，其你將不得不解決。這已被解釋爲here。

Answer 2

我認爲你的問題是時機。

如果你這樣做，會發生什麼：

it('Demo',() => { 
    // wait for page to change to /login 
    return page.navigateTo().then(() => { 
     // then look for user input and write 'test' 
     return page.getUsernameInput().sendKeys('test'); 
    });  
}); 

編輯：

聽起來很奇怪，我認爲既然element(by.id('username'))browser.driver.findElement(by.id('username'))作品應該是等價的。

我使用助手類進行了很多瀏覽器交互，可能值得一試。

片斷我用於查找元素和發送鍵擊：

public static async getElement(locator: By | Function, waitMs?: number): Promise<ElementFinder | any> { 

    await BrowserHelper.waitForVisibilityOf(locator, waitMs | 1000); 

    return element(locator); 
} 

public static sendKeys(locator: By | Function, keys: string, clear?: boolean, waitMs?: number): Promise<void> { 
    return BrowserHelper.getElement(locator, waitMs).then((element: ElementFinder) => { 
     if (!clear) { 
      return element; 
     } 

     return element.clear().then(() => element); 
    }).then((element: ElementFinder) => { 
     return element.sendKeys(keys) 
    }); 
} 

public static async waitForVisibilityOf(locator: By | Function, waitMs?: number): Promise<any> { 
    await browser.wait(EC.presenceOf(element(locator)), waitMs || 5000).then(() => { 
     // visible 
    }, (error) => { 
     console.error('timeout at waitForVisibilityOf', locator, error); 
    }); 
}