Angular2 e2eがBoostrapモーダル要素にアクセスしていない

Question

Angular2アプリでいくつかのe2eテストを実行しています。 1つのテストでは、ボタンをクリックしてブートストラップモーダルを開きます。 e2eテストでボタンのクリックをシミュレートしても、モーダルにアクセスできないと思われます。

私は現在、ボタンをクリックし、モーダルを開き、モーダル内のh4要素のテキストをチェックするための簡単なテストを実行しようとしています。

app.po.ts：

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

export class SolarUi4Page { 
    navigateTo() { 
    return browser.get('http://localhost:4200/'); 
    } 

    getAddButton() { 
    return element(by.css('.icon-plus')); 
    } 

    //2nd and 3rd lines attempt to do the same thing. Neither work 
    getH4() { 
    //return element(by.css('main-page')).element(by.id('data')).getText(); 
    //return element(by.css('add-validation')).element(by.tagName('h4')).getText(); 
    return element(by.css('h4')).getText(); 

    } 
} 

app.e2e-spec.ts：

import { SolarUi4Page } from './app.po'; 

describe('solar-ui4 main page', function() { 
    let page: SolarUi4Page; 

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

    it('should add new value to array/table and display it',() => { 
    page.navigateTo(); 
    let addButton = page.getAddButton(); 
    addButton.click(); 
    expect(page.getH4()).toEqual('Add Data Point'); 
    }); 
}); 

app.component.html（3つのカスタムコンポーネントを含む）：

<main-page></main-page> 
<add-validation></add-validation> 
<delete-validation></delete-validation> 

の最初のコメントアウトされた行のような構文で、main-pageコンポーネント内の任意の要素にアクセスできます方法。私はadd-validation要素からアクセスすることはできないようです。それは私のブートストラップモーダルです。私はそれがHTMLは負荷のページに存在しないためだと仮定しているが、addButton.click();はモーダルを開くようにするべきではないは存在する？

Answer 1

あなたはbrowser.wait()経由見えるようにポップアップため待つ必要があるかもしれません：

var EC = protractor.ExpectedConditions; 
var elm = element(by.css('h4')); 

browser.wait(EC.visibilityOf(elm), 5000); 
expect(elm.getText()).toEqual('Add Data Point'); 

を