如何用Puppeteer等待无页面刷新的Ajax/JS请求？

针对你遇到的ASP.NET Ajax无页面刷新请求后的元素等待问题，以下是几个高效的解决方案，避免固定等待浪费时间：

1. 监听目标Ajax请求完成 #

直接等待触发的Ajax请求结束是最精准的方式。先找到请求的URL特征（比如包含接口关键词、页面控件ID），通过Puppeteer的waitForRequest监听：

// 先触发按钮点击
await page.click('#your-button-selector');

// 等待目标Ajax请求完成，根据实际URL特征调整判断逻辑
await page.waitForRequest(request => {
  return request.url().includes('WebService.asmx') || request.url().includes('PlaceHolderMain');
}, { timeout: 1500 });

// 请求完成后直接获取元素内容
const price = await page.$eval('#PlaceHolderMain_lblCodigoProdutoValor', el => el.textContent.trim());

如果不确定请求URL，可以先临时添加请求日志定位目标：

page.on('request', request => console.log('Request URL:', request.url()));

2. 修复waitForFunction的写法 #

你之前的代码因字符串拼接可能导致逻辑错误，改用参数传递的方式，确保准确等待内容变化：

// 先获取点击前的初始值
const initialValue = await page.$eval('#PlaceHolderMain_lblCodigoProdutoValor', el => el.textContent.trim());

// 触发按钮点击
await page.click('#your-button-selector');

// 等待元素内容与初始值不同
await page.waitForFunction(
  (selector, initialVal) => {
    const el = document.querySelector(selector);
    return el && el.textContent.trim() !== initialVal;
  },
  { timeout: 1500 },
  '#PlaceHolderMain_lblCodigoProdutoValor',
  initialValue
);

// 获取更新后的内容
const price = await page.$eval('#PlaceHolderMain_lblCodigoProdutoValor', el => el.textContent.trim());

3. 轮询检查元素内容变化 #

如果前两种方法不适用，可以用短间隔轮询，平衡效率与准确性：

await page.click('#your-button-selector');

// 先等待元素存在
const element = await page.waitForSelector('#PlaceHolderMain_lblCodigoProdutoValor', { timeout: 1500 });
const initialValue = await page.evaluate(el => el.textContent.trim(), element);

const startTime = Date.now();
let price = initialValue;

// 轮询直到内容变化或超时
while (Date.now() - startTime < 1500) {
  const currentValue = await page.evaluate(el => el.textContent.trim(), element);
  if (currentValue !== initialValue) {
    price = currentValue;
    break;
  }
  await page.waitForTimeout(50); // 50ms间隔轮询，避免占用过多资源
}

4. 利用ASP.NET的Ajax加载指示器 #

ASP.NET的UpdatePanel通常会伴随加载提示元素（比如ID为UpdateProgress1的容器），可以等待该元素消失：

await page.click('#your-button-selector');

// 等待加载元素出现（可选），再等待它隐藏
await page.waitForSelector('#UpdateProgress1', { timeout: 500 });
await page.waitForSelector('#UpdateProgress1', { hidden: true, timeout: 1500 });

// 获取更新后的元素内容
const price = await page.$eval('#PlaceHolderMain_lblCodigoProdutoValor', el => el.textContent.trim());

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