Puppeteer won't click on Facebook cookie notice, no matter what

Question

I am trying to make a script that will load up facebook, type in an email and password and automatically log in. However, when opening the url "https://facebook.com/login", after around 0.5s, a cookie notice appears. I am trying to make Puppeteer click on the 'Accept' button but it doesn't want to do it for some reason?

So because of this, the program never advances because it cannot click the button. Could somebody look at my code and let me know where I am going wrong?

index.js (relevant portion):

let browser = await puppeteer.launch({
        headless: false
    });
    let page = await browser.newPage();
    if (Object.keys(cookies).length) {
        await page.setCookie(...cookies);
        await page.goto('https://www.facebook.com/');
    } else {



        await page.goto('https://www.facebook.com/login', {
            waitUntil: 'networkidle0'
        });

        await page.waitForNavigation('load')

        // await page.waitForSelector('#u_0_i_6I', {
        //     visible: true
            // })

            // I TRIED THE ABOVE COMMENTED OUT CODE, DIDN'T WORK

        await delay(3000)
        // SO I TRIED MANUALLY WAITING 3 SECONDS FOR THE NOTICE TO LOAD IN BEFORE I CLICK IT

        
        await page.click('#u_0_i_6I') //COOKIE NOTICE ACCEPT BUTTON ID

Answer 1

this is part of my puppeteer code for solution facebook cookie notice and login:

  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ['--start-maximized']
  });

  const FB_COOKIE = 'button[data-cookiebanner]:first-child';
  const FB_USERNAME = '#email';
  const FB_PASSWORD = '#pass';
  const FB_LOGIN = 'button[name="login"]';

  const fb = await browser.newPage()

  await fb.goto('https://facebook.com');
  await fb.waitForTimeout(1000);
  await fb.waitForSelector(FB_COOKIE, { delay: 500 });
  await fb.click(FB_COOKIE);
  await fb.waitForSelector(FB_USERNAME, { delay: 500 });
  await fb.waitForTimeout(500);
  await fb.focus(FB_USERNAME);
  await fb.type(FB_USERNAME, "" + users[0].fb_login, { delay: 15 });
  await fb.waitForSelector(FB_PASSWORD, { delay: 500 });
  await fb.waitForTimeout(500);
  await fb.focus(FB_PASSWORD);
  await fb.type(FB_PASSWORD, "" + users[0].fb_pass, { delay: 15 });
  await fb.waitForTimeout(500);
  await fb.click(FB_LOGIN);
  await fb.waitForTimeout(5000);   

Answer 2

I'm not an expert. But, here is what I found useful for me.

Sometimes page.click() doesn't work for me. Maybe this is the case for you. If that is the problem, You can use

page.evalute(//(a function to execute in chrome dev tool environment))

or, use

page.$eval(//(...a selector), //(...a callback function using that selector as argument))

You can read more about the function on the internet by searching the function name.

Then inside the browser context function, you can execute any chrome dev tool function you want. If you use page.evaluate(), you can

document.querySelector('<classname or anyother selector>').click()

or better

$('<selector>').click()

I hope this is helpful for you.