Angular2 e2e не получает доступ к модальному элементу Boostrap

Я запускаю несколько тестов e2e в приложении 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(); не должен запускать модальное окно, чтобы оно ПРИСУТСТВУЕТ?