使用 Puppeteer 将 CSS 注入站点

Question

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

Answer 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/navigation 上应用，可以使用 page.evaluateOnNewDocument with 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);
});

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

使用 Puppeteer 将 CSS 注入站点

Injecting CSS into site with Puppeteer

javascript

automated-tests

node.js

google-chrome-devtools

puppeteer

添加样式标签:

evaluateOnNewDocument:

page.evaluate()

样式表：

原始CSS内容：