Angular 2 e2e 不访问 Bootstrap 模态元素

Question

我正在运行Angular2 应用程序上进行一些端到端测试。一项测试涉及单击按钮以打开 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 存在？

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');

Angular 2 e2e 不访问 Bootstrap 模态元素

Angular2 e2e not accessing Boostrap modal element

html

bootstrap-modal

protractor

e2e-testing

angular2-testing