javascript - 使用 Puppeteer 将 CSS 注入(inject)站点

Question

我正在使用 Puppeteer 运行自动化测试的网站会在操作成功或失败时显示信息弹出窗口。不幸的是，这些弹出窗口有时会掩盖我的脚本必须单击的按钮。如果我可以在站点中注入(inject)一些 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}'})

评估新文档:

如果你想在每个页面/导航上应用，你可以使用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);
});