Действия с элементами

Кликаем, печатаем, ставим галочки и выбираем из списков — основные действия над элементами.

Действие — это операция, которую тест выполняет над локатором: клик, ввод текста, отметка чекбокса. Перед каждым действием Playwright сам ждёт, пока элемент станет готов.

Клик

Самое частое действие. Playwright перед кликом убеждается, что элемент видим, включён и не перекрыт другим элементом — поэтому ручные паузы перед кликом не нужны.

await page.getByRole('button', { name: 'Купить' }).click();

// двойной клик, правый клик
await page.getByText('Файл').dblclick();
await page.getByText('Файл').click({ button: 'right' });

// клик с зажатым модификатором
await page.getByText('Элемент').click({ modifiers: ['Shift'] });

Ввод текста: fill против pressSequentially

Для заполнения полей есть два метода, и важно понимать разницу. fill мгновенно подставляет всё значение разом — это быстро и надёжно, подходит почти всегда. Он также сам очищает поле перед вводом.

await page.getByLabel('Email').fill('[email protected]');

pressSequentially (раньше назывался type) печатает по одному символу, имитируя реальный набор с клавиатуры. Это нужно редко — например, когда поле реагирует на каждое нажатие: автодополнение, маска ввода, валидация по ходу набора.

// печатает посимвольно — нужно для полей с реакцией на каждый ввод
await page.getByLabel('Поиск').pressSequentially('книги', { delay: 100 });

Чекбоксы и радио

Для чекбоксов есть check и uncheck — они идемпотентны: check ставит галочку, только если её ещё нет, и не «снимает» уже стоящую.

await page.getByLabel('Согласен с условиями').check();
await page.getByLabel('Подписка на рассылку').uncheck();

Выпадающие списки

Для нативного <select> используют selectOption — можно по значению, по тексту или по индексу.

<select id="city">
  <option value="msk">Москва</option>
  <option value="spb">Санкт-Петербург</option>
</select>

// по value
await page.getByLabel('Город').selectOption('spb');

// по видимому тексту
await page.getByLabel('Город').selectOption({ label: 'Москва' });

Обратите внимание: selectOption работает только с нативным <select>. «Самодельные» выпадашки на <div> с JavaScript тестируют обычными кликами: открыть список, кликнуть нужный пункт.

Клавиатура

Иногда нужно нажать конкретную клавишу — Enter, Tab, стрелки. Для этого есть press:

await page.getByLabel('Поиск').fill('playwright');
await page.getByLabel('Поиск').press('Enter');

Главное про действия

Каждое действие включает проверки готовности (actionability): Playwright ждёт, пока элемент станет видимым, стабильным (не двигается), включённым и доступным для взаимодействия. Поэтому вам почти никогда не нужно вручную ждать перед кликом — об этом подробно в следующем разделе.

Итог

• click ждёт готовности элемента и кликает; поддерживает двойной клик, правую кнопку и модификаторы.
• fill вставляет значение разом (почти всегда), pressSequentially печатает посимвольно (редко).
• check/uncheck для чекбоксов, selectOption для нативного <select>.
• Каждое действие включает проверку готовности элемента, поэтому ручные ожидания не нужны.