React Academy · 课时

端到端测试表单与用户流程

Q: 「端到端测试表单与用户流程」这节课中我会学到什么？

使用 Playwright 页面对象自动执行多步骤表单提交和导航流程。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Playwright 页面对象自动执行多步骤表单提交和导航流程。

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

端到端表单测试策略

端到端表单测试会模拟完整的用户流程：进入页面、填写字段、提交、处理验证错误，并验证成功结果。

页面对象模型

页面对象模型（POM）会将某个页面的选择器和交互封装到一个类中，使测试更易读并减少重复。

class LoginPage {
  constructor(private page: Page) {}

  async goto() { await this.page.goto('/login'); }
  async fillEmail(email: string) { await this.page.getByLabel('Email').fill(email); }
  async fillPassword(pw: string) { await this.page.getByLabel('Password').fill(pw); }
  async submit() { await this.page.getByRole('button', { name: /log in/i }).click(); }
  async getError() { return this.page.getByRole('alert').textContent(); }
}

在测试中使用页面对象

使用页面对象后，测试会变成对用户操作的意图级描述，易于阅读和维护。

test('successful login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.fillEmail('alice@example.com');
  await loginPage.fillPassword('password123');
  await loginPage.submit();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

测试验证错误

提交无效或空数据，并断言界面显示的错误消息。

test('shows validation errors on empty submit', async ({ page }) => {
  await page.goto('/register');
  await page.getByRole('button', { name: 'Create account' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
  await expect(page.getByText('Password must be at least 8 characters')).toBeVisible();
});

多步骤表单测试

对于多步骤向导，逐步完成每一步，并断言表单会前进且保留之前的输入。

test('completes 3-step signup', async ({ page }) => {
  await page.goto('/signup');
  // Step 1
  await page.getByLabel('First Name').fill('Alice');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 2
  await page.getByLabel('Plan').selectOption('pro');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 3
  await page.getByLabel('Card Number').fill('4242424242424242');
  await page.getByRole('button', { name: 'Complete' }).click();
  await expect(page.getByText('Welcome, Alice!')).toBeVisible();
});

在 Playwright 中模拟接口

使用 page.route() 拦截接口调用并返回模拟响应，这对于在没有真实后端的情况下测试边界情况很有用。

await page.route('/api/register', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ token: 'fake-token' }),
  });
});

await page.goto('/register');
// ...fill and submit form
await expect(page).toHaveURL('/dashboard');

测试文件上传

使用 setInputFiles() 在 Playwright 中模拟文件上传。

test('uploads a profile photo', async ({ page }) => {
  await page.goto('/profile');
  const fileInput = page.getByLabel('Profile photo');
  await fileInput.setInputFiles('./fixtures/avatar.png');
  await page.getByRole('button', { name: 'Upload' }).click();
  await expect(page.getByAltText('Profile photo')).toBeVisible();
});

复用身份验证状态

登录一次，保存浏览器存储状态，并在多个测试之间复用它，以跳过重复的登录流程。

// auth.setup.ts
test('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('alice@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.context().storageState({ path: 'e2e/.auth/user.json' });
});

// playwright.config.ts — use storageState in other tests
use: { storageState: 'e2e/.auth/user.json' }

测试错误恢复

模拟网络故障，验证用户可以重试，或能看到有帮助的错误消息。

await page.route('/api/submit', route => route.abort());
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Network error. Please try again.')).toBeVisible();
await page.unroute('/api/submit');
// Now the real request goes through
await page.getByRole('button', { name: 'Retry' }).click();

测试键盘导航

验证表单可通过键盘完全访问：使用 Tab 在字段间切换，并按 Enter 提交。

test('submits form with keyboard only', async ({ page }) => {
  await page.goto('/contact');
  await page.keyboard.press('Tab'); // focus name
  await page.keyboard.type('Alice');
  await page.keyboard.press('Tab'); // focus email
  await page.keyboard.type('alice@example.com');
  await page.keyboard.press('Tab'); // focus submit
  await page.keyboard.press('Enter');
  await expect(page.getByText('Message sent!')).toBeVisible();
});

测试数据夹具

使用 Playwright 夹具，在多个测试之间整洁地共享设置逻辑，例如创建测试用户。

// fixtures.ts
const test = base.extend<{ testUser: User }>({ 
  testUser: async ({}, use) => {
    const user = await createTestUser();
    await use(user);
    await deleteTestUser(user.id);
  },
});

// In a test file:
test('edits profile', async ({ page, testUser }) => {
  await page.goto(`/users/${testUser.id}/edit`);
});

并行执行测试

Playwright 默认会在多个工作进程中并行运行测试。仅对必须按顺序运行的测试使用 test.describe.serial。

快速检查

页面对象模型（POM）在端到端测试中的主要优势是什么？

回顾

端到端表单测试使用页面对象提高可维护性，使用 page.route() 模拟接口，使用 setInputFiles() 处理上传，并使用存储状态复用身份验证会话。测试验证、多步骤流程和键盘导航，以覆盖真实的用户流程。

常见问题解答

「端到端测试表单与用户流程」课时是免费的吗？

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

「端到端测试表单与用户流程」这节课中我会学到什么？

使用 Playwright 页面对象自动执行多步骤表单提交和导航流程。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「端到端测试表单与用户流程」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy