Playwright: старт с примерами

Playwright для начинающего автотестера: как установить, написать первые UI-автотесты и запускать их. Понятный старт с примерами кода, локаторами и структурой проекта.

Автор — Дмитрий Тыльный, Senior DevOps · 21 июля 2026 · 5 мин
Playwright: старт с примерами

Коротко. Playwright — современный инструмент UI-автоматизации от Microsoft: быстрый, со встроенными умными ожиданиями и удобными локаторами. Для входа в автоматизацию достаточно освоить один инструмент хорошо: Playwright — отличный выбор в 2026. Пишут тесты на TypeScript/JavaScript или Python.

Почему Playwright

  • ✅ Встроенные авто-ожидания — меньше «мигающих» (flaky) тестов.
  • ✅ Работает во всех основных браузерах.
  • ✅ Удобные локаторы по роли и тексту (ближе к тому, как видит пользователь).
  • ✅ Трейсы и скриншоты для отладки из коробки.

Установка и запуск

npm init playwright@latest
npx playwright test          # запустить все тесты
npx playwright test --ui     # интерактивный режим

Первый тест

import { test, expect } from '@playwright/test';

test('заголовок содержит нужный текст', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('клик по ссылке открывает страницу', async ({ page }) => {
  await page.goto('https://example.com');
  await page.getByRole('link', { name: 'More' }).click();
  await expect(page.getByRole('heading')).toBeVisible();
});

Локаторы и ожидания

  • Предпочитайте getByRole, getByText, getByLabel — они устойчивее CSS-селекторов.
  • Проверки через expect(...) с авто-ожиданием — не нужны ручные паузы.
  • ❌ Избегайте фиксированных sleep — это источник нестабильных тестов.

Как организовать проект автотестов

Чтобы проект не превратился в свалку, придерживайтесь простых правил с самого начала: выносите повторяющиеся действия (логин, переходы) в отдельные функции или page-object-классы, храните тестовые данные и base_url в конфиге, а не в коде тестов, группируйте тесты по функциональности. И обязательно подключите прогон в CI (см. GitHub Actions) — автотесты, которые гоняются на каждый коммит, ценятся куда выше, чем «набор скриптов на ноутбуке».

Что показать в портфолио

Сильный артефакт джуна-автоматизатора — небольшой, но аккуратный репозиторий: 10–15 UI-тестов на реальный сайт, page-object для основных страниц, конфиг с окружениями, прогон в GitHub Actions и README со скриншотом отчёта. Это убедительнее, чем строчка «знаю Playwright» в резюме.

Как не написать flaky-тесты

  • Локаторы: role/text/test-id, не длинные CSS-цепочки;
  • ожидания Playwright вместо sleep;
  • изолированные данные (не общий «тестовый юзер» на всех);
  • скрин/трейс на падении в CI;
  • мало UI-сценариев, много стабильной логики — на API.

Первый зелёный pipeline важнее «идеальной архитектуры». Когда 5 тестов стабильно зелёные — выносите page objects. Контекст перехода в auto — автоматизация для джуна.

Playwright в CI за вечер

Добавьте job: install browsers → npx playwright test → upload report on failure. На PR достаточно chromium. Секреты и prod URL в CI для e2e — только test-стенд. Когда упрётесь в скорость — шардирование, не раньше. Контекст: GitHub Actions.

Следующий шаг в QA

Напишите 3 стабильных UI-теста и прогоните их локально одной командой. Закрепите тему практикой: один чеклист или 3–5 тест-кейсов по реальному продукту, один баг-репорт с шагами и ожиданием, коллекция в Postman на 5 запросов. Дальше по треку: основы QA, API-тесты, Playwright, полный маршрут — QA старт 2026. На собес — частые вопросы.

Как применить «Playwright: старт с примерами» на практике

Пройдите материал не как статью, а как задание. Выпишите 3 тезиса из разделов (Почему Playwright; Установка и запуск; Первый тест) и напротив каждого — действие на 30–90 минут: что сделаете руками, какой файл/репозиторий появится, как поймёте что готово. Без этого колонки «изучил» в голове не конвертируются в оффер.

Связка с соседними материалами: GitHub Actions, автоматизация для джуна, основы QA, API-тесты, Playwright. Не читайте всё подряд — возьмите один следующий URL и закройте его артефактом в git до конца недели. Если роль ещё не выбрана, сначала профессии и 5 вакансий-ориентиров, потом возвращайтесь к этой теме.

На собеседовании по теме «Playwright: старт с примерами» вас почти всегда просят пример из практики. Подготовьте 60–90 секунд: задача → что сделали → результат/ограничение. Даже учебный пример звучит сильнее пересказа теории.

Частые вопросы

Playwright или Selenium?
Playwright современнее и стабильнее; у Selenium больше вакансий на рынке. Достаточно освоить один. Выбирайте по целевым вакансиям.

На каком языке писать?
TypeScript/JavaScript или Python. Берите тот, что ближе или чаще в ваших вакансиях.

Что нужно знать до Playwright?
Основы ручного тестирования и базовый синтаксис языка. См. автоматизация для джуна.

Материал «Playwright: старт с примерами» имеет смысл только вместе с практикой: один артефакт в git на этой неделе важнее десяти вкладок с теорией. Если застряли на выборе роли — начните с профессий и одной вакансии-ориентира.

Нужен оффер, а не пятый сертификат?

Записи реальных собесов и разборы — в Telegram.

Смотреть разборы