Angular Academy · Урок

Написание тестов Playwright

Автоматизируйте сценарии браузера с помощью Playwright

«Написание тестов Playwright» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Ваш первый тест Playwright

Тест Playwright — это асинхронная функция, получающая приспособления, например page. Импортируйте test и expect из @playwright/test и опишите пользовательский сценарий.

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) загружает URL и ждет готовности страницы. Вместе с baseURL в конфигурации это позволяет использовать относительные пути.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Поиск элементов с помощью локаторов

Локатор — это отложенная ссылка на элемент с автоматическим ожиданием. Предпочитайте семантические локаторы, такие как getByRole, getByLabel и getByText, хрупким CSS-селекторам.

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» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Написание тестов Playwright»?

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

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

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

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

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

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

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

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

← Назад к Angular Academy