Skip to main content

编写测试

Playwright 断言是专门为动态网页创建的。检查会自动重试，直到满足必要条件。Playwright 内置了 自动等待，这意味着它在执行操作之前会等待元素变为可操作状态。Playwright 提供了 test 函数来声明测试，以及 expect 函数来编写断言。

你将学到

示例测试​

查看安装 Playwright 时包含的示例测试，了解如何使用 定位器 和 web first 断言 编写测试。

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

test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 断言标题包含子字符串。
  await expect(page).toHaveTitle(/Playwright/);

  // 创建一个定位器
  const getStarted = page.getByRole('link', { name: 'Get started' });

  // 断言属性严格等于该值。
  await expect(getStarted).toHaveAttribute('href', '/docs/intro');

  // 点击 Get started 链接。
  await getStarted.click();

  // 断言 URL 包含 intro。
  await expect(page).toHaveURL(/.*intro/);
});
note

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

断言​

Playwright Test 使用 expect 库进行 测试断言，该库提供了诸如 toEqual、toContain、toMatch、toBe 等匹配器。Playwright 还使用便捷的异步匹配器扩展了这个库，这些匹配器将等待直到满足预期条件。

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

定位器​

定位器 是 Playwright 自动等待和重试能力的核心部分。定位器代表了一种在任何时刻在页面上查找元素的方法，并用于对元素执行操作，如 .click .fill 等。

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

await expect(getStarted).toHaveAttribute('href', '/docs/installation');
await getStarted.click();

测试隔离​

Playwright Test 基于 测试 fixture 的概念，例如传递给测试的 内置 page fixture。由于浏览器上下文（Browser Context），页面在测试之间是隔离的，这相当于一个全新的浏览器配置文件，每个测试都获得一个全新的环境，即使多个测试在一个浏览器中运行也是如此。

test('basic test', async ({ page }) => {
  ...

使用测试钩子​

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

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.dev/");
  });

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

接下来​