如何在Puppeteer中批量移除指定元素且忽略找不到元素的错误？

当前代码通过多次调用page.evaluate并使用document.querySelector移除元素，但当选择器找不到对应元素时会直接报错中断执行。我们可以通过批量处理选择器+存在性检查的方式解决这个问题，同时优化代码效率。

首先，将所有需要移除的选择器整理成数组，然后在一次page.evaluate中循环处理每个选择器，仅当元素存在时执行移除操作：

const puppeteer = require("puppeteer");

async function main() {
    const URL_SCREENSHOT = 'https://www.placardefutebol.com.br/brasileirao-serie-a/12-11-2022-flamengo-x-avai.html';
  
    const browser = await puppeteer.launch({
        headless: false,
        userDataDir: './logs/Chrome/XX',
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox'
        ]
    });
    const page = await browser.newPage();
    await page.goto(URL_SCREENSHOT, {
        waitUntil: "load",
        timeout: 0,
    });

    // 整理所有需要移除的选择器数组
    const selectorsToRemove = [
        "body > div.google-auto-placed > ins",
        "body > header",
        "body > nav",
        "html > ins",
        "#google_esf",
        "body > iframe",
        "body > ins",
        "body > script:nth-child(13)",
        "body > script:nth-child(12)",
        "body > script:nth-child(11)",
        "body > script:nth-child(10)",
        "body > script:nth-child(9)",
        "body > script:nth-child(8)",
        "body > script:nth-child(7)",
        "body > link",
        "body > script",
        "body > p:nth-child(4)",
        "body > p",
        "body > div > div.jumbotron",
        "body > div > div.search-box"
    ];

    // 批量处理移除，不存在的元素自动跳过
    await page.evaluate((selectors) => {
        selectors.forEach(selector => {
            const element = document.querySelector(selector);
            if (element) { // 检查元素是否存在
                element.remove();
            }
        });
    }, selectorsToRemove);

    // 替换setTimeout为page.waitForTimeout，避免异步Promise问题
    await page.waitForTimeout(1000);

    await page.screenshot({ path: `./lib/media/img/adip.png`, fullPage: true });
    await browser.close();
}

main();

核心优化点： #

• 批量处理：将所有选择器放入数组，通过一次page.evaluate完成所有移除操作，减少浏览器与Node.js之间的通信开销，提升效率。
• 存在性检查：在移除前通过if (element)判断元素是否存在，避免document.querySelector返回null时调用remove()导致的报错。
• 替换setTimeout：使用Puppeteer内置的page.waitForTimeout替代原生setTimeout，更好地适配异步流程，避免未处理的Promise问题。

内容的提问来源于stack exchange，提问作者Eduardo Jesus