How to Handle and Close "Got it" Popup in Puppeteer During Google Meet Automation?

Question

I'm using Puppeteer to automate some tasks on Google Meet. However, I'm encountering a "Got it" button that appears as a popup, and it seems to be interrupting the script's flow. I need to click this "Got it" button to proceed with the automation.

Screenshot of the popup:

Below is my working code:

const puppeteer = require("puppeteer");
const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");

const waitForTimeout = (milliseconds) => {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
};

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });

  const page = await browser.newPage();

  // Listen for new pages and handle popups
  browser.on('targetcreated', async (target) => {
    if (target.type() === 'page') {
      const newPage = await target.page();
      const url = newPage.url();

      if (url.includes('https://meet.google.com/')) {
        console.log('Popup detected, closing it');
        await newPage.close();
      }
    }
  });

  const { width, height } = await page.evaluate(() => {
    return {
      width: window.screen.availWidth,
      height: window.screen.availHeight,
    };
  });
  await page.setViewport({ width, height });

  page.setDefaultNavigationTimeout(60000);

  await page.goto("https://accounts.google.com/");

  await page.waitForSelector('input[type="email"]');
  await page.type('input[type="email"]', "puppeteer@gmail.com");
  await page.click("#identifierNext");

  await page.waitForSelector('input[type="password"]', { visible: true });
  await page.type('input[type="password"]', "password@abc");
  await page.click("#passwordNext");

  const context = browser.defaultBrowserContext();
  await context.overridePermissions("https://meet.google.com/", [
    "microphone",
    "camera",
    "notifications",
  ]);

  await page.waitForNavigation();

  await waitForTimeout(2500);
  await page.goto("https://meet.google.com/");
  await page.waitForSelector('input[type="text"]');
  await page.click('input[type="text"]');
  await waitForTimeout(1000);
  await page.keyboard.type(`abc-kpxu-nrq`, { delay: 200 });// meeting code.
  await waitForTimeout(800);
  await page.keyboard.press("Enter");
  await page.waitForNavigation();

  // turn off cam using Ctrl+E
  await waitForTimeout(8000);
  await page.keyboard.down("ControlLeft");
  await page.keyboard.press("KeyE");
  await page.keyboard.up("ControlLeft");
  await waitForTimeout(2000);

  // turn off mic using Ctrl+D
  await waitForTimeout(1000);
  await page.keyboard.down("ControlLeft");
  await page.keyboard.press("KeyD");
  await page.keyboard.up("ControlLeft");
  await waitForTimeout(2000);

  try {
    const joinNowXPath =
      "/html/body/div[1]/c-wiz/div/div/div[26]/div[3]/div/div[2]/div[4]/div/div/div[2]/div[1]/div[2]/div[1]/div[1]/button/span";
    await page.click("xpath/" + joinNowXPath);
  } catch (err) {
    console.log("Error while trying to click 'Join now' button: ", err);
  }

  const recorder = new PuppeteerScreenRecorder(page, { fps: 60 });
  await recorder.start(`puppeteerRecording.mp4`);

  setTimeout(async () => {
    await recorder.stop();
    await browser.close();
  }, 30000);
})();

I have tried waiting for the button and click it using ARIA selector but it did not worked:

try {
  const gotItButtonSelector = '[aria-label="Got it"]'; // ARIA selector for the "Got it" button
  await page.waitForSelector(gotItButtonSelector, { visible: true, timeout: 5000 });
  await page.click(gotItButtonSelector);
  console.log('Closed "Got it" message');
} catch (err) {
  console.log('No "Got it" message found or unable to close it:', err);
}

**What I Need:

1. A reliable way to detect and close the "Got it" popup in Puppeteer.
2. Understanding if there's a better way to handle such dynamically appearing elements.