Puppeteer：使用page.querySelectorAll（）不是一个函数

Posted 2021-04-04

我正在制作一个Puppeteer脚本，它会截取页面上所有元素的屏幕截图。它有效，但我不明白为什么以下不起作用：

const elements = await page.querySelectorAll('*');

（node：31953）TypeError：page.querySelectorAll不是函数

只有这个有效：

const elements = await page.$$('*');

我试图避免使用jQuery语法。如何使querySelectorAll（'*'）工作？这是完整的脚本：

const puppeteer = require('puppeteer');

( async() => {
const browser = await puppeteer.launch( {
        headless: true } );
const page = await browser.newPage();
await page.goto( 'https://www.google.com' );

// Get a list of all elements. Why can't I use page.querySelectorAll('*')?
const elements = await page.$$('*');

for (let i = 0; i < elements.length; i++) {
  try {
    // get screenshot of a particular element
    await elements[i].screenshot({path: `${i}.png`})
  } catch(e) {
    // if element is 'not visible', spit out error and continue
    console.log(`couldnt take screenshot of element with index: ${i}. Because: `,  e)
  }
}
await browser.close();
} )();

答案

如果你检查page.$$中的documentation，你会发现实际上，木偶操纵者在querySelectorAll()上运行document。 但如果你愿意的话

避免使用jQuery语法。如何使querySelectorAll（'*'）工作

解决方案是访问页面文档并在那里执行querySelectorAll()

const allElems = await page.evaluate(() => {
   // Note 1: here you can use querySelectorAll()
   // Note 2: eval can't return non-serializable data, so, you need to JSON.stringify() it to receive what you need. 
   return JSON.stringify(document.querySelectorAll())
})

关于evaluate的更多信息

总结一下，这是O.K.使用$$选择器，因为它不是jQuery样式，而是DOM Selector。