Playwright 等待机制详解：自动与显式等待的深入分析

await page.click('#submit-button');

// 设置全局超时时间
const browser = await chromium.launch();
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  // 设置全局超时为60秒
  timeout: 60000
});

// 或者在特定操作中设置超时
await page.click('#slow-button', { timeout: 10000 });

// 等待元素出现在DOM中
await page.waitForSelector('.result-item');

// 等待元素可见
await page.waitForSelector('.result-item', { state: 'visible' });

// 等待元素隐藏
await page.waitForSelector('.loading-spinner', { state: 'hidden' });

// 等待页面标题包含特定文本
await page.waitForFunction(() =>document.title.includes('搜索结果'));

// 等待特定变量存在
await page.waitForFunction(() =>window.appState === 'ready');

// 带参数的等待函数
const expectedCount = 10;
await page.waitForFunction(
(count) =>document.querySelectorAll('.items').length >= count,
  expectedCount
);

// 强制等待2秒（尽量避免使用，仅在没有其他选择时使用）
await page.waitForTimeout(2000);

// 点击链接并等待导航完成
await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle' }),
  page.click('#next-page-link')
]);

// 可以指定不同的等待策略
// 'load' - 等待load事件触发
// 'domcontentloaded' - 等待DOMContentLoaded事件触发
// 'networkidle' - 等待网络空闲（500ms内没有网络请求）

// 等待特定请求完成
const [response] = await Promise.all([
  page.waitForResponse('https://api.example.com/data'),
  page.click('#fetch-data-button')
]);

// 使用正则表达式匹配URL
await page.waitForResponse(/api\.example\.com\/users\/\d+/);

// 检查响应状态
await page.waitForResponse(
  response => response.url().includes('/api/data') && response.status() === 200
);

// 等待页面完全加载
await page.waitForLoadState('load');

// 等待DOM内容加载完成（不等待资源）
await page.waitForLoadState('domcontentloaded');

// 等待网络空闲
await page.waitForLoadState('networkidle');

// 好：让Playwright自动等待元素可点击
await page.click('#submit-btn');

// 不好：不必要的显式等待
await page.waitForSelector('#submit-btn', { state: 'visible' });
await page.click('#submit-btn');

// 场景：等待异步操作完成后的元素变化
await page.click('#filter-advanced');
await page.waitForSelector('.advanced-options', { state: 'visible' });

// 场景：等待列表项数量达到预期
await page.waitForFunction(
  () => document.querySelectorAll('.search-result').length >= 10
);

// 避免这样做
await page.waitForTimeout(5000); // 浪费5秒，即使元素早已就绪

// 应该这样做
await page.waitForSelector('#dynamic-content', { 
  state: 'visible',
  timeout: 10000 // 设置合理的超时时间
});

async function waitForTableLoaded(page) {
// 等待加载动画消失
await page.waitForSelector('.loading-indicator', { 
    state: 'hidden',
    timeout: 15000
  });

// 等待数据行出现
await page.waitForSelector('table tbody tr', {
    state: 'visible',
    timeout: 10000
  });

// 等待至少一行数据
await page.waitForFunction(
    () =>document.querySelectorAll('table tbody tr').length > 0,
    { timeout: 10000 }
  );
}

// 使用自定义等待函数
await page.click('#load-data');
await waitForTableLoaded(page);

// 等待特定文本内容出现
await page.waitForSelector('text="操作成功"');

// 使用XPath等待复杂条件
await page.waitForSelector('//button[contains(@class, "primary") and not(@disabled)]');

// 等待元素属性变化
await page.waitForFunction(
  () => {
    const element = document.querySelector('#status');
    return element && element.getAttribute('data-status') === 'complete';
  }
);

try {
  await page.waitForSelector('.slow-element', { timeout: 5000 });
} catch (error) {
  console.log('元素未在5秒内出现，继续执行备用方案');
  // 执行备用操作
  await page.click('#use-default-button');
}

async function waitWithRetry(selector, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      await page.waitForSelector(selector, { timeout: 5000 });
      return true;
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      console.log(`第${i + 1}次重试等待元素: ${selector}`);
      await page.waitForTimeout(1000 * Math.pow(2, i)); // 指数退避
    }
  }
}

class WaitMonitor {
constructor(page) {
    this.page = page;
    this.waitTimes = [];
  }

async waitForSelector(selector, options = {}) {
    const startTime = Date.now();
    awaitthis.page.waitForSelector(selector, options);
    const duration = Date.now() - startTime;
    this.waitTimes.push({ selector, duration });
    return duration;
  }

  getStats() {
    const total = this.waitTimes.reduce((sum, item) => sum + item.duration, 0);
    return {
      totalWaits: this.waitTimes.length,
      totalWaitTime: total,
      averageWaitTime: total / this.waitTimes.length
    };
  }
}