使用Puppeteer将CSS注入网站

Question

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

Answer 1

addStyleTag：

您可以使用page.addStyleTag添加一些样式，这些样式将根据您的选项添加link或style标签，这些标签可以是url，{{1} }或某些CSS path。

content

evaluateOnNewDocument：

如果要在每个页面/导航上应用，可以将page.evaluateOnNewDocument与this snippet结合使用。

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

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

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

Answer 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;
});

Answer 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,
          }
        );