Playwright + JS 进行页面跳转测试

目录

[1、 基本页面跳转测试](#1、 基本页面跳转测试)

[2、 新标签页跳转测试](#2、 新标签页跳转测试)

[3、 配置和设置](#3、 配置和设置)

关键点总结：

---

常见的跳转测试分为

1、基本页面跳转测试 - 点击link在当前页面跳转

2、新标签页跳转测试 - 点击link跳转之后跳转到一个新的tab

1、 基本页面跳转测试

const { test, expect } = require('@playwright/test');

test('测试页面跳转', async ({ page }) => {
  // 导航到起始页面
  await page.goto('https://example.com');
  
  // 点击跳转链接
  await page.click('a[href="/target-page"]');
  
  // 验证是否跳转到目标页面
  await expect(page).toHaveURL('https://example.com/target-page');
});

2、 新标签页跳转测试

const { test, expect } = require('@playwright/test');

test('新标签页跳转测试', async ({ page, context }) => {
  await page.goto('https://example.com');
  
  // 监听新页面打开事件
  const [newPage] = await Promise.all([
    context.waitForEvent('page'), // 等待新页面打开
    page.click('a[target="_blank"]') // 点击打开新标签页的链接
  ]);
  
  // 等待新页面加载完成
  await newPage.waitForLoadState();
  
  // 验证新页面的URL
  await expect(newPage).toHaveURL(/expected-url/);
  
  // 关闭新页面
  await newPage.close();
});

3、 配置和设置

在 playwright.config.js中配置导航选项：

module.exports = {
  use: {
    // 默认导航超时时间
    navigationTimeout: 30000,
    // 默认等待直到网络空闲
    waitUntil: 'networkidle'
  }
};

关键点总结：

1. **使用 waitForNavigation**​ 确保跳转完成

2. 验证 URL ​ 使用 toHaveURL匹配器

3. 处理新标签页 ​ 使用 context.waitForEvent('page')

4. 添加适当的等待​ 处理异步跳转

5. 使用数据属性选择器​ 提高测试稳定性