Click on a button in a Modal Window - Protractor

Question

I'm writing protractor tests for an existing app. I have a button called 'Decline' in a modal window, and I'm trying to click it using:

element(by.buttonText('Decline')).click();

But I receive the below error:

UnknownError: unknown error: Element is not clickable at point (,). Other element would receive the click:

May be because I have another button called 'Decline' outside the modal window?

How do I click on the modal window's Decline button ?

Found that this is the js code that displays this Decline button.

.....
var content = {
          title: 'Decline',
          htmlBody: '<p>...</p> ',
          okButton: 'Decline',
          onOk: function() {
.....

Answer 1

try the below code,

var DeclineBtn = element(by.buttonText('Decline'));
browser.executeScript("arguments[0].click()",DeclineBtn.getWebElement())

Answer 2

My Colleague recommended this and it worked:

Clicking on First Decline button opens up a modal,

Sleep for some time,

Now click on the second Decline button.

element(by.buttonText('Decline')).click();
browser.sleep(2000);
element(by.cssContainingText('.btn', 'Decline')).click();

Thanks for all your help :)

Answer 3

Write the code which needs to display under modal window, inside form tag. And serialize that form with the existing form.

Answer 4

As there are two buttons with button text Decline, How do we identity the one in modal?

One way to approach that would be to improve your locator to work in the scope of the modal content. But, since you have not provided an HTML representation of the modal I cannot provide you with a specific answer. Here are the samples that you can improve to fit your use case:

element(by.css(".modalContent button[ng-click*=ok]")).click();
element(by.css(".modalContent")).element(by.buttonText("Decline")).click();

Another approach could be to find all buttons with a specific text and filter the visible one:

element.all(by.buttonText("Decline")).filter(function (button) {
    return button.isDisplayed().then(function (isDisplayed) {
        return isDisplayed;
    });
}).first().click();

Answer 5

Just search the button by its text and use the function click. So for you it should look like that:

element(by.buttonText('Cancel')).click();