Playwright JavaScript：导航失败及元素交互异常抛出方法

一、元素可见可点击但点击后无跳转时抛出异常 #

Playwright 默认不会在元素可点击但点击后未触发导航时自动抛出异常，你需要手动校验导航状态并抛出自定义异常，以此模拟 Selenium 中 ElementNotInteractableException 的触发场景：

• 核心思路：点击元素前记录当前页面 URL，点击后等待导航完成，若超时且 URL 未变化，则判定为导航未触发，抛出对应异常。
• 代码实现：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 定位目标元素（假设该元素可见可点击但点击后无跳转）
  const targetBtn = page.locator('#non-nav-btn');

  // 点击前记录当前URL
  const originalUrl = page.url();
  await targetBtn.click();

  try {
    // 等待导航完成，设置超时时间（示例为3秒）
    await page.waitForNavigation({ timeout: 3000 });
  } catch (err) {
    // 超时未导航且URL未变化时，抛出模拟异常
    if (page.url() === originalUrl) {
      throw new Error('ElementNotInteractableException: Element is visible and clickable but did not trigger navigation');
    }
    // 其他超时原因，抛出原错误
    throw err;
  }

  await browser.close();
})();

二、导航失败时主动抛出异常 #

Playwright 的 page.goto()、page.reload() 等导航方法默认不会在导航失败（如4xx/5xx状态码、网络错误、超时）时直接抛出异常，可通过以下两种方式实现主动抛异常：

方式1：校验响应状态码 #

通过获取导航响应，判断状态码是否合法，非2xx则抛出异常：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  try {
    const response = await page.goto('https://example.com/invalid-path', {
      waitUntil: 'domcontentloaded',
      timeout: 5000
    });

    // 校验响应状态，无响应或状态码非2xx则抛出异常
    if (!response || !response.ok()) {
      throw new Error(`Navigation failed with status code: ${response ? response.status() : 'No response received'}`);
    }
  } catch (err) {
    throw new Error(`Navigation error: ${err.message}`);
  }

  await browser.close();
})();

方式2：监听页面错误事件 #

通过监听页面的错误事件，捕获导航相关异常并抛出：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // 监听页面全局错误，捕获导航相关异常
  page.on('pageerror', (err) => {
    throw new Error(`Navigation-related error occurred: ${err.message}`);
  });

  try {
    await page.goto('https://example.com/invalid-path', { timeout: 5000 });
    // 额外校验是否到达预期URL
    if (!page.url().includes('target-path')) {
      throw new Error('Navigation failed: Did not reach expected URL');
    }
  } catch (err) {
    throw err;
  }

  await browser.close();
})();

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