I am attempting to Protractor test whether a bootstrap modal window to confirm a records deletion is currently visible.

The record to delete appears in an angular ng-repeat, so I have to activate the delete button from there.

If I test for isPresent the test always passes true because it is looking in the DOM for the modal window, and it will always be there. However testing for isDisplayed always returns false when I expect true.

Here's some code...

// Use the .all repeater to search the array of presented records
element.all(by.repeater('entries in presentData')).then(function(presentData) {
    // get the first record and open the options menu
    presentData[0].element(by.css('.dropdown-toggle')).click();
    // In that first record click the delete button
    presentData[0].element(by.css('.delete-link')).click();
    browser.waitForAngular();
    // Remove the 'fade' class from the Bootstrap modal, I heard animations can cause some issues for testing
    browser.executeScript("$('.modal').removeClass('fade');");
    // Expect that the .modal-dialog is true
    expect(element(by.className('modal-dialog')).isDisplayed()).toBe(true);
});

I have tried all kinds of binations of various other stackoverflow and github questions, but nothing is working for me so far.

Any light you might be able to shed would be much appreciated!

I am attempting to Protractor test whether a bootstrap modal window to confirm a records deletion is currently visible.

The record to delete appears in an angular ng-repeat, so I have to activate the delete button from there.

If I test for isPresent the test always passes true because it is looking in the DOM for the modal window, and it will always be there. However testing for isDisplayed always returns false when I expect true.

Here's some code...

// Use the .all repeater to search the array of presented records
element.all(by.repeater('entries in presentData')).then(function(presentData) {
    // get the first record and open the options menu
    presentData[0].element(by.css('.dropdown-toggle')).click();
    // In that first record click the delete button
    presentData[0].element(by.css('.delete-link')).click();
    browser.waitForAngular();
    // Remove the 'fade' class from the Bootstrap modal, I heard animations can cause some issues for testing
    browser.executeScript("$('.modal').removeClass('fade');");
    // Expect that the .modal-dialog is true
    expect(element(by.className('modal-dialog')).isDisplayed()).toBe(true);
});

I have tried all kinds of binations of various other stackoverflow and github questions, but nothing is working for me so far.

Any light you might be able to shed would be much appreciated!

• javascript
• angularjs
• twitter-bootstrap
• protractor

• 1 If you add a browser.sleep(5000) before the last expect does it work? If still does not then you problem might be in browser.executeScript("$('.modal').removeClass('fade');"); If it works with the sleep then is a timing issue. – Leo Gallucci Commented Dec 22, 2015 at 15:56
• Thank you @LeoGallucci it does indeed pass as success. I have read that using sleep is bad practice. Is there an alternative I could use? Thanks for your ment. – Dan Hodson Commented Dec 23, 2015 at 11:25

1 Answer 1

Turning the ment into an answer.

If adding browser.sleep(5000) before the last expect works then is a timing issue, you may need to incorporate active wait as explained here which is including the waitReady.js script, adding a require('./waitReady.js'); in your onPrepare block then replace the last expect with:

var elm = element(by.className('modal-dialog');
expect(elm.waitReady()).toBeTruthy();

That expect will wait for the element to be present and then will wait for it to be visible.

Using the waitReady.js script will save you from using sleep in those cases.

You may also try another browser.waitForAngular(); right after the browser.executeScript and hope Protractor knows how to wait for that JS injection.