木偶：创建完整元素的屏幕截图

Question

我正在尝试创建一个非常大且不适合任何屏幕的HTML元素的屏幕截图。 HTML元素是一个列表，可以使用选择器进行选择：nav > ul > div:nth-child(1)

这里是一个例子：

问题是：Puppeteer截取了巨大的屏幕截图，但只有可见的子元素。其他元素显示为灰色。这是木偶戏的截图： https://i.stack.imgur.com/pV197.png

以下截图的代码：

    public static async createPageElementScreenshotWithname(selector: string, fileName: string) {
    const element = await page.$(selector);
    if (!element) {
      return;
    }

    const rootDir = path.normalize(path.join(__dirname, '../'));
    const screenshotsDir = path.join(rootDir, 'test-screenshots');

    const screenshotPath = path.format({
      dir: screenshotsDir,
      name: fileName,
      ext: '.png',
    });

    fs.mkdirSync(screenshotsDir, { recursive: true });
    if (element) {
      Generic.logToConsole(`Creating screenshot into path ${screenshotPath}`);
      try {
        await element.screenshot({ path: screenshotPath });
      } catch (e) {
        Generic.logToConsole(`Could not take a screenshot with name ${fileName} cause: ${e}`);
      }
    }
  }

我尝试将选项fullPage = true用于屏幕截图方法，但id并没有帮助。

是否可以为不可见子元素的元素创建屏幕截图？