跳至主要内容

编写测试

简介​

Playwright 测试很简单，它们

  • 执行操作，以及
  • 断言状态与预期相符。

在执行操作之前无需等待任何内容：Playwright 会自动等待各种 可操作性 检查通过，然后再执行每个操作。

在执行检查时，也不需要处理竞争条件 - Playwright 断言的设计方式是描述需要最终满足的预期。

就是这样！这些设计选择使 Playwright 用户完全忘记测试中的不稳定超时和竞争检查。

您将学习

第一个测试​

查看以下示例，了解如何编写测试。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.net.cn/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.net.cn/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
注意

在 VS Code 中使用 JavaScript 时，在每个测试文件的开头添加 // @ts-check，以获得自动类型检查。

操作​

大多数测试将从将页面导航到 URL 开始。之后，测试将能够与页面元素进行交互。

await page.goto('https://playwright.net.cn/');

Playwright 会等待页面达到加载状态，然后再继续。详细了解 page.goto() 选项。

交互​

执行操作从定位元素开始。Playwright 使用 定位器 API 来实现这一点。定位器代表在任何时刻查找页面上元素的方法，详细了解可用的 不同类型 的定位器。Playwright 会等待元素变得 可操作，然后再执行操作，因此无需等待它变得可用。

// Create a locator.
const getStarted = page.getByRole('link', { name: 'Get started' });

// Click it.
await getStarted.click();

在大多数情况下，它将在一行中编写

await page.getByRole('link', { name: 'Get started' }).click();

基本操作​

以下是 Playwright 最常用的操作列表。请注意，还有很多其他操作，因此请务必查看 定位器 API 部分，详细了解它们。

操作描述
locator.check()选中输入复选框
locator.click()单击元素
locator.uncheck()取消选中输入复选框
locator.hover()将鼠标悬停在元素上
locator.fill()填充表单字段，输入文本
locator.focus()将焦点放在元素上
locator.press()按单个键
locator.setInputFiles()选择要上传的文件
locator.selectOption()选择下拉列表中的选项

断言​

Playwright 以 expect 函数的形式包含 测试断言。要进行断言，请调用 expect(value) 并选择反映预期的匹配器。

有许多通用的匹配器，如 toEqual、toContain、toBeTruthy，可用于断言任何条件。

expect(success).toBeTruthy();

Playwright 还包括异步匹配器，它们将等待直到满足预期条件。使用这些匹配器可以使测试变得不稳定且具有弹性。例如，此代码将等待页面获取包含“Playwright”的标题。

await expect(page).toHaveTitle(/Playwright/);

以下是 Playwright 最常用的异步断言列表。请注意，还有 更多 断言需要熟悉。

断言描述
expect(locator).toBeChecked()复选框已选中
expect(locator).toBeEnabled()控件已启用
expect(locator).toBeVisible()元素可见
expect(locator).toContainText()元素包含文本
expect(locator).toHaveAttribute()元素具有属性
expect(locator).toHaveCount()元素列表具有给定长度
expect(locator).toHaveText()元素与文本匹配
expect(locator).toHaveValue()输入元素具有值
expect(page).toHaveTitle()页面具有标题
expect(page).toHaveURL()页面具有 URL

测试隔离​

Playwright 测试基于 测试夹具 的概念，如 内置页面夹具，它会传递到您的测试中。由于 浏览器上下文，页面在测试之间是 隔离 的，浏览器上下文相当于一个全新的浏览器配置文件，每个测试都将获得一个全新的环境，即使多个测试在单个浏览器中运行也是如此。

tests/example.spec.ts
import { test } from '@playwright/test';

test('example test', async ({ page }) => {
  // "page" belongs to an isolated BrowserContext, created for this specific test.
});

test('another test', async ({ page }) => {
  // "page" in this second test is completely isolated from the first test.
});

使用测试钩子​

您可以使用各种 测试钩子，如 test.describe 来声明一组测试，以及 test.beforeEach 和 test.afterEach，它们分别在每个测试之前/之后执行。其他钩子包括 test.beforeAll 和 test.afterAll，它们在每个工作进程中所有测试之前/之后执行一次。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.net.cn/');
  });

  test('main navigation', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.net.cn/');
  });
});

下一步​