我用Puppeteer运行自动测试的网站会在操作成功或失败时显示信息弹出窗口。不幸的是,这些弹出窗口有时会掩盖我的脚本必须点击的按钮。如果我能在网站中注入一些CSS来隐藏这些弹出窗口,那就太好了。有内置的方法可以做到这一点吗?
bxjv4tth1#
您可以使用page.addStyleTag添加一些样式,根据您的选项添加link或style标签,可以是url、path或一些css content。
link
style
url
path
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); });
wqnecbli2#
您可以使用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; });
或者,您也可以使用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; });
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, } );
6psbrbz94#
await page.$eval('.popup', el => el.style.display = "none")
4条答案
按热度按时间bxjv4tth1#
添加样式标记:
您可以使用page.addStyleTag添加一些样式,根据您的选项添加
link
或style
标签,可以是url
、path
或一些csscontent
。在新文档上评估:
如果您想在每个页面/导航上应用,您可以将page.evaluateOnNewDocument与this snippet一起使用。
wqnecbli2#
页.evaluate()
样式表:
您可以使用
page.evaluate()
通过以下方法将样式表插入到当前页面中:原始CSS内容:
或者,您也可以使用
page.evaluate()
将原始CSS注入当前页面:jv2fixgn3#
您可以使用
6psbrbz94#