不穩定頁面 / 等待機制的實用攻略

## 自動等待機制原理

Playwright提供智能等待機制，自動處理大多數同步和異步元素載入。其核心原理包括：

• 偵測元素是否可見
• 檢查元素是否可交互
• 自動處理網路請求和DOM變化
  
  

常見等待問題包括：

• 動態內容載入
• 異步資料更新
• 元件延遲渲染
• 網路請求不穩定
  
  

實用等待方法

1. waitForSelector()

   偵測特定元素出現的基本方法：

   await page.waitForSelector('.loading-spinner', { state: 'hidden' });

2. waitForLoadState()

   等待頁面達到特定載入狀態：

   await page.waitForLoadState('networkidle');

3. waitForResponse()

   等待特定網路請求完成：

   await page.waitForResponse('**/api/data');

4. waitForFunction()

   自定義等待條件：

   await page.waitForFunction(() => {
     return document.querySelector('.result') !== null;
   });

5. waitForTimeout()

   簡單的定時等待（不推薦，但偶爾有用）：

   await page.waitForTimeout(2000); // 等待2秒

複雜場景等待技巧

自定義等待條件

結合多種等待策略：

await page.waitForFunction(() => {
  const element = document.querySelector('.dynamic-content');
  return element && element.textContent.length > 0;
}, { timeout: 5000 });

處理不穩定頁面

• 診斷不穩定行為

  • 使用 page.screenshot() 記錄問題
  • 錄製測試過程影片
  • 分析網路請求和控制台日誌

• 解決頁面持續滾動問題

  await page.evaluate(() => {
    window.scrollTo(0, 0); // 強制回到頁面頂部
    Object.defineProperty(window, 'scrollY', { value: 0 });
  });

• 處理動態內容

  const dynamicContent = await page.waitForSelector('.dynamic-element', {
    state: 'visible',
    timeout: 10000
  });

最佳實踐建議

• 優先使用內建等待機制
• 設定合理超時時間
• 避免使用固定等待時間
• 結合多種等待策略
• 監控和記錄不穩定行為
  

注意事項

• 條件在瀏覽器上下文執行
• 不能直接使用外部變數
• 效能可能略低於原生等待方法