Playwright 数据提取与验证技巧（三）

在现代 Web 应用开发中，自动化测试是确保应用质量的重要手段。Playwright 是一个强大的 Node.js 库，支持多种浏览器环境，能够帮助开发者高效地进行页面数据提取和验证。本文将详细介绍如何使用 Playwright 获取页面数据、进行断言验证以及截图和录制视频，最后通过一个完整的实战案例展示其应用。

获取页面数据

在自动化测试中，获取页面数据是验证应用功能的基础。Playwright 提供了一系列强大的 API，帮助开发者轻松读取页面信息。

获取文本内容

Playwright 提供了多种方法来获取页面上的文本内容。

单个元素的文本内容

const text = await page.textContent('#welcome');
console.log(text); // 输出元素 #welcome 的文本内容

多个元素的文本内容

const items = await page.$$eval('.list-item', els => els.map(e => e.textContent));
console.log(items); // 输出所有 .list-item 元素的文本内容

获取属性值

有时候我们需要验证某个元素的属性值是否符合预期。

const value = await page.getAttribute('#username', 'placeholder');
console.log(value); // 输出 #username 元素的 placeholder 属性值

获取样式信息

获取元素的样式信息可以帮助我们验证页面的视觉效果。

const color = await page.$eval('#btn', el => getComputedStyle(el).color);
console.log(color); // 输出 #btn 元素的颜色

元素状态检查

检查元素的状态（如是否可见、是否启用等）是测试中的常见需求。

await page.isVisible('#dialog');   // 检查 #dialog 元素是否可见
await page.isHidden('#loading');   // 检查 #loading 元素是否隐藏
await page.isEnabled('#submit');   // 检查 #submit 元素是否启用
await page.isDisabled('#submit');  // 检查 #submit 元素是否禁用
await page.isChecked('#agree');    // 检查 #agree 元素是否选中

断言与验证

Playwright 内置了一个强大的断言库 @playwright/test，使得编写测试用例更加方便。

内置断言方法

使用 expect 进行断言，可以验证页面的各种属性和状态。

导入测试库

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

测试用例示例

test('验证示例', async ({ page }) => {
  await page.goto('https://example.com');

  // 文本断言
  await expect(page.locator('h1')).toHaveText('Example Domain');

  // 属性断言
  await expect(page.locator('a')).toHaveAttribute('href', 'https://www.iana.org/domains/example');

  // 可见性断言
  await expect(page.locator('h1')).toBeVisible();
});

文本内容验证

验证页面上的文本内容是否符合预期。

await expect(page.locator('#message')).toHaveText('登录成功');
await expect(page.locator('#username')).toHaveValue('testuser');

元素状态验证

检查元素的状态，确保它们的行为符合预期。

await expect(page.locator('#submit')).toBeEnabled();
await expect(page.locator('#agree')).toBeChecked();
await expect(page.locator('#loading')).toBeHidden();

页面标题和 URL 验证

验证页面的标题和 URL 是否正确。

await expect(page).toHaveTitle(/Playwright/);
await expect(page).toHaveURL('https://playwright.dev/');

截图与录制

截图和录制视频在调试、失败用例分析和回归测试中非常有用。

页面截图

await page.screenshot({ path: 'screenshot.png', fullPage: true });

• path: 保存路径
• fullPage: 是否截取整个页面

元素截图

const element = page.locator('#logo');
await element.screenshot({ path: 'logo.png' });

视频录制

在创建 context 时启用录制，可以记录测试过程中的所有操作。

const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});
const page = await context.newPage();
await page.goto('https://example.com');
await context.close(); // 关闭后保存视频

截图对比（快照测试）

快照测试用于检测 UI 的变化，确保页面的视觉效果一致。

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

test('页面快照测试', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});

实战案例 —— 登录验证与截图快照

下面是一个完整的实战案例，涵盖了信息提取、断言验证和页面截图。

实例代码

// login-test.spec.js

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

test('用户登录并验证结果', async ({ page }) => {
  // 1. 打开登录页面
  await page.goto('https://example.com/login');

  // 2. 输入用户名和密码
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'Password123');

  // 3. 点击登录
  await page.click('#submit');

  // 4. 等待跳转并检查标题
  await expect(page).toHaveTitle(/Dashboard/);

  // 5. 验证欢迎文本
  await expect(page.locator('.welcome')).toHaveText('欢迎，testuser');

  // 6. 检查按钮状态
  await expect(page.locator('#logout')).toBeVisible();
  await expect(page.locator('#logout')).toBeEnabled();

  // 7. 获取用户 ID 属性并验证
  const userId = await page.getAttribute('#user-profile', 'data-id');
  console.log('用户ID:', userId);
  expect(userId).not.toBeNull();

  // 8. 页面截图
  await page.screenshot({ path: 'login-success.png', fullPage: true });

  // 9. 快照对比（UI 回归测试）
  expect(await page.screenshot()).toMatchSnapshot('dashboard.png');
});

这个测试用例会验证：

• 页面标题和欢迎文本是否正确
• 元素是否可见 / 可用
• 用户信息属性是否存在
• 页面截图和 UI 快照对比

常用 API 表格

为了方便查阅，以下是 Playwright 中常用的 数据提取与验证 相关 API 一览表。

数据提取

断言与验证

| expect(locator).toBeDisabled() | 元素禁用 | expect(page.locator('#submit')).toBeDisabled() | | expect(locator).toBeChecked() | 元素已选中 | expect(page.locator('#agree')).toBeChecked() | | expect(page).toHaveTitle(title) | 页面标题验证 | expect(page).toHaveTitle(/Dashboard/) | | expect(page).toHaveURL(url) | 页面 URL 验证 | expect(page).toHaveURL('https://example.com/dashboard') |

截图与录制

总结

通过本文的介绍，相信你已经掌握了如何使用 Playwright 进行数据提取、断言验证以及截图和录制视频。这些技能不仅能够帮助你提高测试效率，还能确保应用的质量和稳定性。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言交流。