如何将 "page" 元素传递给带有 puppeteer 的函数？

Question

我正在尝试从一个函数中检查页面上的元素是否可用，如果元素在页面上，很好，继续代码，如果没有，记录错误。

使用 try puppeteer page，这是我尝试过的：

const browser = await puppeteer.launch();
const page = await browser.newPage();

const check = element => {
  try {
    await page.waitFor(element, {timeout: 1000});
  } catch(e) {
    console.log("error : ", e)
    await browser.close();
  }
}

await page.goto('https://www.example.com/');
check("#something");

console.log("done")
await browser.close();

我得到 Error running your code. SyntaxError: Unexpected identifier。我调试了一下，似乎 check 函数中的 page 是意外的标识符。所以我试着像这样强制传递它：

const browser = await puppeteer.launch();
const page = await browser.newPage();

const check = (element, page) => {
  try {
    await page.waitFor(element, {timeout: 1000});
  } catch(e) {
    console.log("error : ", e)
    await browser.close();
  }
}

await page.goto('https://www.example.com/');
check("#something", page);

console.log("done")
await browser.close();

但我得到了同样的 Error running your code. SyntaxError: Unexpected identifier 错误...

我做错了什么？

Answer 1

您可以使用此变体来检查元素是否在页面中。

if (await page.$(selector) !== null) console.log('found');
else console.log('not found');

现在回到你的代码，它抛出错误是因为这个函数不是 async,

    const check = async element => { // <-- make it async
      try {
        await page.waitFor(element, {timeout: 1000});
      } catch(e) {
        console.log("error : ", e)
        await browser.close();
      }
    }

任何时候调用 await，它都必须在 async 函数内。你不能到处打电话等待。所以你的检查函数应该这样调用，

await check("#something", page);

所以我们可以这样重写代码片段，您可以继续尝试这个。

const browser = await puppeteer.launch();
const page = await browser.newPage();
const check = async(element, page) => (await page.$(element) !== null); // Make it async, return true if the element is visible
await page.goto('https://www.example.com/');

// now lets check for the h1 element on example.com
const foundH1 = await check("h1", page);
console.log(`Element Found? : ${foundH1}`);

// now lets check for the h2 element on example.com
const foundH2 = await check("h2", page);
console.log(`Element Found? : ${foundH2}`);

await browser.close();

异步函数也将 return 承诺，因此您必须抓住该承诺或使用另一个等待。在此处阅读有关异步等待的更多信息：

如何将 "page" 元素传递给带有 puppeteer 的函数？

How to pass the "page" element to a function with puppeteer?

javascript

google-chrome

puppeteer