Большинство начинающих берутся за туториалы по Playwright прежде чем умеют читать сообщение об ошибке JavaScript, потом застревают на первом async/await и тратят неделю в обход концепции с которой ещё не познакомились. Проблема не в сложности: в последовательности. Статья разбирает шестишаговый порядок обучения от основ ручного тестирования до Page Object Model, с реальными оценками времени на каждый этап и пояснениями что отложить до тех пор пока реально не понадобится.

Что учить и в каком порядке

Ошибка которую делает большинство начинающих: пытаться учить всё сразу. JavaScript, TypeScript, Playwright, Page Object Model, CI/CD: всё одновременно. Это не работает. Порядок важен.

Шаг 1: Основы ручного тестирования (2–4 недели)

До написания первой строки кода пойми что тестируешь и почему. Это не обходной путь: это фундамент.

Что учить:

  • Как писать тест-кейс (предусловия, шаги, ожидаемый результат)
  • Что должен содержать баг-репорт
  • Разница между серьёзностью и приоритетом
  • Базовые концепции Agile/Scrum
  • Как вручную тестировать веб-приложение (формы, навигация, состояния ошибок)

Где практиковаться: любое веб-приложение. Практическая лаба BecomeQA на lab.becomeqa.com имеет логин, таблицы, модалы, загрузку файлов: достаточно чтобы отработать все основы.

Почему это важно: автоматизация: просто ручное тестирование которое работает автоматически. Не понимаешь что тестируешь и почему: напишешь автоматизацию которая упускает важное.

Шаг 2: Основы HTML и CSS (1–2 недели)

Не нужно быть веб-разработчиком. Нужно понимать что видишь в браузере.

Что учить: HTML-элементы (кнопки, поля, ссылки, заголовки), атрибуты (id, class, type, aria-label) и как использовать DevTools браузера для инспекции элементов (правый клик → Inspect).

Где практиковаться: инспектируй любой сайт. Открой DevTools на кнопке. Найди её элемент, класс, роль.

Почему это важно: локаторы Playwright (getByRole('button'), getByLabel('Email')) имеют смысл только если понимаешь HTML-структуру.

Шаг 3: Основы JavaScript (3–5 недель)

Не нужно учить весь JavaScript. Нужен конкретный срез.

Что учить (по порядку):

1. Переменные (const, let)

2. Типы данных (строка, число, булево, массив, объект)

3. Функции и стрелочные функции

4. Условия (if/else)

5. Циклы (for, forEach)

6. Async/await (важнейшая концепция для Playwright)

7. Модули (import, export)

Что можно пропустить пока:

  • Классы (учи когда дойдёшь до Page Object Model)
  • Прототипы и this
  • Продвинутые методы массивов (.reduce и т.д.)
  • Замыкания
  • Регулярные выражения

Где учить: freeCodeCamp основы JavaScript, The Odin Project или Eloquent JavaScript (бесплатно онлайн). Делай все упражнения: просмотр не равно обучение.

Шаг 4: Основы Playwright (3–4 недели)

Теперь пиши настоящие тесты.

Начни с официальной документации Playwright. Пиши тесты против lab.becomeqa.com:

1. Перейди на страницу логина

2. Заполни email и пароль

3. Кликни кнопку входа

4. Проверь что ты на дашборде

Затем напиши тесты для таблицы (фильтрация, сортировка, пагинация), для модала (открыть, заполнить форму, отправить, закрыть) и для валидации формы (пустая отправка, неверный email).

Пока не беспокойся о совершенной структуре. Сначала сделай чтобы работало.

Шаг 5: Основы TypeScript (1–2 недели)

Playwright работает как с JavaScript так и с TypeScript. TypeScript добавляет проверку типов: ловит ошибки до запуска теста.

Глубоких знаний TypeScript не нужно. Учи аннотации типов для переменных и параметров функций, интерфейсы для объектов, и как читать сообщения об ошибках TypeScript.

Всё что уже знаешь из JavaScript переносится напрямую.

Шаг 6: Page Object Model (2–3 недели)

Когда накопится 10+ тестов, они начнут становиться запутанными. Page Object Model: паттерн организации тестов. Селекторы и действия в одном месте (page-объекты), логика тестов в другом (spec-файлы).

Строй его поверх уже существующих тестов. Рефакторь их в структуру POM. Учись делая.

Временны́е рамки

Реалистичный, а не оптимистичный план для того кто начинает с нуля:

| Этап | Длительность | Результат |

|---|---|---|

| Основы ручного тестирования | 3–4 недели | Умею писать полные тест-кейсы |

| Основы HTML/CSS | 1–2 недели | Умею читать и инспектировать DOM |

| Основы JavaScript | 4–6 недель | Умею писать async-функции |

| Основы Playwright | 3–4 недели | 10+ тестов на практическом приложении |

| TypeScript + POM | 3–4 недели | Структурированный проект на GitHub |

| Основы CI/CD | 1–2 недели | Тесты запускаются в GitHub Actions |

Итого: 4–5 месяцев стабильных ежедневных занятий и практики. Не 4–5 месяцев пассивного просмотра.

Что замедляет прогресс

Смотреть без практики. Можно посмотреть 40 часов туториалов и всё равно не уметь написать тест. Пиши код каждый день, хотя бы 20 минут. Учиться без цели. "Выучить JavaScript": не план. "Написать тест который входит на lab.becomeqa.com и проверяет что дашборд загрузился": вот план. Двигайся к конкретным результатам. Пропустить async/await. Эта концепция спотыкает почти каждого начинающего. Статья на этом сайте объясняет её. Прочитай. Прочитай снова. Практикуй на маленьких примерах пока не щёлкнет. Пытаться понять всё прежде чем двигаться дальше. Ты будешь использовать вещи до того как полностью их понимаешь. Это нормально. Понимание приходит через многократное использование.

Первый проект на GitHub

При подаче заявок на работу нужно что-то показать. Собери это:

Тест-сьют на Playwright для lab.becomeqa.com:

  • Тест логина (верные учётные данные → дашборд, неверные → ошибка)
  • Тесты таблицы (фильтр по статусу, проверка результатов)
  • Тест модала (создать запись, проверить что появилась)
  • Тест загрузки файла
  • README объясняющий как запустить тесты

Достижимо за 4–5 месяцев стабильного обучения. И этого достаточно чтобы получать приглашения на собеседования для junior QA automation-ролей.

→ See also: Дорожная карта QA-автоматизации 2026: ключевые навыки для трудоустройства | План на 90 дней: как получить первую работу QA | Как создать QA-портфолио на GitHub, которое приносит офферы (Playwright)