node.js 木偶操縱者“文檔未定義”

Question

我試圖嘗試使用沒有 ID 或 class 的代碼單擊按鈕，但我的終端總是響應：

document.getElementsByTagName("Accept Cookies");
    ^

ReferenceError: document is not defined

這是我的代碼：

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();

我做錯了什么，我該如何解決？

Answer 1

NodeJS 中沒有名為document的內置變量，因為它不在瀏覽器中運行。

如果您想訪問document ，在 Puppeteer 中有一個page.evaluate() function ，您可以在其中訪問document變量（以及客戶端 JS 中的所有其他內容）：

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

請注意，您運行的所有 JavaScript 都將在瀏覽器上運行，而不是在 NodeJS 中運行，因此如果您想取回值，可以返回：

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

同樣，如果你想將變量傳遞給回調，你必須將它們提供給評估 function：

await page.evaluate((name, age) => {
  // do something with 'name' and 'age'
}, "John", 34);

Answer 2

您已經有了關於如何訪問元素的代碼示例。 而不是document.querySelector ，使用page.waitForSelector就像你在第 12 行所做的那樣。

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

應該

(await page.waitForSelector('button[type="submit"]')).click()

Answer 3

在 Nodejs 中，您無法訪問 web API，例如 window、文檔等，因此您不能在此處對 select 元素使用 document.querySelector。
您不應在服務器端處理對 DOM 元素的點擊，而應僅在客戶端處理這些點擊，然后相應地從服務器獲取數據。