javascript 用Puppeteer将CSS注入网站

piv4azn7  于 2023-02-21  发布在  Java
关注(0)|答案(4)|浏览(140)

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

bxjv4tth

bxjv4tth1#

添加样式标记:

您可以使用page.addStyleTag添加一些样式,根据您的选项添加linkstyle标签,可以是urlpath或一些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}'})

在新文档上评估:

如果您想在每个页面/导航上应用,您可以将page.evaluateOnNewDocumentthis 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);
});
wqnecbli

wqnecbli2#

页.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;
});
jv2fixgn

jv2fixgn3#

您可以使用

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

6psbrbz94#

await page.$eval('.popup', el => el.style.display = "none")

相关问题