Protractor: How to click on button in modal-dialog (angular element)

Question

I'm writing automation test for angular application with protractor framework.

Test scenario:

1. Click at button: Create PDF Report

   • Modal-dialog window appeared

2. Click at button: Run Report Now within modal-dialog

I have an issue with clicking at button within modal-dialog element.

I'm getting the following Protracor errors

1. Failed: stale element reference: element is not attached to the page document,

2. Failed: No element found using locator

Test

describe("Managing PDF Project Report", function () {
    it("contain create PDF project for test purpose ", async function () {
        await logIn();
        await element(by.css(".btn-group.pull-right > button ")).click();
        await element(by.css(".dropdown-menu.no-print")).element(by.css("li:nth-child(3) > a")).click();
        await browser.wait(element(by.css(".modal-footer > div > button:nth-child(2)")).click(), 5000);
    });

I was also trying to find element by ButtonText, ng-click attribute, but it also did not work.

HTML

Question

I'm a bit confused because this element does not behave like iframe or like browsers pop up's. Any ideas how can I interact with element inside this modal?

Answer 1

From which element you are getting those errors? If it's the Run Report Now button, you can try with css:

element(by.css('[ng-click="createReport()"]');

Additionally, I'd suggest adding a couple of explicit waits to make sure Protractor waits properly:

const EC = protractor.ExpectedConditions;

await browser.wait(EC.visibilityOf($$('.modal-dialog .modal-content .modal-footer')), 5000);
await browser.wait(EC.elementToBeClickable(element(by.css('[ng-click="createReport()"]')), 5000);
await element(by.css('[ng-click="createReport()"]').click();