Playwright: Working with Bootstrap modal dialogs/popups

Question

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:

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 :)

Answer 1

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 cannot 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 like a charm. It seems that while working 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.