"waitForSelector" times out before the element becomes visible, even though the element is on screen

Question

I'm building a checkout bot but I'm having trouble with those stupid "enter your phone number to receive a text message" pop-ups where the element I tell the bot to click appears on the screen but the bot doesn't click on it . This is my first project using JavaScript and I have no idea what I'm doing and I'm currently learning a lot as I go along, but I'm really stuck here and can't find what I'm doing wrong.

async function regectingnumber(page) {
    try {
        console.log("拒绝号码")
        //await waitForTimeout(2000)
        //await page.setDefaultNavigationTimeout(60000);
        console.log("等待中...")
        await page.waitForSelector('button[class= css-10e85z4 errp0sa0]', {timeout:60000})
         console.log("等待中...")
         await page.evaluate(() => document.getElementsByClassName('button css-10e85z4 errp0sa0')[0].click());
        console.log("号码已输入！");
        //await page.click('button[class="css-yq30jm e5ippug0"]');
        //console.log("号码已拒绝！");
    } catch (err) {
        console.error(err);
    }
}

This is just a small part of the code, I'm having an error on this part because I can't post the full code or it will be viewed as spam.

Answer 1

Your selector is wrong, please change it

await page.waitForSelector('button[class= css-10e85z4 errp0sa0]', {timeout:60000})

for

await page.waitForSelector('button.css-10e85z4.errp0sa0', {timeout:60000})

To use it for click actions, you can store it in a variable:

const myButton = await page.waitForSelector('button.css-10e85z4.errp0sa0', {timeout:60000});
await myButton.click();

See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector to use selectors in the console.