1

So I have been facing some issue with some of my tests which require a user to Confirm or Cancel a Bootstrap modal dialogs/popups windows. It seems that each time when I try to interact with a Confirm or Cancel button by .click operation the test runner freezes on the modal and then after a few seconds the grayed out background starts scrolling up and down and after the while the test fails. From my observation Playwright is not able to perform the .click operation on Bootstrap modal window and tries to look for the element in the background. At first I thought that maybe some simple dialog handlers will do which you can see examples on https://playwright.dev/docs/dialogs/#alert-confirm-prompt-dialogs, however it soon got to me that they only refer to Browser dialogs and not Bootstrap ones. Below I am pasting HTML code of the Bootstrap window, simple method which is used for clicking operation. I even used a default copy/paste browser xpath to be sure that I am getting the correct button. For that being not pretty, please excuse me.

Bootstrap HTML code: enter image description here

Testing Method which I use, you can see commented out attempts to use the dialog handler, however it will not work because those dialogs are not browser type ones.

class ItemDetailsPage {
  constructor(page) {
    this.page = page;
  }
async clickConfirmButton() {
    /*
    await this.page.on('dialog', async dialog => {
      console.log(`Dialog message value: ${dialog.message()}`);
      console.log(`Dialog type: ${dialog.type()}`);
      await dialog.accept();
    });

    */
    // await this.page.on('dialog', dialog => dialog.accept());

    await this.page.click('button:has-text("Confirm")');
    await this.page.waitForSelector(
      'span:has-text("Please confirm you would like to mark this deal as containing Xyz")'
    );
    await this.page.waitForSelector('div[class="ant-modal-footer"]');
    await this.page.click('/html/body/div[2]/div/div[2]/div/div[2]/div[3]/div/span[2]/button');
  }
}
module.exports = { ItemDetailsPage };

Playwright error logs that I am getting during/after execution of the test

attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  checking that element receives pointer events at (140.33,365.12)
  <div tabindex="-1" role="dialog" aria-labelledby="rcD…>…</div> from <div>…</div> subtree intercepts pointer events

Thanks for your suggestions and help :)

0

After long testing, debugging and with little bit of help I was able to find the solution. As a starter I used all possible Plawright debugger which you can find in here https://playwright.dev/docs/debug/#playwright-inspector. I used Verbos API and the Inspector. Verbos told in the logs that the click operation can not be performed because it seems that the selector is still the issue, so after some time with the set up I was able to run the Inspector recorder to see what selector is seen by it during test execution. It presented me following solution 'div[role="dialog"] button:has-text("Confirm")' I used it and guess what... everything worked as a charm. It seems that while wroking with Boostrap modal in Playwright, your selector as 1st part should have a location to the Bootstrap modal that acts as a dialog and then follow up with the button by text location.

 async clickConfirmButton() {
    await this.page.click('button:has-text("Confirm")');
    await this.page.waitForSelector(
      'span:has-text("Please confirm you would like to mark this deal as containing Xyz")'
    );
    await this.page.waitForSelector('div[class="ant-modal-footer"]');
    await this.page.click('div[role="dialog"] button:has-text("Confirm")');
  }

Hope the solution will be useful for you as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.