使用 Puppeteer 捕获选择组输入下拉菜单的屏幕截图答案

【问题标题】：Capturing screenshot of selection group input drop-down using Puppeteer使用 Puppeteer 捕获选择组输入下拉菜单的屏幕截图
【发布时间】：2020-01-10 17:55:21
【问题描述】：

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

【问题讨论】：

标签： puppeteer

【解决方案1】：

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

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

代码沙盒：https://codesandbox.io/s/dropdown-example-kiowr

网址：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）：

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

【讨论】：