Playwright实战-测试断言从入门到精通

断言在自动化测试中扮演着至关重要的角色。它们帮助我们验证应用程序的行为是否符合预期，并在发现问题时提供详细的错误信息。本文将深入探讨断言的各个层面，从基础到高级，带您逐步了解如何利用Playwright进行高效的断言。

基础篇：断言

为什么需要断言

  在自动化测试中，我们需要一种机制来验证应用程序的行为是否正确。断言是一种用于验证测试结果的机制，它们帮助我们确认测试是否按预期执行，并且在测试失败时提供有用的信息。

断言生成器

Playwright提供了断言生成器，帮助验证元素是否存在、元素内容、元素属性等：

• expect(element).toBeVisible(): 验证元素是否可见，参见上图“小眼睛”图标

• expect(element).toHaveText(text): 验证元素的文本内容是否包含指定的文本，，参见上图“ab符号”图标

• expect(element).toHaveAttribute(name, value?): 验证元素是否具有指定的属性，以及属性值是否符合预期，参见上图“文本”图标

断言api

    此外，Playwright还提供了丰富的断言api供调用，大致可以分为 基本断言、定位器断言、页面断言、接口类断言 等

基本断言

相等

expect(value).toBe(expected) //值比较
expect(value).toEqual(expected) //深度比较

不相等

expect(value).not.toBe(expected)

包含

expect(value).toContain(expected)

模式匹配

expect(value).any()
expect(value).anything()
expect(value).arrayContaining()
expect(value).closeTo()
expect(value).objectContaining()
expect(value).stringContaining()
expect(value).stringMatching()
expect(value).toMatch()
expect(value).toMatchObject()

例如

expect({
  list: [1, 2, 3],
  obj: { prop: 'Hello world!', another: 'some other value' },
  extra: 'extra',
}).toEqual(expect.objectContaining({
  list: expect.arrayContaining([2, 3]),
  obj: expect.objectContaining({ prop: expect.stringContaining('Hello') }),
}));

定位器断言

可见性

expect(element).toBeVisible(); //可见
expect(element).toBeHidden(); //隐藏
expect(element).toBeInViewport(); //视图中

 状态变化

expect(element).toBeChecked(); //选中
const locator = page.getByRole('textbox');
await expect(locator).toBeFocused(); //聚焦
const locator = page.locator('div.warning');
await expect(locator).toBeEmpty(); //空
const locator = page.locator('button');
await expect(locator).toBeEnabled(); //可点

元素内容

const locator = page.locator('.title');
await expect(locator).toContainText(/\d messages/); //包含
await expect(locator).toHaveText(/Welcome/);
await expect(locator).toHaveValue(/[0-9]/);
const locator = page.getByRole('textbox');
await expect(locator).toHaveId('lastname');
const locator = page.locator('#component');
await expect(locator).toHaveClass(/selected/);

页面断言

URL

await expect(page).toHaveURL(/.*checkout/);

title

await expect(page).toHaveTitle(/.*checkout/);

screenshot

await expect(page).toHaveScreenshot('image.png');

接口断言

toBeOK

await expect(response).toBeOK();

not

await expect(response).not.toBeOK();

进阶篇：软断言

断言的问题

测试断言失败，后续用例都无法执行？这也是自动化测试中经常遇到的问题。 Playwright 提供了软断言Soft Assertions的支持，允许测试在遇到断言失败时继续执行，并在最后统一标记测试为失败，提升测试的灵活性。

什么是软断言

软断言是一种特殊的断言方式，与传统的断言不同，软断言在遇到失败时不会立即中止测试执行，而是将测试标记为失败。这使得在测试中可以执行多个断言，即使其中一部分失败，测试仍能继续执行，方便查看所有断言的结果。

在 Playwright 中使用软断言

在 Playwright 中，可以通过 expect.soft() 方法来执行软断言。

示例如下：

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

test('软断言示范', async ({ page }) => {
  // 在页面上执行软断言
  await expect.soft(page).toHaveTitle('标题');

  // 其他测试步骤
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example');
});

test.afterEach(async ({ testInfo }) => {
  // 在测试结束后检查是否有软断言失败
  if (testInfo.errors.length > 0) {
    console.error('软断言失败信息：');
    for (const error of testInfo.errors) {
      console.error(error.message);
      console.error(error.stack);
    }
  }
});

软断言小结

• 软断言适用场合，检查多个元素状态但不希望因为一个失败而中断整个测试

• expect.soft()实现软断言，testInfo.errors查看是否存在软断言失败

• 灵活使用软断言可以提高自动化测试的鲁棒性

高级篇：可视化回归

什么是可视化回归

可视化回归测试，即Visual Regression Testing是一种自动化测试方法，用于检测页面布局和外观的变化。它通过比较页面的屏幕截图，来检测是否存在意外的视觉变化。

利用snapshotAssert

Playwright提供了toMatchSnapshot()方法，用于捕获页面的屏幕截图，并将其与预期的参考截图进行比较。这种方式可以很容易地发现页面布局或样式的变化，从而确保应用程序的外观和用户体验始终如一。

示例

test('可视化回归测试', async ({ page }) => {
    await page.goto('https://alipan.com');
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchSnapshot('alipan.png');
});

说明如下：

1. 首次运行，生成截面截图alipan.png

2. 迭代上线后，再次运行，会截图并比对，Playwright检测视觉变化有差异，断言会失败并显示差异的详细信息，包括截图比较结果和差异的位置

结论

• 断言在自动化测试中扮演着至关重要的角色，它们帮助我们验证应用程序的行为是否符合预期，并在发现问题时提供详细的错误信息。通过 expect() 开启断言，结合代码生成工具可以快速生成各种断言方法，如 .toBeVisible()、.toContain()、.toHaveValue() 等，从而有效地验证页面元素的可见性、内容、属性等。

• 软断言 soft() 是一种特殊的断言方式，它允许测试在遇到断言失败时继续执行，并在最后统一标记测试为失败，提升了测试的灵活性。对于需要验证多个条件的测试场景，软断言能够帮助我们更好地捕获失败信息，而不至于中断整个测试流程。

• 利用 Playwright 的 toMatchSnapshot() 方法可以实现可视化回归测试，自动检测页面是否发生明显的 UI 变化。通过对比页面截图，我们可以快速发现页面布局或样式的变化，确保应用程序的外观和用户体验始终如一。

综上所述，断言在自动化测试中是不可或缺的工具，我们可以根据项目需求灵活选用不同类型的断言，并结合软断言和可视化回归测试，提高测试的质量和效率，确保应用程序的稳定性和可靠性。