Playwright 自动化测试常见坑：这 3 个错误最容易翻车

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 的核心就是等待和生命周期管理。记住这三点：

1. 总是等待元素加载后再操作
2. 动态内容要显式等待
3. 记得关闭浏览器和上下文

这样就能避免 99% 的常见错误。