playwright 管理测试集+page页面操作

随着Playwright测试用例集合在团队内增长，如何高效灵活管理逐渐变得重要，tag和grep功能可以有效解决这个问题。

比较常见的问题例如：

1. 如何重新快速过滤失败的case，重新执行带有特殊标签tag的用例

2. 对测试集和测试套件进行功能分组feature

3. 如何在html report中展示某些特定的tag

1. grep介绍

1.1 grep是什么

grep是一强大的类Unix命令行使用程序，用于搜索纯文本数据集以查找与正则表达式匹配的行，是一种允许您使用正则表达式高效搜索文本的工具。

1.2. grep如何定义

在Playwright中，用--grep 或者-g定义

1.3. 举个例子

用例定义如下：

import { test } from '@playwright/test';
 
test('customer can create an appointment', async ({ page }) => {
    ...
});
 
test('customer can see all appointments', async ({ page }) => {
    ...
});
 
test('customer can create an order', async ({ page }) => {
    ...
});

测试执行时候，使用grep指定cases：

# Run tests matching "customer" (all of them)
npx playwright test --grep "customer"
 
# Run tests matching "appointment" (the first two)
npx playwright test --grep "appointment"
 
# Run tests matching "order" (the last one)
npx playwright test --grep "order"
 
# Run tests matching "create" (the first and last ones)
npx playwright test --grep "create"

2. tag介绍

2.1 tag是什么

在Playwright，在测试描述中使用tag语法。

2.2 tag如何定义

在测试用例中定义tag，只需要在描述中加入@标签内容，其中标签内容可根据需求定义，比如

test('user can login @smoke @login', async ({ page }) => {
  // Test implementation goes here
});

上面的例子中，定义了smoke、login这样2个tag

2.3 @tag

用例执行

Playwright命令行

--grep 指定匹配tag

# Run tests with the @smoke tag
npx playwright test --grep "@smoke"

--grep-invert 排除匹配tag

# Run tests with the @login tag, excluding those with the @smoke tag
npx playwright test --grep "@login" --grep-invert "@smoke"

OR组合

# Run tests with either the @smoke or @login tag (logical OR)
npx playwright test --grep "@smoke|@login"

AND组合

# Run tests with both the @smoke and @login tags (logical AND)
npx playwright test --grep "(?=.*@smoke)(?=.*@login)"

3. test.describe中使用

@tag除了在test()中外，也可以用于test.describe，例如：

import { test } from '@playwright/test';

test.describe('group, {tag: '@report'}, () => {
  test('reporter header', async ({ page }) => {
    // ...
  });

  test('full report', async ({ page }) => {
    // ...
  });
});

1. test.describe定义一组测试例， @report是指定的tag

2. npx playwright test --grep "@report"执行

小结论

• • @tag定义tag，--grep指定用例，可以灵活高效标记和筛选测试用例；

• • --grep、--grep-invert、|等组合运用可以更加灵活选对特定用例；

• • 采用清晰一致的tag定义，可以更好管理测试用例，比如

  • • @smoke，标记冒烟测试

  • • @regression，标记回归测试

  • • @slow，标记用例执行时间

  • • @ci ，标记CI pipeline执行用例

page页面操作指南

在web页面自动化测试中，无论是刷新页面、获取url这样的单页面操作，还是多个tab页面切换，处理弹出式对话框这样的多页面操作，Playwright都提供了简洁有力的实现方法。

1. 单页面操作

前面 介绍过browser，context，page三者多关系，page代表了context浏览器上下文的一个single tab或popup window实例：

// 创建页面
const page = await context.newPage();

// 导航目标页面
await page.goto('http://example.com');
// 定位&输入
await page.locator('#search').fill('query');

// 定位&点击
await page.locator('#submit').click();
console.log(page.url());

在单个页面上，可以执行各种操作，包括导航、后退、前进、刷新页面以及获取当前URL等。

页面导航： page.goto()

await page.goto('https://example.com');

页面后退: page.goBack()

Usage

await page.goBack();
await page.goBack(options);

Options

• • timeout：以毫秒计算。默认为0，即没有timeout

• • waitUntil：可选参数，检查操作是否成功。可以在这个可选参数中使用枚举 —— LOAD、DOMCONTENTLOADED、NETWORKIDLE、COMMIT。默认情况下使用 LOAD 状态

页面前进: page.goForward()

用户和参数同page.goBack()

页面刷新: page.reload()

用户和参数同page.goBack()

获取当前页面URL：page.url()

const currentURL = await page.url();

• • 返回值string

暂停：page.pause()

const currentURL = await page.pause();

• • 暂停脚本执行，等待用户输入，例如点击继续，或者

• • 脚本调用resume()方法

获取当前页面title：page.title()

const currentURL = await page.title();

• • 返回值stirng

2. 多页面操作

每个浏览器上下文可以承载多个页面（tab标签页）。

每个页面都表现得像是一个焦点、活动的页面。不需要将页面置于前台。上下文内的页面遵循上下文级别的仿真，比如视口大小、自定义网络路由或浏览器语言设置。

// 创建两个页面
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// 获取浏览器上下文的页面
const allPages = context.pages();

3. 处理新tab页

在浏览器上下文上的页面事件可用于获取在上下文中创建的新页面。这可以用来处理由 target="_blank" 链接打开的新页面。

// 在点击之前开始等待新页面。注意没有 await。
const pagePromise = context.waitForEvent('page');
await page.getByText('打开新标签页').click();
const newPage = await pagePromise;
await newPage.waitForLoadState();
console.log(await newPage.title());

如果触发新页面的操作是未知的，则可以使用以下模式。

// 获取上下文中的所有新页面（包括弹出窗口）
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
});

4. 处理对话框dialog

监听popup

如果页面打开了一个弹出窗口（例如，由 target="_blank" 链接打开的页面），您可以通过监听页面上的 popup 事件来获取对其的引用。

这个事件是作为 browserContext.on('page') 事件的补充，但只针对与此页面相关的弹出窗口发出。

// 在点击之前开始等待弹出窗口。注意没有 await。
const popupPromise = page.waitForEvent('popup');
await page.getByText('打开弹出窗口').click();
const popup = await popupPromise;
// 等待弹出窗口加载。
await popup.waitForLoadState();
console.log(await popup.title());

如果触发弹出窗口的操作是未知的，则可以使用以下模式。

// 当弹出窗口打开时获取所有弹出窗口
page.on('popup', async popup => {
  await popup.waitForLoadState();
  console.log(await popup.title());
});

page.addlocatorHandler()

有时候也可以采用page.addlocatorHandler()方法，示例子代码如下：

await page.addLocatorHandler(
    page.getByText('对话框确认'),
    async () => {
        await page.getByText('确认').click();
    }
);

 结论

对于页面操作，Playwright提供了丰富的方法实现单页面、多页面、对话框等不同场景自动化操作方式，帮助实现自动化测试任务。掌握这些方法技巧可以有效提高自动化测试效率。