Конспект — Урок 8: Почему click ничего не сделал?

Главное за урок

Вторая буква AAA — Act. Это шаги тест-кейса, которые меняют продукт: ввести, выбрать, нажать. Не «весь код после beforeEach».

Урок 6 находил узел. Урок 7 готовил сцену. Сегодня Playwright должен дойти до элемента: attached, visible, stable, enabled, receives events. Если в тесте есть .click(), а UI стоит — чаще виновато состояние, а не «фреймворк глючит».

Практика на двух полигонах: Action Lab (/base/action-lab) и живой профиль PomidorQA. ДЗ — новый файл profile-flow.spec.ts, не правка arrange-practice.

Где кончается Arrange и начинается Act

Ручной кейс: предусловия / шаги / ожидаемый. Act = шаги.

Регистрация в тесте про навык — сцена. Если тест про саму регистрацию — те же клики остаются в Act.

Если beforeEach сам добавил навык, зелёный тест говорит только что хук отработал. Сценарий продукта не проверяется.

Один дымовой expect на уроке — чтобы увидеть зелёный. Настоящий Assert (несколько проверок, негатив) — Урок 9.

Auto-waiting и actionability

Playwright не кликает в ту же миллисекунду. Перед click / fill ждёт actionability:

Локатор с Урока 6 находит узел. Actionability решает, можно ли действовать.

waitForTimeout(3000) лечит симптом и делает флаки: завтра UI чуть медленнее — снова красный. Жди состояние, не миллисекунды.

Забытый await с Урока 4 здесь взрывается: промис «ушёл», UI ещё disabled — получаете флак или пустой клик.

Click

.click() — кнопки, ссылки, чипы. Перед кликом auto-wait уже отработал.

Дальше по ПКМ обычно отдельный click по пункту меню — два statement'а.

Fill, clear, press

.fill(value) — основной способ: очистил поле и вставил значение.

Если fill «не триггерит» UI — попробуй pressSequentially. Не печатай по символам «потому что так честнее»: для обычного инпута fill быстрее и стабильнее.

Формы: check, radio, selectOption

Голый click по чекбоксу может выключить уже включённый. check() идемпотентен: уже checked — ок.

Label удобнее value, если value — uuid. В PomidorQA тип навыка — native select, не кастомный список.

Hover, файлы, drag

В обязательном ДЗ этого нет. В Action Lab — чтобы рука знала метод.

Не кликай «Выбрать файл»: нативный диалог ОС в headless/CI не откроешь.

Почему click «молчит»: disabled и оверлей

Классика хука урока: кнопка в Elements есть, в тесте .click() есть — UI не двигается.

force: true и waitForTimeout — крайний случай, не лечение. Сценарий должен сам создать нужное состояние, auto-wait его дождётся.

В Lab: миссия wait-enabled — check «Принимаю», потом «Продолжить». Без check кнопка disabled, click не проходит. wait-overlay — закрыть модалку, потом «Подтвердить».

Комбо: fill + select + click

Типичный Act — не один метод, а цепочка. Каждый шаг — своя строка и свой await.

Паттерн на живом профиле (демо урока):

await page.getByLabel("Навык").fill("Playwright");
await page.getByLabel("Тип").selectOption("can_help");
await page.getByRole("button", { name: "Добавить" }).click();
await expect(page.getByTestId("can-help-skills")).toContainText("Playwright");

То же в Action Lab на учебной сцене (там свои testid ActionSkill-* — не копируй их в профиль).

В ДЗ те же приёмы на пяти полях: Имя, Часовой пояс, Telegram, О себе, Навык. Файл пишете сами.

Action Lab

Action Lab — 18 миссий. Как Locator Lab, только действие, не поиск.

Пишешь локатор + action с новой строки → выполнить → сцена должна измениться. Успех = postcondition, не «команда не упала».

Это учебный исполнитель в браузере, не полный Playwright. Живые тесты и CI — репозиторий курса.

Категории: Click, Fill, Keyboard, Forms, Hover, Files, Drag, Waiting, Комбо.

Новый файл, а не правка arrange-practice

Новый файл tests/e2e/profile-flow.spec.ts — свой beforeEach, свой makeUser / registerUser. Arrange копируете из ДЗ-7. Да, это дубль.

К Уроку 10 будет несколько spec с дублем — тогда вынесем в хелперы и POM. Сегодня не рефакторим: учимся действовать.

arrange-practice — миры про пустую сцену. profile-flow — миры про действие. booking-flow и календарь по-прежнему не зачёт.

Как подойти к домашке

1. git checkout main → git pull origin main, ветка hw8-<github-username>.
2. Пройти весь Action Lab.
3. Создать tests/e2e/profile-flow.spec.ts — файла в репо нет, пишете сами.
4. Arrange скопировать из arrange-practice (makeUser, registerUser, beforeEach). Да, дубль — на Уроке 10 вынесем.
5. Написать 5 тестов профиля: Имя / Часовой пояс / Telegram / О себе / Навык.
6. arrange-practice и booking-flow не трогать. Без хардкода email. Календарь и бронь не трогаем.
7. Все тесты зелёные по одному и пачкой → PR в main.

Ключевые тезисы для теста

• Act — проверяемые шаги после готовой сцены, не хук и не expect.
• Регистрация в тесте про навык — Arrange; fill «Навык» и «Добавить» — Act.
• Auto-wait ждёт actionability: visible, enabled, stable, receives events.
• waitForTimeout и force: true не лечат disabled и оверлей — сначала состояние.
• fill — основной ввод; pressSequentially — когда UI слушает каждый keydown.
• check() идемпотентен; native select — selectOption, кастомный дропдаун — click + option.
• Комбо — несколько statement'ов с await, не одна магическая строка.
• Action Lab — полигон; живые тесты — репозиторий курса.
• Новый spec с копией Arrange — задел на Урок 10, не баг.