2

I am attempting to try click a button using code without an id or class, but my terminal always responds with:

document.getElementsByTagName("Accept Cookies");
    ^

ReferenceError: document is not defined

This is my code:

const puppeteer = require('puppeteer');

const product_url = "https://www.nike.com/launch"

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

async function acceptCookies(page) {
    await page.goto(product_url);
    const btn = await page.waitForSelector('#cookie-settings-layout > div > div > div > 
div:nth-child(3) > div.ncss-col-md-6.ncss-col-sm-12.mb5-sm > button')
    await btn.click()
}

async function notifyMe(page) {
    await page.goto(product_url);
    document.querySelector("button[type=\"submit\"]").click("Notify Me");
}

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

checkout();

What did I do wrong and how can I fix this?

Marco
  • 7,007
  • 2
  • 19
  • 49
4DAM
  • 23
  • 3
  • `givePage` leaks memory. Don't abandon the `browser` object or you won't be able to call `.close()` on it and the process will hang. Each of your functions re-navigates to the URL, which is sort of odd. I'd recommend not using funcs like this until the script is actually working. Can you share what you're trying to accomplish? `document.getElementsByTagName("Accept Cookies");` doesn't make much sense because `"Accept Cookies"` isn't an HTML tag, e.g. `

    ` or `

     – ggorlen Mar 06 '22 at 06:01
  • @ggorlen Regarding my earlier comment, `givePage` can work if you use `page.browser().close()` to access the parent browser from each page it creates for closure. – ggorlen Aug 16 '23 at 00:11

3 Answers3

2

There's no built-in variable in NodeJS named document, since it doesn't run in the browser.

If you want to access document, in Puppeteer there's a page.evaluate() function where you can access the document variable (as well as everything else inside client-side JS):

// ...
await page.evaluate(() => {
  document.querySelector("button[type=\"submit\"]").click();
});

Please note though, that all the JavaScript you run will be run on the browser, not in NodeJS, so if you want to get the value back you can return:

const result = await page.evaluate(() => {
  var something = document.getElementById("something");
  return something.innerText; 
});
console.log(result); // will print in the console "blah blah blah"

Likewise if you want to pass variables to the callback you have to give them to the evaluate function:

await page.evaluate((name, age) => {
  // do something with 'name' and 'age'
}, "John", 34);
code
  • 5,690
  • 4
  • 17
  • 39
1

You already have an example on your code on how to access elements. Instead of document.querySelector, use page.waitForSelector like what you did on line 12.

document.querySelector('button[type="submit"]').click()

should be

(await page.waitForSelector('button[type="submit"]')).click()
Neil John Ramal
  • 3,734
  • 13
  • 20
-1

In Nodejs, you don't have access to web APIs like a window, document, etc. so you can't use document.querySelector to select elements here.
Instead of handling clicks on DOM elements on server side, you should handle those clicks on the client-side only and then fetch the data from the server accordingly.

dipansh
  • 331
  • 3
  • 15