使用Playwright判断页面按钮是否存在及解决isVisible异常问题

问题根源 #

你的代码出现“明明id1按钮不存在却进入第一个if分支”的问题，主要是这几个原因：

• page.goto 默认只等待页面load状态，现代SPA站点的动态内容还没加载完就开始判断，导致结果不准确
• 选择器可能误匹配了页面上隐藏的同ID元素（比如页面有重复id的元素）
• 未考虑页面动态加载的延迟，可见性判断时机过早

修复方案 #

1. 等待页面完全加载后再判断 #

将page.goto改为等待网络空闲，确保动态内容加载完毕：

await page.goto(myLink, { waitUntil: 'networkidle' });

networkidle会等待页面500ms内无网络请求，适配绝大多数动态站点的加载逻辑。

2. 先确认元素存在，再判断可见性 #

如果页面存在隐藏的同ID元素，isVisible()可能出现误判。可以先通过count()确认元素存在：

const button1 = page.locator("button#id1");
const button2 = page.locator("button#id2");

if (await button1.count() > 0 && await button1.isVisible()) {
  await button1.click();
} else if (await button2.count() > 0 && await button2.isVisible()) {
  await button2.click();
}

count()返回匹配到的元素数量，大于0说明元素确实存在于DOM中。

3. 用显式等待+异常处理适配动态加载 #

如果页面元素加载延迟较高，用waitFor显式等待元素状态，配合try-catch处理超时：

const button1 = page.locator("button#id1");
const button2 = page.locator("button#id2");

try {
  // 等待id1按钮可见，超时5秒
  await button1.waitFor({ state: 'visible', timeout: 5000 });
  await button1.click();
} catch {
  try {
    // 超时后尝试id2按钮
    await button2.waitFor({ state: 'visible', timeout: 5000 });
    await button2.click();
  } catch {
    console.log("目标按钮均未出现");
  }
}

这种方式更稳妥，避免因加载延迟导致的误判。

4. 验证选择器准确性 #

打开浏览器开发者工具，执行document.querySelector("button#id1")，确认是否真的没有匹配元素。如果有匹配结果，检查该元素是否为隐藏状态（比如display:none），这时候isVisible()应该返回false，若代码仍进入if分支，说明选择器可能匹配到了其他可见元素。

完整修复代码 #

import { chromium } from 'playwright';

async function main() {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 50
  });

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

  // 等待网络空闲，确保动态内容加载完成
  await page.goto(myLink, { waitUntil: 'networkidle' });

  const button1 = page.locator("button#id1");
  const button2 = page.locator("button#id2");

  if (await button1.isVisible()) {
    await button1.click();
  } else if (await button2.isVisible()) {
    await button2.click();
  } else {
    console.log("两个按钮均未可见");
  }

  // 关闭浏览器，避免资源泄漏
  await browser.close();
}

main();

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