Computer Science

Учебник E2E-тестирование (Playwright) для начинающих

20 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

End-to-end тесты проверяют приложение так, как его видит пользователь: открывают браузер, кликают по кнопкам, заполняют формы и убеждаются, что всё работает целиком — от интерфейса до базы данных. Этот курс учит писать такие тесты на Playwright — современном инструменте автоматизации браузера от Microsoft.

Вы узнаете, как находить элементы «как пользователь», почему в Playwright почти не нужны sleep, как побеждать самую частую боль E2E — нестабильные (флаки) тесты, как организовать большой набор тестов через фикстуры и Page Object, перехватывать сетевые запросы и запускать всё это в CI. Курс рассчитан на тех, кто знает JavaScript и основы веба.

Курс «E2E-тестирование (Playwright)» состоит из 6 разделов и 20 уроков: Введение в E2E, Поиск элементов и действия, Ожидания и проверки, Организация тестов, Реальные сценарии и Запуск и практика. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение в E2E

    1. Что такое E2E и пирамида тестов

      End-to-end тестирование проверяет приложение целиком глазами пользователя. Разбираем, что это, чем отличается от unit-тестов и его место в пирамиде.

    2. Playwright, Selenium и Cypress

      Обзор инструментов E2E: чем Playwright отличается от Selenium и Cypress. Архитектура, авто-ожидания, поддержка браузеров и языков.

    3. Установка и первый тест

      Устанавливаем Playwright через npm init playwright, разбираем структуру проекта и запускаем первый E2E-тест. Как устроен прогон.

  2. 2 Поиск элементов и действия

    1. Локаторы: ищем как пользователь

      Локаторы Playwright getByRole, getByText, getByLabel, getByTestId находят элементы по тому, что видит пользователь. Почему избегать CSS и XPath.

    2. Действия с элементами

      Действия Playwright: click, fill, type, check, selectOption. Чем fill отличается от type, как ставить чекбоксы и выбирать из списков.

    3. Цепочки и фильтрация локаторов

      Уточняем локаторы Playwright: вложенность, filter по тексту, hasText, nth, first и last. Как выбрать нужный элемент из списка одинаковых.

  3. 3 Ожидания и проверки

    1. Авто-ожидания: почему не нужны sleep

      Авто-ожидания Playwright избавляют от ручных пауз sleep. Разбираем, как инструмент сам ждёт готовности элемента перед каждым действием.

    2. Web-first assertions

      Web-first assertions Playwright: expect(locator).toBeVisible, toHaveText, toHaveValue и другие. Почему они сами ждут нужного состояния.

    3. Ожидание навигации и ответов

      Явные ожидания Playwright: waitForURL, waitForResponse, waitForLoadState. Как правильно дождаться перехода и сетевого ответа без sleep.

    4. Флаки-тесты и таймауты

      Флаки-тесты — главная боль E2E. Причины нестабильности, как их устранить, ретраи, виды таймаутов Playwright и настройка.

  4. 4 Организация тестов

    1. Структура: test, describe и хуки

      Организация тестов Playwright: test и describe для группировки, хуки beforeEach, afterEach, beforeAll для подготовки и очистки.

    2. Фикстуры Playwright

      Фикстуры Playwright: page, context, browser. Чем они отличаются, как работает изоляция и как создавать собственные фикстуры для переиспользования.

    3. Page Object Model

      Паттерн Page Object Model в Playwright: зачем выносить локаторы и действия в классы страниц, как это упрощает поддержку тестов. Пример.

    4. Данные, изоляция и авторизация один раз

      Изоляция тестов Playwright: чистые контексты, тестовые данные и storage state. Как авторизоваться один раз и переиспользовать сессию во всех тестах.

  5. 5 Реальные сценарии

    1. Тест формы входа и регистрации

      Пишем E2E-тест формы входа и регистрации на Playwright: успешный сценарий, валидация ошибок, проверка сообщений и редиректов.

    2. Навигация, вкладки и перехват сети

      Навигация и несколько страниц в Playwright, новые вкладки через popup, несколько контекстов и перехват сети page.route: mock API и эмуляция ошибок.

    3. Файлы, диалоги, трейсы и мобильная эмуляция

      Playwright: загрузка файлов setInputFiles, обработка диалогов, скриншоты, трейсы и trace viewer для отладки, мобильная эмуляция через devices.

  6. 6 Запуск и практика

    1. Конфигурация: проекты и браузеры

      playwright.config: настройка проектов, браузеров, baseURL и общих опций use. Как запускать одни тесты в нескольких браузерах и устройствах.

    2. Параллель, шардирование и CI

      Параллельный запуск и шардирование тестов Playwright, запуск в CI на GitHub Actions в headless-режиме. Как ускорить большой набор E2E.

    3. Отчёты, визуальное тестирование и стратегия

      HTML-отчёт Playwright, визуальное тестирование toHaveScreenshot, стратегия покрытия E2E, чек-лист хорошего теста и что изучать дальше.