Angular2 e2e not accessing Boostrap modal element

Question

I'm running some e2e tests on an Angular2 app. One test involves clicking a button to open a Bootstrap modal. Even though I simulate the click of the button in my e2e test, it seems I cannot access the modal.

I'm currently just trying to run a simple test to click the button, open the modal, and check the text in an h4 element within the modal.

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 (contains three custom components):

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

I am able to access any element inside the main-page component via syntax like the first commented out line in getH4() method. It seems I cannot access anything from the add-validation element, which is my Bootstrap modal. I'm assuming it is because that HTML is not present on the page on load, but shouldn't addButton.click(); trigger the modal to open so it IS present?

Answer 1

You might need to wait for the popup to be visible via 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');