Playwright中为click()添加try/catch及超时处理的问题

错误原因分析 #

你写的await page.waitForTimeout(delay).locator('div:nth-child(6) > a').click()报错，是因为page.waitForTimeout()返回的是无返回值的Promise，不是Page对象，没法直接链式调用.locator()方法。必须把等待操作和元素定位、点击操作分开执行。

解决方案代码 #

针对multi-grader和solo-grader两种页面的处理逻辑，用try/catch先尝试点击multi-grader对应的元素，失败后等待10秒再尝试solo-grader的元素：

// 替换成multi-grader页面实际的元素选择器
const multiGraderSelector = '.multi-grader-element';
// solo-grader页面的元素选择器
const soloGraderSelector = 'div:nth-child(6) > a';

try {
  // 尝试在5秒内找到并点击multi-grader元素
  await page.locator(multiGraderSelector).click({ timeout: 5000 });
} catch (error) {
  // 如果multi-grader元素未找到，等待10秒
  await page.waitForTimeout(10000);
  // 查找并点击solo-grader元素
  await page.locator(soloGraderSelector).click();
}

更严谨的写法（推荐） #

如果想确保元素确实加载完成后再点击，结合waitFor()方法避免点击失败：

const multiGraderSelector = '.multi-grader-element';
const soloGraderSelector = 'div:nth-child(6) > a';

try {
  // 等待multi-grader元素出现，超时5秒
  await page.locator(multiGraderSelector).waitFor({ timeout: 5000 });
  await page.locator(multiGraderSelector).click();
} catch (err) {
  console.log('未检测到multi-grader页面，10秒后尝试solo-grader操作');
  await page.waitForTimeout(10000);
  // 等待solo-grader元素出现（默认超时30秒，可自定义）
  await page.locator(soloGraderSelector).waitFor();
  await page.locator(soloGraderSelector).click();
}

额外优化方案 #

如果不需要固定等待10秒，也可以用Promise.race同时监听两种元素的出现，谁先加载完成就点击谁，效率更高：

await Promise.race([
  page.locator(multiGraderSelector).waitFor().then(() => page.locator(multiGraderSelector).click()),
  page.locator(soloGraderSelector).waitFor().then(() => page.locator(soloGraderSelector).click())
]);

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