Can not open angular ui bootstrap modal

[NetanelBasal]

I am trying to make simple test, i want to click on a button that opens signup ui bootstrap modal and check if isPresent, i does not why i am not success to make this simple task with protractor.

my signup page object:

function SignUpPage() {
  this.openModalBtn = element(by.css('#someId'));
  this.modal = element(by.css('.mymodal'));
}

SignUpPage.prototype.clickModalBtn = function() {
  this.openModalBtn.click();
}

SignUpPage.prototype.getModalEle = function() {
  return this.modal;
}

module.exports = SignUpPage;

My test:

var SignUpPage = require('./signup.page');

describe('signup page', function() {
  var SignupPage;
  beforeEach(function() {
    browser.manage().window().setSize(1600, 1000);
    browser.get('http://localhost:9000');
    browser.waitForAngular();
    SignupPage = new SignUpPage();
  });
  //
  it('should open the modal when clicking signup in the main nav', function() {
    var EC = protractor.ExpectedConditions;
    SignupPage.clickModalBtn();

    browser.wait(EC.presenceOf(SignupPage.getModalEle()), 10000);
    expect(SignupPage.getModalEle().isPresent()).toBe(true);
  });

});

The error is:

 unknown error: Element is not clickable at point (1499, 29). Other element would receive the click: <div id="__bs_notify__" style="display: block; padding: 15px; font-family: sans-serif; position: fixed; font-size: 0.9em; z-index: 9999; right: 0px; top: 0px; border-bottom-left-radius: 5px; margin: 0px; color: white; text-align: center; background-color: rgb(27, 32, 50);">...</div>

[eolognt]

It's the click that fails. Something must be covering the open modal button. Do so that you insert the debugger task (make sure to only run one browser) browser.pause() before the click, then you can pause and inspect the page and proceed one task at the time.

[NetanelBasal]

But nothing is covering the button, it is simple button in regular navigation.

[NetanelBasal]

I found in firefox this works well, the problem only on chrome.

[eolognt]

Is the browser screen too narrow?

[NetanelBasal]

No, i set this: browser.manage().window().setSize(1600, 1000);

[sjelin]

Do you know what the <div id="__bs_notify__" style="display: block; padding: 15px; font-family: sans-serif; position: fixed; font-size: 0.9em; z-index: 9999; right: 0px; top: 0px; border-bottom-left-radius: 5px; margin: 0px; color: white; text-align: center; background-color: rgb(27, 32, 50);">...</div> element is?

[NetanelBasal]

No, from where you got this code?

[juliemr]

Please direct general support questions like this one to an appropriate support channel, see https://github.com/angular/protractor/blob/master/CONTRIBUTING.md#questions

Thank you!

[bensinther]

The __bs_notify__ div is something from BrowserSync. I guess BrowserSync has some "invisible" extra div's, maybe for the Ghost Mode. Even when setting the ghostmode flag to false the error still appears. I'll investigate further.

FYI @sjelin @NetanelBasal

[bensinther]

The problem appeared due to the BrowserSync notify covering the button, that opens my modal.

To solve this I had to set the notify-attribute to false.

My config looks like this:

browserSync.instance = browserSync.init({
    startPath: '/',
    notify: false, //LL BS 15.08 disable browser sync notification. The notify covers some UI elements and protractor tests may fail
    server: server,
    browser: browser
  });