javascript - Puppeteer:使用 page.querySelectorAll() 不是函数

Question

我正在开发一个 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();
} )();

Answer 1

如果您检查documentation中的page.$$ ，你会发现实际上，puppeteer 在 document 上运行 querySelectorAll()。
但如果你愿意

avoid jQuery syntax. How can I make querySelectorAll('*') work

解决方案是访问页面的文档并在那里执行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

总结一下，还可以。使用 $$ 选择器，因为它不是 jQuery 风格，而是 DOM Selector一个。