Question

我正在研究一个Puppeteer脚本，该脚本截取了页面上所有元素的屏幕截图。它可以工作，但是我不明白为什么以下命令不起作用：

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

（节点：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中选中querySelectorAll()，您会发现，伪娘实际上在document上运行querySelectorAll()。
但是，如果您想

避免使用jQuery语法。如何使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

的更多信息

总结起来，没关系。使用{{1}}选择器，因为它不是jQuery样式，而是DOM Selector。

木偶：使用page.querySelectorAll（）不是函数

1 个答案: