+-
Puppeteer:使用page.querySelectorAll()不是一个函数

我正在制作一个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();
} )();
1
投票

如果你检查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。