puppeteer 为截图删除一个元素答案

【问题标题】：puppeteer delete an Element for a screenshotpuppeteer 为截图删除一个元素
【发布时间】：2021-01-21 09:03:33
【问题描述】：

我正在尝试截取页面的屏幕截图，但由于某些脚本（我的软件应该在任何网站上运行，因此我无法提供 HTML），cookie 页面位于前面。

问题是 puppeteer 中的删除不起作用，我需要一些帮助。

            await this.sleep(5 * 1000);
            let body = await browserPage.evaluate(() => {
                document.querySelectorAll('#didomi-popup')[0].outerHTML = "";
                return document.documentElement.outerHTML;
            });
            await browserPage.screenshot({path: "test.jpg", fullPage: true});

所以是的 didomi-popup 存在我什至在 chrome 的控制台上尝试 document.querySelectorAll('#didomi-popup')[0].outerHTML = ""; 并删除该元素。等待似乎也很好，因为 cookie 的弹出窗口位于 page.evaluate 返回的正文中。

有人有想法吗？

非常感谢

【问题讨论】：

标签： html node.js dom puppeteer

【解决方案1】：

试试这个：

await page.goto('<url_here>');

let div_selector_to_remove= ".xj7.Kwh5n";
await page.evaluate((sel) => {
    var elements = document.querySelectorAll(sel);
    for(var i=0; i< elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}, div_selector_to_remove)

【讨论】：

【解决方案2】：

通过尝试其他方法，我确定弹出窗口不断返回屏幕截图，因此我还删除了 Javascript 中的所有脚本以防止它，现在它可以工作了

这段代码删除了弹出窗口和脚本，然后它在没有脚本的情况下设置了网页，因此页面现在对于屏幕截图是静态的。

            let body = await browserPage.evaluate(() => {
                const deleteElement = function(selector) {for (let i = 0; i < selector.length; i++) {selector[i].outerHTML = "";}} 
                const elemToDelete = ["#didomi-popup", "script"];
                for (let i = 0; i < elemToDelete.length; i++) {
                    deleteElement(document.querySelectorAll(elemToDelete[i]))
                }
                return document.documentElement.outerHTML;
            });
            await browserPage.setContent(body)
            await browserPage.screenshot({path: path, fullPage: true});

我知道对其他人来说删除脚本可能是个问题，但我在 eval 前等待了 7 秒，所以我只想为网页拍照而不与它进行任何交互，所以它对我来说效果很好！

【讨论】：