使用Puppeteer将CSS注入网站

Question

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

Answer 1

addStyleTag：

您可以使用page.addStyleTag添加一些风格，要么添加link或style根据您的选择可以是一个标签url，path或一些CSS content。

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

EvaluationOnNewDocument：

如果要在每个页面/导航上应用，可以将page.evaluateOnNewDocument与该代码段一起使用。

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