Question

我正在使用puppeteer来保存和下载来自标记和图像的图像。 css由浏览器发送到快递应用程序。 Express编译模板，只需将POSTed标记插入html shell＆amp;获取本地的css（安装在docker卷上）。

当我渲染html＆amp; css直接在chrome中，所有文本和其他元素按预期显示。但是，保存的屏幕截图缺少文本。

当我省略我们的样式时，文本在本地chrome和amp;中呈现相同的方式。木偶戏保存的图像。

幕后是否有样式？还有其他可以解释差异的因素吗？

编辑：现在看来它可能与我的代码中某处未处理的竞争条件有关。在没有做出改变的情况下，我能够得到预期的图像，但有时只是有时候我还没有能够理清那些时代的不同之处。

重现的步骤

Puppeteer版本：0.12.0
平台/操作系统版本：docker / ubuntu
Node.js版本：8

index.js：

app.post('/img', function (req, res) {
  const puppeteer = require('puppeteer');
  let css = [];
  let stylesheets = [];
  // 
  // separate out local stylesheets and read contents of the files
  // 
  css = req.body.stylesheets.filter(sheet => {
    return sheet.indexOf('https') === -1 && sheet.indexOf('http') === -1;
  });
  css = css.map(sheet => {
    return fs.readFileSync(path.join(__dirname, sheet));
  });
  // 
  // separate out external stylesheets (bootstrap, etc)
  // 
  stylesheets = req.body.stylesheets.filter(sheet => {
    return sheet.indexOf('https') > -1 || sheet.indexOf('http') > -1;
  });
  //
  // compile template with html & styles
  //
  app.render('img', {
    stylesheets: stylesheets,
    content: req.body.content,
    css: css
  }, function (err, html) {
    console.log('html\n', html);
    (async() => {
      const browser = await puppeteer.launch({args: ['--no-sandbox']});
      const page = await browser.newPage();
      await page.setViewport({width: 1300, height: 1200});
      //
      // load html to chrome
      //
      try {
        const loaded = page.waitForNavigation({
          waitUntil: 'load'
        });
        await page.setContent(html);
        await loaded
      } catch(err) {
        console.log(err);
        res.status(err.status).send('There was an error loading the page.');
      }
      //
      // save image
      //
      const filename = `${req.body.title}.png`;
      const filepath = path.join(__dirname, 'img', filename);
      try {
        await page.screenshot({ path: filepath });
        console.log(`${filename} saved`);
      } catch(err) {
        console.log(err);
        res.status(err.status).send('There was a problem saving the image.');
      }
      res.status(201).send(filename);
    })();
  });
});

img.html（模板）：

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
  {{#stylesheets}}
  <link rel="stylesheet" type="text/css" href="{{{.}}}">
  {{/stylesheets}}
  {{#css}}
  <style type="text/css">
    {{{.}}}
  </style>
  {{/css}}
</head>
<body>
  {{{content}}}
</body>
</html>