Как пользоваться
Интерактивный тренажёр Playwright API. Каждая миссия — небольшое упражнение в виртуальном браузере.
1
Слева — задание и редактор Python.
page и expect уже доступны, пиши код после комментария.2
Справа — виртуальный браузер с целевой страницей. Реагирует на твой код в реалтайме.
3
Run запускает код, Check проверяет решение. После точки (
page.) — Ctrl+Space для автодополнения.
Начни с миссии «Первый клик» — она занимает 30 секунд.
Миссии
Интерактивные упражнения по Playwright API. Каждая миссия — 1-5 минут практики с живым превью.
Прогресс
0 / 51
Visitors
1 357
всего уникальных
Сохранение
В сессии
Locators Mastery
1
Первый клик
Знакомство с Playwright API. Найди кнопку и нажми её — за 30 секунд.
2
Найди по тексту
Главная страница магазина. В навигации четыре ссылки — кликни именно «Каталог».
3
Поля по label
Заполни два поля используя get_by_label — самый правильный способ для форм.
4
Поиск через placeholder
У поля поиска нет label, но есть placeholder — самый практичный способ зацепиться.
5
data-testid — золотой стандарт
У кнопок одинаковый текст, но у каждой свой data-testid. Кликни именно «logout-btn».
6
Найди товар со скидкой
Каталог из трёх товаров, у одного бейдж SALE. Добавь его в корзину.
7
Filter по вложенному элементу
3 заказа. Только у одного есть значок «Доставлен». Открой именно его — через `filter(has=...)`.
8
Позиционные локаторы
10 уведомлений в списке. Кликни на «прочитать» у первого, последнего и третьего.
9
Цепочка локаторов
Несколько одинаковых секций, в каждой по 3 кнопки. Найди именно «Купить» во второй секции.
10
Shadow DOM — кнопка внутри custom element
На странице кастомный `<live-chat>` веб-компонент с собственным Shadow DOM. Открой чат.
11
Динамические id (uid-7234)
У каждого элемента id вида `uid-XXXX` (генерится фронтом при каждом запуске). Найди элемент без id.
12
Таблица с одинаковыми строками
В таблице 6 заказов от разных пользователей. Отмени заказ Михаила — но не Маши, не других.
Actions
1
Двойной клик и правый клик
Открой папку двойным кликом, потом вызови контекстное меню правым кликом по файлу.
2
Заполни форму входа
Стандартный flow логина: email, пароль, «Запомнить меня», submit, проверь приветствие.
3
type() — печать без очистки
В поле уже есть «BLACK». Допиши «-FRIDAY» в конец — не стирая текущий текст.
4
Клавиатура: Tab, Enter, Escape
Заполни email, нажми Tab чтобы перейти к паролю, заполни и нажми Enter для отправки.
5
Dropdown — select_option
Выбери страну «Россия» и город «Москва» в двух связанных dropdown'ах.
6
Drag-and-Drop карточки
Kanban-доска с 3 колонками. Перетащи задачу «Сделать тесты» из «To Do» в «Done».
7
Кастомный date picker
Открой календарь, выбери 15 число — через цепочку кликов как реальный юзер.
8
Hover → tooltip → click
Подсказка появляется только при hover. Открой её и кликни кнопку «Узнать больше».
Auto-waiting
1
Подожди появления
Элемент появляется через 1.5 секунды после клика. Дождись его правильно — без `time.sleep`.
2
Custom timeout в expect
Notification приходит через 3 секунды. Дефолтный timeout не успевает — задай свой.
3
wait_for_selector — старая школа
Список товаров загружается с задержкой. Дождись через wait_for_selector до клика.
4
Дождись редиректа на новый URL
Нажми «Оплатить» — после успеха URL меняется на `/payment/success`. Дождись редиректа.
5
Дождись API-ответа
Submit-кнопка отправляет POST /api/checkout. Дождись ответа перед проверкой результата.
6
click() сам ждёт actionability
Кнопка disabled первые 2 секунды. Просто click() — Playwright дождётся сам.
7
Почини флейкающий тест
В starter_code три wait_for_timeout. Удали все три и переделай тест на expect — он должен быть стабильным.
8
wait_for_load_state(networkidle)
Дашборд параллельно стучится в 4 endpoint'а. Дождись когда вся сеть успокоится перед скриншотом.
Strict Mode
1
Strict mode — три одинаковые кнопки
В корзине три товара, у каждого кнопка «Удалить». Удали именно Samsung — иначе Playwright кинет ошибку.
2
name= делает локатор уникальным
На странице 4 кнопки разного назначения. Параметр name= в get_by_role сразу решает strict mode.
3
exact=True — точное совпадение
name='Save' матчит и «Save», и «Save as draft». Используй exact=True чтобы взять именно «Save».
4
.first vs .nth(0) — когда что
Список комментариев отсортирован по дате. Открой самый новый и самый старый — через .first и .last.
5
Действия над несколькими элементами
5 задач в списке. Отметь первые 3 как сделанные — через .nth() серию вызовов.
6
Disambiguation cookbook
Три формы на одной странице, у каждой кнопка «Save» с одинаковым текстом. Сохрани именно «Payment details».
Assertions
1
Точный vs содержит
to_have_text требует точного совпадения текста, to_contain_text — подстроку. Промахнёшься с пробелом — упадёт.
2
Проверь количество
10 товаров в каталоге, кнопка «Только в наличии» оставляет 6. Проверь count через to_have_count.
3
Проверь value input'а
После fill() ожидаешь определённое value? Проверь через to_have_value — Playwright прочитает атрибут value и сравнит.
4
Проверь атрибут
href, data-*, target, type — любой HTML-атрибут проверяется через to_have_attribute('имя', 'значение').
5
Enabled / Disabled
Кнопка «Оплатить» сначала заблокирована. Заполни email — станет активной. Проверь оба состояния.
6
Отрицательные assertions
not_to_be_visible, not_to_contain_text — проверка что чего-то НЕТ. Auto-wait работает наоборот: ждёт пока условие НЕ перестанет выполняться.
Network Interception
1
Заблокируй аналитику
Подписка на newsletter отправляет аналитический request. Заблокируй его, потом подпишись.
2
Симулируй 500 ошибку
Кнопка «Оплатить» отправляет POST /api/checkout. Замокай его на 500 и проверь что UI показывает баннер ошибки.
3
Замокай API
Admin-страница «Пользователи». Замени ответ /api/users на свой массив — UI отрисует твоих юзеров.
4
Edge case: пустой ответ
API возвращает пустой массив. UI должен показать empty state. Замокай и проверь.
5
Combo: блок + мок
Аналитика мешает (медленная, флейкается), а API нужно замокать. Два page.route одновременно.
6
Медленная сеть
API «зависло» — пользователь видит loader 2 секунды. Симулируй задержку и проверь что loader показывается, потом скрывается.
Multi-step flows
1
Логин с валидацией
Сначала submit пустой формы → проверь ошибки. Потом заполни корректно → submit → проверь успех.
2
Полный e2e: купи iPhone
От главной до подтверждения заказа — реальный flow из 5 шагов.
3
Условная форма
Выбираешь «Юр. лицо» — появляются доп. поля ИНН и название. Тест должен дождаться полей перед fill.
4
Загрузка файла
Загрузи аватар через set_input_files — UI прочитает имя файла и покажет превью. Submit → success.