Javascript 使用Puppeter将CSS注入站点

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

addStyleTag: 您可以使用添加一些样式，根据您的选项添加

链接

或

样式

标记，这些选项可以是

url

、

路径

或一些css

内容

// 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}'})

评估相关文档： 如果要在每个页面/导航上应用，可以使用

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内容： 或者，您也可以使用将原始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;
});

你可以用

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

//添加css
常数内容






'
//添加css
常量cssStyle=`
.class4 thead tr th、.class4 tbody tr td{
边框样式：实心；
边框颜色：珊瑚；
边框宽度：1px；
}
`;
//添加css
const addCssContent=cssStyle+内容；
等待page.goto（`data:text/html；base64；charset=UTF-8，${Buffer.from（addCssContent）.toString(
“base64”
)}`,
{
等待：“加载”，
超时：30万，
等待：30000，
}
);

太棒了！这种样式会通过导航保持下去吗？不会，它应该只将标签添加到当前页面中。如果我们想在每个导航中注入一些东西，我们可以使用

evaluateOnNewDocument

。添加了这样的示例。非常好！非常感谢！对于页面加载速度较慢的用户：document.addEventListener（'DOMContentLoaded'，（）=>{document.getElementsByTagName（'head'）[0]。appendChild（style）；}，false）；

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