После каждого обновления сайта нужно заново проверять регистрацию, оформление заказа и десятки других функций. В небольшом проекте это занимает несколько минут. Но когда появляются сотни экранов и сценариев, ручное тестирование превращается в пытку. Автоматизировать рутину помогает Playwright. Что это такое — рассказываем в статье.
Что такое Playwright
Playwright — это фреймворк от Microsoft для тестирования веб-приложений. С его помощью можно управлять браузером и выполнять действия так же, как это делает обычный пользователь, например:
- открывать страницы;
- вводить логин и пароль;
- нажимать кнопки;
- проверять работу личного кабинета.
С Playwright все это происходит автоматически без участия человека.
Фреймворк не требует сложной настройки и поддерживает разные языки программирования, но чаще всего его используют с JavaScript и TypeScript.
Зачем нужен Playwright
Главная задача Playwright — избавить разработчиков и тестировщиков от рутинных проверок. Чтобы после каждого обновления не пришлось вручную проходить десятки сценариев, можно один раз написать тест и запускать его автоматически.
Благодаря этому:
- проверка новых версий продукта проходит быстрее;
- уменьшается количество ошибок в релизах;
- быстрее выходят обновления;
- приложение проверяется сразу в нескольких браузерах;
- минимизируется влияние человеческого фактора.
Особенно заметна разница на крупных проектах. Если ручная проверка занимает несколько часов, то автоматический запуск тестов — не больше десять минут.
Что такое E2E-тесты
E2E расшифровывается как End-to-End, то есть «сквозное» тестирование. Оно проверяет работу приложения целиком — так, как его использует реальный пользователь.
Представьте интернет-магазин: пользователь заходит на сайт, авторизуется, ищет нужный товар, добавляет его в корзину, оформляет заказ, оплачивает. E2E-тест автоматически проделывает весь этот путь и проверяет, чтобы на каждом шаге все работает исправно.
E2E-тесты медленнее и сложнее в написании, но именно они дают уверенность в том, что приложение действительно работает. Playwright как раз создан для E2E-тестирования.
Установка Playwright
Для проектов на JavaScript и TypeScript установка занимает всего несколько минут.
Предварительно проверьте, чтобы на компьютере был установлен Node.js версии 18 и выше. Для этого введите команду node -v в терминале.
Чтобы установить Playwright выполните команду: npm init playwright@latest
После запуска мастер установки задаст несколько вопросов и автоматически создаст проект.
Вместе с Playwright обычно устанавливаются:
- Тестовый раннер — программа, которая запускает тесты и показывает результат.
- Браузеры для запуска тестов — Chromium, Firefox, WebKit. Без них тесты физически не смогут работать.
- Примеры тестов — готовые сценарии, на которых можно изучить синтаксис.
- Конфигурационные файлы — настройки Playwright (таймауты, браузеры, отчеты).
После установки можно сразу запускать первый тест и знакомиться с инструментом на практике.
Основные команды Playwright
При работе с Playwright обычно используют несколько базовых команд:
- page.goto() — открыть страницу по указанному адресу;
- page.click() — нажать на элемент (кнопку, ссылку и т. д.);
- page.fill() — заполнить текстовое поле;
- page.locator() — найти элемент на странице;
- expect() — выполнить проверку;
- page.screenshot() — сделать скриншот страницы или отдельного элемента.
С помощью этих команд можно написать 80% всех E2E-тестов. Даже сложные сценарии (авторизация, оформление заказа, заполнение многостраничных форм) обычно строятся из таких простых действий. Разница лишь в количестве шагов и их последовательности.
Запускать тесты можно командой playwright test. Результаты выводятся в терминале. По умолчанию тесты выполняются в скрытом режиме — окно браузера не видно во время выполнения.
Локаторы в Playwright
Чтобы нажать кнопку или заполнить поле, Playwright должен сначала найти нужный элемент на странице. Для этого используют локаторы — специальные команды, которые ищут элементы по разным признакам:
- getByRole — поиск по роли элемента. Каждый интерактивный элемент на странице имеет невидимую роль, которая описывает его назначение, например кнопка, ссылка или поле ввода.
- getByText — поиск по видимому тексту. Подходит для ссылок, кнопок, абзацев, сообщений об ошибках. Если на странице написано «Товар добавлен в корзину» или «Забыли пароль?», Playwright найдет эти элементы по тексту.
- getByPlaceholder — поиск по подсказке внутри поля ввода. У текстовых полей часто есть полупрозрачная подсказка, которая видна, когда поле пустое, например «Введите ваш email» или «Поиск…». Playwright может найти такое поле и ввести туда нужные данные.
- getByTestId — поиск по специальному тестовому идентификатору. Разработчики могут добавить в код атрибут data-testid — он не виден пользователям, но помогает тестам находить элементы. Этот способ удобен, когда у элемента нет понятного текста (например, иконка-меню) или текст может меняться в зависимости от языка сайта.
Microsoft рекомендует по возможности использовать роли, текст и подписи. Такие локаторы устойчивее к изменениям интерфейса и реже ломаются после обновлений сайта. Если дизайнер поменяет класс кнопки с синего на зеленый, локатор по роли продолжит работать, а локатор по CSS-классу сломается.
Проверки в Playwright
Проверки — то, что отличает тест от простого скрипта. Без проверок вы просто открываете страницу и кликаете по кнопкам, но не знаете, все ли работает правильно. Проверки подтверждают, что результат совпадает с ожиданиями.
Что можно проверить:
- заголовок страницы (отображается во вкладке браузера);
- URL (браузер открыл правильный адрес);
- видимость элемента (сообщение «Спасибо, ваша заявка принята» после заполнения формы);
- скрытость элемента (индикатор загрузки пропал после успешной отправки формы);
- текст внутри элемента (в блоке с сообщением написано «Успешно»);
- количество элементов (на странице поиска отображаются все нужные товары);
- состояние элемента (кнопка «Отправить» активна, только когда все поля формы заполнены).
В Playwright проверки запускаются командой expect. Дальше вы указываете, что именно нужно проверить (страницу, конкретный элемент или его свойство), и каким должно быть ожидаемое значение.
Если условие не выполнилось сразу, инструмент не падает, а ждет. Он повторяет проверку снова и снова, пока не пройдет таймаут. Это называется «автоматические ожидания». Благодаря этому не нужно писать дополнительные команды и просить подождать — Playwright делает это сам.
Добавляйте проверки на всех важных шагах, чтобы убедиться, что приложение работает корректно.
Шесть способов отладки тестов
Даже хорошо написанные тесты иногда падают. Причина может быть в неправильном коде, изменении интерфейса или нестабильной работе приложения. В Playwright есть несколько инструментов, которые помогут понять, что пошло не так.
- Режим с видимым браузером: по умолчанию в Playwright тесты работают на фоне, вы не следите за их выполнением. В режиме отладки браузер становится видимым. Вы смотрите на экран и можете заметить, где тест делает что-то неожиданное.
- Интерактивный режим (UI Mode): Playwright умеет открывать специальное окно, где все тесты показаны в виде списка. Можно запустить любой и пошагово пройти его, глядя на экран браузера.
- Замедленное выполнение: если тест падает слишком быстро, можно специально замедлить выполнение. Playwright будет делать паузу после каждого действия и вы увидите, где именно происходит сбой.
- Запись сессии (трейс): самая мощная функция отладки. Когда тест падает, Playwright может сохранить полную запись всего, что происходило во время теста. Трейс включает скриншоты каждого шага, сетевые запросы, консольные сообщения и логи.
- Скриншоты в момент падения: Playwright можно настроить так, чтобы при падении теста автоматически делался скриншот. На снимке будет видно, как выглядела страница в момент, когда произошла ошибка.
- Запись видео: для сложных ошибок Playwright может записывать видео прохождения теста. Вы просматриваете запись и видите всю последовательность действий целиком, а не только финальный скриншот.
Новичкам лучше начать с видимого режима или скриншотов. Если проблему не видно, включите замедление и пройдите тест шаг за шагом. Если это не помогло, используйте запись сессии или видео.
Частые ошибки новичков
Почти все начинающие специалисты сталкиваются с похожими проблемами.
- Используют нестабильные CSS-селекторы: новички часто находят элементы по CSS-классам. Но при малейшем изменении интерфейса они начинают ломаться. Лучше использовать локаторы по роли (кнопка, ссылка) или по тексту — они не зависят от того, как сверстана страница.
- Забывают про ожидания: тест нажимает «Войти», сразу ищет «Личный кабинет» и падает с ошибкой, потому что элемент не найден. На самом деле личный кабинет появляется через секунду после входа.
Помните, что проверка через expect будет ждать появления элемента, а действие вроде click() — нет. Если просто дать команду кликнуть по еще не появившемуся элементу, Playwright выдаст ошибку.
- Пишут слишком длинные сценарии: которые проверяют сразу все — регистрацию, логин, поиск товара, добавление в корзину, оформление заказа и оплату. Если такой тест упадет, будет сложно понять, на каком этапе возникла ошибка.
- Игнорируют проверки: просто открывают страницу, проходят по всем ссылкам и закрывают ее. На самом деле такой тест показывает только то, что страницы открываются, а не то, что на них есть правильное содержимое. Всегда добавляйте проверки, чтобы убедиться, что приложение работает корректно.
Большинство этих ошибок проходят с опытом. Главное правило: делайте тесты короткими, независимыми и понятными другим разработчикам.
Главное про Playwright
- Playwright — библиотека от Microsoft для E2E-тестирования.
- E2E-тестирование проверяет полный путь пользователя — от начала и до конца (например, от регистрации до оформления заказа).
- Для установки Playwright введите в терминале: npm init playwright@latest. Браузеры скачиваются автоматически.
- Лучше использовать локаторы getByRole и getByText — такие тесты работают стабильно, даже если меняется верстка.
- Проверки (expect) автоматически повторяются до истечения таймаута — не нужно писать ручные ожидания.
- Если тест упал во время проверки, можно воспользоваться видимым режимом или посмотреть запись видео.
