如何在Puppeteer JS中通过waitForSelector等待元素类名变更

waitForSelector只负责检测元素是否新增，没法监听已有元素的类名变化，所以要换用Puppeteer的waitForFunction——它支持自定义DOM条件，直到满足要求才停止等待。

两种可行实现方式 #

方式一：监控特定元素的类名变化 #

先定位到那个会修改类名的元素，然后等待它包含目标类名：

import type { NextApiRequest, NextApiResponse } from "next";
const puppeteer = require("puppeteer");
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const browser = await puppeteer.launch({
    executablePath:
      "../../../../../../Program Files (x86)/Google/Chrome/Application/chrome.exe",
    headless: false,
  });
  const page = await browser.newPage();

  await page.goto("https://www.craiyon.com/", {
    timeout: 0,
    waitUntil: "domcontentloaded",
  });
  await page.waitForTimeout(1000);
  await page.type(".svelte-1g6bo9g", "sausage");
  await page.click("#generateButton");

  // 等待目标类名出现：传入目标类，监控元素是否包含该类
  await page.waitForFunction(
    (targetClass) => {
      // 替换成你要监控的元素的初始选择器（比如变更前的类名）
      const targetElement = document.querySelector(".h-full.w-full.cursor-pointer.rounded-lg.border.border-medium-blue.object-cover.object-center.transition-all.duration-200.hover:scale-[0.97].hover:border-2.hover:border-grey");
      return targetElement && targetElement.classList.contains(targetClass.split(' ')[0]);
    },
    { timeout: 0 }, // 无限等待，可根据需求调整
    "grid grid-cols-3 gap-1 sm:gap-2"
  );

  // 获取最终的目标元素
  const resultElement = await page.querySelector(".grid.grid-cols-3.gap-1.sm:gap-2");
  
  await browser.close();
  console.log(resultElement);
  res.status(200).json({ test: "操作完成" });
}

方式二：直接等待页面出现匹配目标选择器的元素 #

这种方式更简单，不管元素是新增还是已有元素改类名，只要匹配目标选择器就停止等待：

// 替换原来的waitForSelector部分
await page.waitForFunction(() => {
  return document.querySelector(".grid.grid-cols-3.gap-1.sm:gap-2") !== null;
}, { timeout: 0 });

const resultElement = await page.querySelector(".grid.grid-cols-3.gap-1.sm:gap-2");

关键提示 #

• waitForFunction的第一个参数会在浏览器的DOM上下文执行，所以可以直接调用document相关API
• 如果要监控的元素有固定的初始标识（比如ID），用初始标识定位会比类名更稳定，避免初始类名也变化的情况

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