Not valid Selector/Error: No node found for selector

Question

I am trying use my code to click on a button using puppeteer but for some reason the button is always unable to be found (Not valid Selector/Error: No node found for selector) or the waitFor expires, this is my code:

const puppeteer = require('puppeteer');

const product_url = "https://www.amazon.co.uk/Usoun-Multi-Angle-Heat-Vent-Adjustable-Compatible/dp/B086HNM8F7/ref=sr_1_7?crid=16VVWBHJOOAYE&keywords=laptop+stand+adjustable&qid=1645642193&sprefix=laptop+stand+adjustable%2Caps%2C75&sr=8-7"

async function givePage(){
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
return page;
}
async function buyNow(page){
await page.goto(product_url);
await page.waitFor(20000);
await page.click("button[class='a-button a-button-oneclick a-button-icon onml-buy-now- 
button buybox-button-enhancement-size']", elem => elem.click());
}
async function checkout(){
var page = await givePage();
await buyNow(page);
}
checkout();

Answer 1

I experienced few problems when running this code:

• The Cookie consent needed to be accepted (big popup when page is loaded)
• The selector for the button was correct but for making it work you need to click on a parent element of it.

Luckily amazon uses lots of id's for their elements and I suggest you to always use the id whenever the id stays the same between page loads (it normally does!).

Here is the fixed code

const product_url = "https://www.amazon.co.uk/Usoun-Multi-Angle-Heat-Vent-Adjustable-Compatible/dp/B086HNM8F7/ref=sr_1_7?crid=16VVWBHJOOAYE&keywords=laptop+stand+adjustable&qid=1645642193&sprefix=laptop+stand+adjustable%2Caps%2C75&sr=8-7"

async function givePage() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    return page;
}

// helper function which checks for a possible cookie popup (in puppeteer this will always occur except you work with `data_dir` property.
async function acceptCookies(page) {
    try {
        console.log('try accepting cookie consent.')
        // accept cookies. Button is clickable via id!
        const btn = await page.waitForSelector('#sp-cc-accept')
        await btn.click()

        console.log('Cookie consent accepted!')
    } catch(err) {
        console.error('Could not accept cookies..')
    }
}

async function buyNow(page) {

    // using networkidle0 for waiting for the page to be loaded correctly.
    // No other waiting needed then!
    await page.goto(product_url, { waitUntil: 'networkidle0'})

    // make sure to accept cookies on page load
    await acceptCookies(page)

    // the very parent element of the ID button makes the click finally work.
    // clicking on the input itself did not work for me
    const selector = '#buyNow_feature_div'

    // use waitForSelector in case something gets rendered. This 
    // returns the element immediatly if found. 
    const el = await page.waitForSelector(selector)

    // element handles can directly be pressed!
    await el.click()

    // wait for the navigation to occur!.
    await page.waitForNavigation()

    console.log('naviagtion done..')
    // show an alert after the buy button was clicked..
    await page.evaluate(() => alert('Buy button was pressed!'))
   
    // ... other code
    
    // await browser.close()

}

async function checkout() {
    var page = await givePage();
    await buyNow(page);
}


checkout();