playwrightplaywright-test

Not able close the model using Playwright

I am trying to close a modal using Playwright JS but I am running into issues. Here's the relevant HTML:

<div class="component-widget-wrapper example-api-fe-component" data-component-widget-class="announcement" data-component-widget-alias="announcement" data-component-widget-mode="render" data-component-widget-attachments="{&quot;isApiCall&quot;:true,&quot;baseUrl&quot;:&quot;https:\/\/example.com&quot;}" xpath="1">
   <div id="announcements-container">
      <div id="announcementLightbox" class="modal announcement announcement--lightbox modal-active" style="">
         <div class="modal-overlay"></div>
         <div class="modal-content announcement-content">
            <div class="modal-header announcement-title">
               ANNOUNCEMENTS
               <span class="modal-close modal-close-button" style="">
                  <svg class="close-button-svg" preserveAspectRatio="none" style="">
                     <use href="#close_button" style=""></use>
                  </svg>
               </span>
            </div>
            <div class="modal-body announcement-body" style="height: auto;">
               <div class="announcement--container scrollbot">
                  <div class="announcement-item announcement--list" data="13">
                     <strong class="text-announcement announcement-item-title"></strong>
                     <p>QA Test Announcement 12/05</p>
                  </div>
                  <div class="announcement-item announcement--list" data="12">
                     <strong class="text-announcement announcement-item-title"></strong>
                     <p>QA Test Announcement 10/24 EN</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <span class="hidden">
      <svg viewBox="0 0 22.208 22.208">
         <g id="close_button" transform="translate(-329.275 -106.819)">
            <path d="M10.6-.5a11.1,11.1,0,0,1,7.852,18.956,11.1,11.1,0,1,1-15.7-15.7A11.031,11.031,0,0,1,10.6-.5Zm0,21.208A10.1,10.1,0,1,0,.5,10.6,10.115,10.115,0,0,0,10.6,20.708Z" transform="translate(329.775 107.319)" fill="#3d3c41"></path>
            <path d="M341.709,117.923l4.055-4.212a.96.96,0,0,0-.026-1.355h0a.961.961,0,0,0-1.354.026l-4.005,4.159-4.005-4.159a.962.962,0,0,0-1.355-.026h0a.961.961,0,0,0-.025,1.355l4.055,4.212-4.055,4.212a.958.958,0,0,0,1.38,1.329l4.005-4.16,4.005,4.16a.96.96,0,0,0,1.354.025h0a.959.959,0,0,0,.026-1.354Z" fill="#3d3c41"></path>
         </g>
      </svg>
   </span>
</div>

I tried using the following code to close the modal dialog, but it didn't work:

async close() {
    if (process.env.BRAND === 'zedbet') {
      this.announcementLightboxLocator = this.page.locator('#announcementLightbox');
      await this.page.waitForSelector('#announcementLightbox');
      this.announcementLightboxHandle = await this.announcementLightboxLocator.elementHandle();
      this.shadowRootHandle = await this.announcementLightboxHandle.evaluateHandle((element) => element.shadowRoot);
      this.closeButton = await this.page.locator('.modal-close-button:nth-child(1)');
      await this.closeButton.click({ force: true });
    } else {
      await this.closeButton.click({ force: true });
    }
  };

Had tried all possible learning to local svg like [//*name()='svf'] , but still not able get work done , what I am missing here.

Can anyone help me in resolving this issue? Thanks in advance.

Solution

  • How about this xpath to click on the intercepting svg element:

    //*[local-name()='svg']//*[local-name()='use' and contains(@href, ‘close’)]

    Reference: https://www.tutorialspoint.com/how-to-use-xpath-in-selenium-webdriver-to-grab-svg-elements#