编写测试
简介
Playwright测试很简单，它们
- 执行操作，以及
- 断言状态是否符合预期。
在执行操作之前无需等待任何内容：Playwright 在执行每个操作前会自动等待一系列可操作性检查通过。
在执行检查时也无需处理竞态条件 - Playwright断言的设计方式使其能够描述最终需要满足的预期条件。
就是这样！这些设计选择让Playwright用户完全不必再担心测试中出现不稳定的超时和竞争条件检查。
你将学习
第一个测试
查看以下示例了解如何编写测试。
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// 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.dev/');
Playwright 将等待页面达到加载状态后再继续执行。了解更多关于 page.goto() 的选项。
交互
执行操作首先需要定位元素。Playwright使用Locators 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操作列表。请注意还有更多功能，请务必查看Locator 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 Test基于测试夹具的概念，例如内置的页面夹具，它会传递到您的测试中。由于浏览器上下文隔离，页面在测试之间是隔离的，这相当于一个全新的浏览器配置文件，每个测试都会获得一个全新的环境，即使多个测试在单个浏览器中运行也是如此。
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，它们会在所有测试前后每个工作线程执行一次。
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/');
});
});