【问题标题】：Injecting CSS into site with Puppeteer使用 Puppeteer 将 CSS 注入站点
【发布时间】：2019-04-09 14:16:32
【问题描述】：

如果操作成功或失败，我正在使用 Puppeteer 运行自动化测试的网站会显示信息弹出窗口。不幸的是，这些弹出窗口有时会掩盖我的脚本必须点击的按钮。如果我可以在网站中注入一些 CSS 来隐藏这些弹出窗口，那就太好了。有没有内置的方法可以做到这一点？

【问题讨论】：

标签： javascript node.js automated-tests google-chrome-devtools puppeteer

【解决方案1】：

添加样式标签：

您可以使用page.addStyleTag 添加一些样式，这些样式将根据您的选项添加link 或style 标签，可以是url、path 或一些css content。

// url
await page.addStyleTag({url: 'http://example.com/style.css'})

// path, can be relative or absolute path
await page.addStyleTag({path: 'style.css'})

// content
await page.addStyleTag({content: '.body{background: red}'})

evaluateOnNewDocument：

如果你想在每个页面/导航上应用，你可以使用page.evaluateOnNewDocument和this snippet。

await page.evaluateOnNewDocument(()=>{
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.body{background: red}'; // the css content goes here
  document.getElementsByTagName('head')[0].appendChild(style);
});

【讨论】：

太棒了！这种风格会在导航中持续存在吗？
不，它应该只将标签添加到当前页面。如果我们想在每个导航中注入一些东西，我们可以有evaluateOnNewDocument。
为此添加示例。
太棒了！非常感谢！
对于页面加载缓慢的人：document.addEventListener('DOMContentLoaded', () => { document.getElementsByTagName('head')[0].appendChild(style); }, false) ;

【解决方案2】：

page.evaluate()

样式表：

您可以使用page.evaluate() 使用以下方法将样式表注入当前页面：

await page.evaluate(async () => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://example.com/style.css';
  const promise = new Promise((resolve, reject) => {
    link.onload = resolve;
    link.onerror = reject;
  });
  document.head.appendChild(link);
  await promise;
});

原始 CSS 内容：

或者，您也可以使用page.evaluate() 将原始 CSS 注入当前页面：

await page.evaluate(async () => {
  const style = document.createElement('style');
  style.type = 'text/css';
  const content = `
    #example {
      color: #000;
    }
  `;
  style.appendChild(document.createTextNode(content));
  const promise = new Promise((resolve, reject) => {
    style.onload = resolve;
    style.onerror = reject;
  });
  document.head.appendChild(style);
  await promise;
});

【讨论】：

【解决方案3】：

你可以使用

// add css
const contents = '<table class="class4" style="width: 100%;">
<tbody>
<tr>
    <td style="width: 33.3333%;" class="">
        <br></td>
    <td style="width: 33.3333%;">
        <br></td>
    <td style="width: 33.3333%;">
        <br></td>
</tr>
</tbody>
</table>'

// add css
const cssStyle = `<style>
        .class4 thead tr th,.class4 tbody tr td {
          border-style: solid;
          border-color: coral;
          border-width: 1px;
        }
      </style>
      `;

// add css
const addCssContent = cssStyle + contents;

await page.goto(`data:text/html;base64;charset=UTF-8,${Buffer.from(addCssContent).toString(
            "base64"
          )}`,
          {
            waitUntil: "load",
            timeout: 300000,
            waitFor: 30000,
          }
        );

【讨论】：