Puppeteer技术问题：等待指定元素全部删除后执行网页截图

问题分析 #

你当前的代码用document.querySelector(selector) == null作为等待条件，存在两个核心问题：

1. querySelector仅返回第一个匹配元素，只要第一个占位元素被删除就会触发条件，忽略页面上剩余未删除的同类型元素
2. 如果页面初始加载时还没渲染出占位元素，waitForFunction会直接满足条件执行截图，错过后续广告加载和占位元素删除的完整流程

修正方案 #

方案1：准确检查所有占位元素数量 #

将等待条件改为检查所有匹配元素的数量是否为0，确保全部占位元素被删除后再截图：

const puppeteer = require('puppeteer');
const fs = require('fs');

const config = require('config/puppeteer_conf.json');

if (fs.existsSync(config.OUTPUT_PATH)) {
  fs.unlinkSync(config.OUTPUT_PATH);
}

(async () => {
  const browser = await puppeteer.launch({headless: "new"});
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 2000 });

  await page.goto(config.TARGET_URI);

  const selector = 'div.adm-ad-loading';
  
  // 等待所有占位元素被删除，设置30秒超时（可根据实际情况调整）
  await page.waitForFunction(
    (sel) => document.querySelectorAll(sel).length === 0,
    { timeout: 30000 },
    selector
  );

  await page.screenshot({ path: config.OUTPUT_PATH });

  await browser.close();
})();

方案2：适配广告动态生成场景（可选） #

如果页面初始无占位元素，广告加载时才动态生成，可先等待至少一个占位元素出现，再等待其全部删除，避免提前触发截图：

const puppeteer = require('puppeteer');
const fs = require('fs');

const config = require('config/puppeteer_conf.json');

if (fs.existsSync(config.OUTPUT_PATH)) {
  fs.unlinkSync(config.OUTPUT_PATH);
}

(async () => {
  const browser = await puppeteer.launch({headless: "new"});
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 2000 });

  await page.goto(config.TARGET_URI);

  const selector = 'div.adm-ad-loading';
  
  try {
    // 先等待至少一个占位元素出现，超时10秒（可调整）
    await page.waitForSelector(selector, { timeout: 10000 });
    
    // 再等待所有占位元素被删除
    await page.waitForFunction(
      (sel) => document.querySelectorAll(sel).length === 0,
      { timeout: 30000 },
      selector
    );
  } catch (err) {
    // 超时未检测到占位元素，说明无广告加载，直接截图
    console.log("未检测到广告占位元素，直接执行截图");
  }

  await page.screenshot({ path: config.OUTPUT_PATH });

  await browser.close();
})();

关键说明 #

• 用document.querySelectorAll(sel).length === 0替代querySelector，确保检查范围覆盖所有匹配元素
• 设置合理的timeout参数，避免因广告加载过慢导致流程中断，可根据目标网站的实际加载速度调整
• 可选的前置等待逻辑，能适配广告动态生成的场景，避免初始无元素时直接跳过等待流程

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