在 Puppeteer 中截取具有特定名称的不同元素的屏幕截图

Question

我正在尝试对可能包含多个部分的登录页面中的每个部分进行截图。我能够在我注释掉的“Round1”中有效地做到这一点。

我的目标是学习如何编写更精简/更简洁的代码，所以我又做了一次尝试，“Round2”。

在本节中，它会截取屏幕截图。但是，它使用文件名JSHandle@node.png 截取第 3 节的屏幕截图。当然，我做错了。

Round1（完美运行）

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.somelandingpage.com');

// const elOne = await page.$('.section-one');
// await elOne.screenshot({path: './public/SectionOne.png'}) 
// takes a screenshot SectionOne.png

// const elTwo = await page.$('.section-two')
// await elTwo.screenshot({path: './public/SectionTwo.png'})
// takes a screenshot SectionTwo.png

// const elThree = await page.$('.section-three')
// await elThree.screenshot({path: './public/SectionThree.png'})
// takes a screenshot SectionThree.png

第二轮

我创建了一个包含所有变量的数组并尝试遍历它们。

const elOne = await page.$('.section-one');
const elTwo = await page.$('.section-two')
const elThree = await page.$('.section-three')
    
    let lpElements = [elOne, elTwo, elThree];
        for(var i=0; i<lpElements.length; i++){

            await lpElements[i].screenshot({path: './public/'+lpElements[i] + '.png'})       
    }
await browser.close();
})();

这仅截取第三部分的屏幕截图，但文件名错误 (JSHandle@node.png)。控制台上没有错误消息。 如何通过修改 Round2 代码重现 Round1？

Answer 1

您的数组仅包含正在调用 .toString() 的 Puppeteer 元素句柄对象。

一个干净的方法是使用一个对象数组，每个对象都有一个选择器及其名称。然后，当您运行循环时，您可以访问名称和选择器。

const puppeteer = require('puppeteer');

const content = `
  <div class="section-one">foo</div>
  <div class="section-two">bar</div>
  <div class="section-three">baz</div>
`;
const elementsToScreenshot = [
  {selector: '.section-one', name: 'SectionOne'},
  {selector: '.section-two', name: 'SectionTwo'},
  {selector: '.section-three', name: 'SectionThree'},
];
const getPath = name => `./public/${name}.png`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(content);

  for (const {selector, name} of elementsToScreenshot) {
    const el = await page.$(selector);
    await el.screenshot({path: getPath(name)});
  }
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;