Playwright测试：表单验证不通过时点击按钮不跳转页面的实现方案

针对你需要验证「无效/空输入点击继续不跳转页面」的测试需求，这里有几个替代废弃的waitForNavigation()的可行方案，基于主流E2E测试框架Playwright给出实现：

方案一：直接断言URL未发生变化 #

这是最直观的方式——记录初始页面URL，提交无效数据后，断言当前URL与初始值一致，或验证页面未跳转到目标路径。

test('invalid form input should not trigger navigation', async ({ page }) => {
  // 打开表单页面
  await page.goto('/user-data-form');
  const initialPageUrl = page.url();

  // 填写无效/空数据（示例：空邮箱、短密码）
  await page.locator('#email').fill('');
  await page.locator('#password').fill('123');

  // 点击「继续」按钮
  await page.locator('button:has-text("继续")').click();

  // 两种断言方式二选一：
  // 1. 对比初始URL
  expect(page.url()).toBe(initialPageUrl);
  // 2. 验证未跳转到预期的下一页路径
  await expect(page).not.toHaveURL(/\/success-page/, { timeout: 3000 });
});

方案二：监听导航事件验证未触发 #

通过监听页面的framenavigated事件，判断提交无效数据后是否发生了页面导航。如果事件未触发，说明符合预期。

test('no navigation occurs with invalid form input', async ({ page }) => {
  await page.goto('/user-data-form');
  let navigationTriggered = false;

  // 注册导航事件监听器
  page.on('framenavigated', () => {
    navigationTriggered = true;
  });

  // 提交空表单
  await page.locator('button:has-text("继续")').click();

  // 等待足够时间确保无延迟导航，再断言
  await page.waitForTimeout(2000);
  expect(navigationTriggered).toBe(false);
});

方案三：结合表单错误提示的双重验证 #

通常无效输入会伴随错误提示，同时验证错误提示出现和URL未变化，能让测试用例更严谨，覆盖“前端验证拦截跳转”的场景。

test('show error message and block navigation on invalid input', async ({ page }) => {
  await page.goto('/user-data-form');
  const initialPageUrl = page.url();

  // 提交空表单
  await page.locator('button:has-text("继续")').click();

  // 断言错误提示可见
  await expect(page.locator('.form-error')).toBeVisible({ timeout: 2000 });
  // 断言页面未跳转
  expect(page.url()).toBe(initialPageUrl);
});

注意事项 #

• 超时时间根据实际页面响应速度调整，避免因网络延迟导致误判
• 如果表单采用AJAX异步提交而非页面跳转，额外需要验证请求是否未发送或返回错误状态码，但核心的页面跳转验证逻辑不变
• 其他测试框架（如Cypress）的实现逻辑类似，比如Cypress中可使用cy.url().should('eq', initialUrl)完成URL断言

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