使用Puppeteer捕获选择组输入下拉菜单的屏幕快照

Question

如何使用 Puppeteer 捕获选择组输入下拉列表的屏幕截图？我已经确认可以打开下拉菜单（包含多个项目），但是当我尝试捕获屏幕截图时，下拉菜单没有被捕获

Answer 1

让我们用一个例子来解释一个问题：

代码和框：https://codesandbox.io/s/dropdown-example-kiowr

URL：https://kiowr.csb.app

const puppeteer = require("puppeteer"); // "puppeteer": "2.0.0"

(async () => {
  const browser = await puppeteer.launch({
    args: ["--no-sandbox", "--disable-setuid-sandbox"]
  });
  const page = await browser.newPage();
  await page.goto("https://kiowr.csb.app");
  await page.click('[data-test="ice-cream"]');
  await page.screenshot({
    path: "ice-cream.png",
    omitBackground: true
  });
  await browser.close();
})();

扩展的选择由操作系统呈现，并且它们是不同的-（macOS与Windows）：

由于它们不是由浏览器呈现的，因此无法捕获在屏幕截图中。