Puppeteer isn't clicking a button despite it being on the page

Bug expectation

I expected the 'Join Now' button to be clicked on the Google Meet page after the 'Dismiss' button has been clicked.

Any help would be greatly appreciated.

Here is the dom node I am trying to click:

<button
  class="VfPpkd-LgbsSe VfPpkd-LgbsSe-OWXEXe-k8QpJ VfPpkd-LgbsSe-OWXEXe-dgl2Hf nCP5yc AjY5Oe DuMIQc LQeN7 jEvJdc QJgqC"
  jscontroller="soHxf"
  jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc; touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;mlnRJb:fLiPzd;"
  data-idom-class="nCP5yc AjY5Oe DuMIQc LQeN7 jEvJdc QJgqC"
  jsname="Qx7uuf"
>
  <div class="VfPpkd-Jh9lGc"></div>
  <div class="VfPpkd-J1Ukfc-LhBDec"></div>
  <div class="VfPpkd-RLmnJb"></div>
  <span jsname="V67aGc" class="VfPpkd-vQzf8d">Join now</span>
</button>

The puppeteer code is in the example section.

I have also tried grabbing the node by text, using text/Join Now however I receive the following error:

Error: Query set to use "text", but no query handler of that name was found
    at Object.getQueryHandlerAndSelector

Bug behavior

• Flaky
• PDF

Minimal, reproducible example

const joinMeeting = async (page) => {
    console.log(logYellow, '📺 Joining meeting...');
    await page.goto('https://meet.google.com/');
    await page.waitForSelector('.mobgod', { visible: true });
    await page.click('.mobgod');
    await page.waitForSelector('.VfPpkd-vQzf8d');
    await page.click('.VfPpkd-vQzf8d'); // Click dismiss buttong
    await page.waitForSelector('.VfPpkd-LgbsSe');
    await page.click('.VfPpkd-LgbsSe'); // Click join button
    console.log(logGreen, '✅ Joined meeting!');
}

Error string

No error. Just hangs at the section where I need it to click the button.

Puppeteer configuration

No response

Puppeteer version

10.4.0

Node version

18.16.0

Package manager

pnpm

Package manager version

8.6.1

Operating system

macOS

I think you should try to target your elements more generically, it looks like google changes these classnames depending on the page, so targeting .VfPpkd-vQzf8d is never gonna be reliable.

Here is an example of something that worked for me that uses a bit more generic selection method and evaluate to allow the JS handling on the page to run properly:

const joinMeeting = async (page) => {
    console.log( '📺 Joining meeting...');
    await page.goto('https://meet.google.com/');
    
    // Choosing something a bit more generic here that would be consistent for at least a bit.
    const eventActionValue = 'start a meeting';
    const elementSelector = `[event-action="${eventActionValue}"]`;
    
    // Wait for the element to appear.
    const button = await page.waitForSelector(elementSelector);

    // Instead of trying to click direclty, we try to run the click handler in the page context. This should allow the
    // JS on the page to do it's thing and handle the event properly.
    await button.evaluate(b => b.click());
    
    // You can continue in a similar manner. Waiting for next page load, finding your element with something more generic etc.
}

Hope that helps

All I needed to do was select all the buttons on the page, and then select the button using it's index.