代码之家 › 专栏 › 技术社区 › Arel

使用Puppeter拍摄运行WebGL的页面截图

cesium puppeteer webgl

Arel · 技术社区 · 7 年前

我正在尝试截图一个运行基于webGL的铯的页面。如果我只是截图,页面将被加载,但webGL不会完成加载。

如果我使用内置 networkidle0 或 networkidle2 ,屏幕截图从未被拍摄。这是我的密码。

这是我正在尝试拍摄的网站: https://www.arelplane.com/@arelenglish

const puppeteer = require('puppeteer');

module.exports = {
  takeScreenshot: (userId) => {
    (async () => {
      const browser = await puppeteer.launch({
        headless: false,
        args: [
          '--headless',
          '--hide-scrollbars'
        ]
      });
      const page = await browser.newPage();
      await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0"});
      await page.screenshot({path: 'example.png'});

      await browser.close();
    })();
    return "Successful API call!";
  }
}

1 回复 | 直到 7 年前

Md. Abu Taher 7 年前

你的密码是 headless: false ,以及一个名为 --headless 也就是说 headless: true .木偶演员会感到困惑。

撇开玩笑不谈,以下是我在“网络”选项卡上看到的内容。

“网络”选项卡表示它至少加载66个请求,其中至少包含或超过 1.5s 对于每个资源(idk为什么在我的默认chrome上加载较慢)。

来自a的相同 page load test (click to see the report) ,基本上说它在40多秒钟内加载170多个请求。

默认超时为30秒,但加载数据的时间超过90秒。

下面是处理导航超时的参数。

await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0}); // timeout: 0 will disable navigation timeout

禁用超时或将其增加到120秒或该范围内的其他值。这是我的密码,

puppeteer.launch({headless: false}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0});
  await page.screenshot({path: "test.png"});
  await browser.close();
});

结果如下:,

推荐文章

ssp singh · 使用Puppeter为URL列表截图。js公司

7 年前

Arel · 使用Puppeter拍摄运行WebGL的页面截图

7 年前

Atav32 · 如何设置Jest测试运行Puppeter的最大超时?

7 年前

Jon Wilson · 多个选择器上的木偶等待选择器

7 年前

Steren · 禁用无头镀铬中的闪烁光标(使用Puppeter)

7 年前

Ryoji Ishii · 如何模糊木偶戏中的输入元素?

7 年前

Nicholas DiPiazza · 有没有办法让Puppeter的waitUntil“networkidle”只考虑XHR(ajax)请求?

7 年前

Nicholas DiPiazza · 你如何包装一个木偶演员应用程序?

7 年前

Vega · 如何从DOM获取所有链接?

7 年前

AnnaCICI · 按子项获取项目ID(vanilla JS)

7 年前