React Academy · 课时

Playwright for React 入门

Q: 「Playwright for React 入门」这节课中我会学到什么？

编写 Playwright 测试，打开浏览器、操作 React 应用并断言结果。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写 Playwright 测试，打开浏览器、操作 React 应用并断言结果。

Playwright for React 入门 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

Playwright 是什么

Playwright 是一个 Node.js 端到端测试框架，可驱动真实的 Chromium、Firefox 和 WebKit 浏览器。它非常适合测试完整的 React 应用流程，包括路由、身份验证和接口交互。

安装

使用一条命令安装 Playwright 及其浏览器二进制文件。

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

React 的 Playwright 配置

配置 Playwright，在运行测试前启动开发服务器。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

编写您的第一个测试

测试使用 page，这是一个浏览器页面对象。导航到某个网址，与元素交互，并断言结果。

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

定位器

Playwright 的定位器类似于 RTL 查询。优先使用基于角色的定位器，以提高稳定性。

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

点击与输入

使用 click()、fill()、press() 和 selectOption() 与元素交互。

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

等待导航

Playwright 会自动等待元素就绪，但您也可以显式等待导航或网络请求完成。

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

断言

将 expect(locator) 与 Playwright 的内置匹配器结合使用。它们会自动等待条件成立。

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

测试失败时截取屏幕截图

完成配置后，Playwright 会在测试失败时自动捕获屏幕截图和追踪信息。在配置中启用此功能。

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

运行测试

以无头模式运行所有测试，或使用 --ui 启动交互式测试浏览器，以便以可视方式逐步执行测试。

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Playwright 追踪查看器

测试失败时，使用 npx playwright show-trace 打开追踪文件，查看带有屏幕截图、网络请求和控制台日志的逐步测试回放。

持续集成

Playwright 在持续集成环境中默认以无头模式运行。使用 npx playwright install --with-deps 安装浏览器，并像运行普通 npm 脚本一样运行测试。

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

快速检查

填充文本输入框时应使用哪个 Playwright 方法？

回顾

Playwright 测试真实浏览器，并会自动等待元素就绪。使用基于角色的定位器，使用 fill() 和 click() 进行交互，使用 expect(locator) 进行断言，并在开发期间使用 --ui 模式进行可视化调试。

常见问题解答

「Playwright for React 入门」课时是免费的吗？

是的 — 「Playwright for React 入门」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Playwright for React 入门」这节课中我会学到什么？

编写 Playwright 测试，打开浏览器、操作 React 应用并断言结果。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Playwright for React 入门」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy