PricingLoginStart free
React Academy · Урок

Сквозное тестирование форм и пользовательских сценариев

Автоматизируйте многошаговую отправку форм и навигацию с помощью объектов страниц Playwright.

Урок 4 из 414 шагов

«Сквозное тестирование форм и пользовательских сценариев» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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();
});

Имитация API в Playwright

Используйте page.route(), чтобы перехватывать вызовы API и возвращать имитационные ответы — это удобно для проверки особых случаев без настоящего серверного компонента.

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() для имитации API, setInputFiles() для загрузки файлов и состояние хранилища для повторного использования сеансов аутентификации. Проверяйте валидацию, многошаговые сценарии и навигацию с клавиатуры, чтобы охватить реальные пути пользователей.

Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Сквозное тестирование форм и пользовательских сценариев» бесплатный?

Да — полный текст урока «Сквозное тестирование форм и пользовательских сценариев» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сквозное тестирование форм и пользовательских сценариев»?

Автоматизируйте многошаговую отправку форм и навигацию с помощью объектов страниц Playwright. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Сквозное тестирование форм и пользовательских сценариев»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Интеграционное тестирование с React Testing Library
  2. Тестирование асинхронного интерфейса и вызовов API с MSW
  3. Начало работы с Playwright для React
  4. Сквозное тестирование форм и пользовательских сценариев
← Назад к React Academy