编写 Playwright 测试
使用 Playwright 自动化浏览器流程
编写 Playwright 测试 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
您的第一个 Playwright 测试
Playwright 测试是一个接收 page 等测试夹具的异步函数。您可以从 @playwright/test 导入 test 和 expect，并描述一个用户场景。
import { test, expect } from '@playwright/test';
test('opens the home page', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveURL(/.*localhost/);
});page 夹具
page 对象代表一个浏览器标签页。每个测试都会在干净的上下文中获得全新且隔离的 page，因此测试不会意外共享 Cookie 或存储空间。
使用 goto 导航
page.goto(url) 会加载网址，并等待页面进入可用状态。在配置中结合使用 baseURL 后，您可以使用相对路径。
await page.goto('/login'); // resolves against baseURL
await page.goto('https://example.com'); // absolute also works使用定位器查找元素
定位器是指向元素的延迟加载句柄，并会自动等待。相比脆弱的 CSS 选择器，请优先使用 getByRole、getByLabel 和 getByText 等语义定位器。
const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');输入和点击
使用 fill 设置输入值，使用 click 按下按钮。Playwright 会在执行操作前自动等待元素可见且已启用。
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();自动等待消除不稳定的休眠
与较旧的工具不同，Playwright 会自动等待元素以及断言条件成立。您几乎不需要手动设置超时，这正是测试能够保持稳定的原因。
// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();使用 describe 对测试分组
使用 test.describe 将相关场景分组，并通过 beforeEach 共享设置。
test.describe('Login flow', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/login');
});
test('shows the form', async ({ page }) => {
await expect(page.getByLabel('Email')).toBeVisible();
});
});测试完整的用户流程
将多个操作串联起来，模拟完整流程。每一步都像用户行为脚本一样清晰易读。
test('user can log in and see dashboard', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page).toHaveURL(/.*dashboard/);
});运行测试
通过 CLI 运行所有测试用例。添加 --headed 可以查看浏览器，添加 --ui 可以打开 Playwright 的交互式测试运行器。
npx playwright test
npx playwright test --headed
npx playwright test --ui调试失败
失败时，Playwright 可以捕获屏幕截图、视频以及可逐步回放的跟踪记录。跟踪查看器会显示每次操作时的 DOM，让不稳定的失败易于诊断。
npx playwright test --trace on
npx playwright show-trace trace.zip测试隔离很重要
由于每个测试都有自己的浏览器上下文，请不要依赖测试之间的顺序或共享状态。请在每个测试自己的 beforeEach 中，或测试本身内部，设置该测试所需的数据。
快速检查
为什么应避免使用 waitForTimeout？
回顾
Playwright 测试使用 page 夹具：使用 goto 导航，使用语义定位器（getByRole、getByLabel）查找元素，并使用 fill/click 进行交互。自动等待消除了不稳定的休眠。使用 describe 分组，通过 npx playwright test 运行，并使用跟踪记录调试。
常见问题解答
「编写 Playwright 测试」课时是免费的吗？
是的 — 「编写 Playwright 测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「编写 Playwright 测试」这节课中我会学到什么？
使用 Playwright 自动化浏览器流程 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「编写 Playwright 测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。