Playwright 自動化測試常見坑：這 3 個錯誤最容易翻車

Playwright 是現代化的瀏覽器自動化工具，但很多人在使用過程中踩坑。今天我就把最常見的 3 個錯誤拎出來，幫你避免重複踩坑。

錯誤 1：沒有等待元素加載就直接操作

這是最常見的坑。很多人寫出來的代碼看起來沒問題，但一運行就報錯：element not found。

錯誤做法：

await page.click("#submit-btn");

問題在於，頁面可能還沒加載完，按鈕還不存在。

正確做法：

await page.waitForSelector("#submit-btn");
await page.click("#submit-btn");

或者用更現代的方式：

await page.locator("#submit-btn").click();

Playwright 的 locator 會自動等待元素可交互，這是它相比 Selenium 的一大優勢。

錯誤 2：忽視了動態加載內容的等待

很多網站用 JavaScript 動態渲染內容。你的腳本可能在內容加載前就已經開始提取數據了。

錯誤做法：

await page.goto("https://example.com");
const text = await page.textContent(".dynamic-content");
console.log(text); // 可能是 null 或空字符串

正確做法：

await page.goto("https://example.com");
await page.waitForLoadState("networkidle");
const text = await page.textContent(".dynamic-content");
console.log(text);

或者針對特定元素：

await page.locator(".dynamic-content").waitFor({ state: "visible" });
const text = await page.textContent(".dynamic-content");

錯誤 3：沒有正確處理瀏覽器上下文和頁面生命週期

很多人創建了瀏覽器實例後忘記關閉，導致內存泄漏。或者在錯誤的時機關閉了瀏覽器，導致腳本崩潰。

錯誤做法：

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com");
// 忘记关闭浏览器

正確做法：

const browser = await chromium.launch();
try {
  const page = await browser.newPage();
  await page.goto("https://example.com");
  // 你的操作
} finally {
  await browser.close();
}

或者用更優雅的方式：

const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

try {
  await page.goto("https://example.com");
  // 你的操作
} finally {
  await context.close();
  await browser.close();
}

總結

Playwright 的核心就是等待和生命週期管理。記住這三點：

總是等待元素加載後再操作
動態內容要顯式等待
記得關閉瀏覽器和上下文

這樣就能避免 99% 的常見錯誤。