Angular2 e2e无法访问Boostrap模态元素

时间:2017-01-18 18:15:27

标签: html protractor bootstrap-modal e2e-testing angular2-testing

我在Angular2应用上运行了一些e2e测试。一个测试涉及单击按钮以打开Bootstrap模式。即使我在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(包含三个自定义组件):

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

我可以通过语法访问main-page组件中的任何元素,就像getH4()方法中第一个注释掉的行一样。似乎我无法从add-validation元素访问任何内容,这是我的Bootstrap模式。我假设这是因为加载时页面上没有HTML,但不应该addButton.click();触发模式打开,以便 IS 存在吗?

1 个答案:

答案 0 :(得分: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');