Действия

Введение

Playwright может взаимодействовать с HTML-элементами ввода, такими как текстовые поля, флажки, радиокнопки, опции выбора, клики мыши, ввод символов, клавиши и сочетания клавиш, а также загружать файлы и фокусировать элементы.

Текстовый ввод

Использование locator.fill() — это самый простой способ заполнить поля формы. Он фокусирует элемент и вызывает событие input с введённым текстом. Это работает для элементов <input>, <textarea> и [contenteditable].

// Текстовый ввод
await page.getByRole('textbox').fill('Peter');

// Ввод даты
await page.getByLabel('Birth date').fill('2020-02-02');

// Ввод времени
await page.getByLabel('Appointment time').fill('13:15');

// Ввод локального времени
await page.getByLabel('Local time').fill('2020-03-02T05:15');

Флажки и радиокнопки

Использование locator.setChecked() — это самый простой способ установить или снять флажок или радиокнопку. Этот метод можно использовать с элементами input[type=checkbox], input[type=radio] и [role=checkbox].

// Установить флажок
await page.getByLabel('I agree to the terms above').check();

// Проверить состояние флажка
expect(page.getByLabel('Subscribe to newsletter')).toBeChecked();

// Выбрать радиокнопку
await page.getByLabel('XL').check();

Выбор опций

Выбирает одну или несколько опций в элементе <select> с помощью locator.selectOption(). Вы можете указать value или label для выбора. Можно выбрать несколько опций.

// Одинарный выбор по значению или метке
await page.getByLabel('Choose a color').selectOption('blue');

// Одинарный выбор по метке
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Несколько выбранных элементов
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Клик мышью

Выполняет простой человеческий клик.

// Общий клик
await page.getByRole('button').click();

// Двойной клик
await page.getByText('Item').dblclick();

// Правый клик
await page.getByText('Item').click({ button: 'right' });

// Shift + клик
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Ctrl + клик на Windows и Linux
// Meta + клик на macOS
await page.getByText('Item').click({ modifiers: ['ControlOrMeta'] });

// Наведение на элемент
await page.getByText('Item').hover();

// Клик в верхний левый угол
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

Под капотом этот и другие методы, связанные с указателем:

• ждут, пока элемент с данным селектором появится в DOM
• ждут, пока он станет видимым, т.е. не пустым, без display:none, без visibility:hidden
• ждут, пока он перестанет двигаться, например, пока не завершится css-переход
• прокручивают элемент в видимую область
• ждут, пока он не начнет получать события указателя в точке действия, например, ждут, пока элемент не станет не закрытым другими элементами
• повторяют попытку, если элемент отсоединяется во время любой из вышеуказанных проверок

Принудительный клик

Иногда приложения используют нетривиальную логику, где при наведении на элемент он перекрывается другим элементом, который перехватывает клик. Это поведение неотличимо от ошибки, когда элемент закрывается, и клик отправляется в другое место. Если вы знаете, что это происходит, вы можете обойти проверки actionability и принудительно выполнить клик:

await page.getByRole('button').click({ force: true });

Программный клик

Если вас не интересует тестирование вашего приложения в реальных условиях и вы хотите симулировать клик любым возможным способом, вы можете вызвать поведение HTMLElement.click() просто отправив событие клика на элемент с помощью locator.dispatchEvent():

await page.getByRole('button').dispatchEvent('click');

Ввод символов

caution

В большинстве случаев вам следует вводить текст с помощью locator.fill(). См. раздел Текстовый ввод выше. Вам нужно вводить символы только в том случае, если на странице есть специальная обработка клавиатуры.

Вводите в поле символ за символом, как если бы это был пользователь с настоящей клавиатурой, с помощью locator.pressSequentially().

// Нажимайте клавиши одну за другой
await page.locator('#area').pressSequentially('Hello World!');

Этот метод будет генерировать все необходимые события клавиатуры, с учетом всех событий keydown, keyup, keypress. Вы даже можете указать необязательную delay между нажатиями клавиш, чтобы симулировать поведение реального пользователя.

Клавиши и сочетания клавиш

// Нажать Enter
await page.getByText('Submit').press('Enter');

// Отправить Control+Right
await page.getByRole('textbox').press('Control+ArrowRight');

// Нажать знак $ на клавиатуре
await page.getByRole('textbox').press('$');

Метод locator.press() фокусирует выбранный элемент и производит одно нажатие клавиши. Он принимает логические имена клавиш, которые генерируются в свойстве keyboardEvent.key событий клавиатуры:

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,
ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight,
ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, и т.д.

• Вы можете также указать один символ, который вы хотите произвести, например, "a" или "#".
• Также поддерживаются следующие модификационные сочетания: Shift, Control, Alt, Meta.

Простая версия производит один символ. Этот символ чувствителен к регистру, поэтому "a" и "A" дадут разные результаты.

// <input id=name>
await page.locator('#name').press('Shift+A');

// <input id=name>
await page.locator('#name').press('Shift+ArrowLeft');

Поддерживаются также сочетания клавиш, такие как "Control+o" или "Control+Shift+T". При указании с модификатором, модификатор нажимается и удерживается, пока не будет нажата последующая клавиша.

Обратите внимание, что вам все равно нужно указать заглавную A в Shift-A, чтобы получить заглавный символ. Shift-a производит строчную букву, как если бы у вас был включен CapsLock.

Загрузка файлов

Вы можете выбрать файлы для загрузки с помощью метода locator.setInputFiles(). Он ожидает, что первый аргумент указывает на элемент ввода с типом "file". Несколько файлов могут быть переданы в массиве. Если некоторые из путей к файлам являются относительными, они разрешаются относительно текущей рабочей директории. Пустой массив очищает выбранные файлы.

// Выбрать один файл
await page.getByLabel('Upload file').setInputFiles(path.join(__dirname, 'myfile.pdf'));

// Выбрать несколько файлов
await page.getByLabel('Upload files').setInputFiles([
  path.join(__dirname, 'file1.txt'),
  path.join(__dirname, 'file2.txt'),
]);

// Выбрать директорию
await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));

// Удалить все выбранные файлы
await page.getByLabel('Upload file').setInputFiles([]);

// Загрузить буфер из памяти
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

Если у вас нет элемента ввода под рукой (он создается динамически), вы можете обработать событие page.on('filechooser') или использовать соответствующий метод ожидания после вашего действия:

// Начать ожидание выбора файла перед кликом. Обратите внимание, что без await.
const fileChooserPromise = page.waitForEvent('filechooser');
await page.getByLabel('Upload file').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(__dirname, 'myfile.pdf'));

Фокусировка элемента

Для динамических страниц, которые обрабатывают события фокуса, вы можете сфокусировать данный элемент с помощью locator.focus().

await page.getByLabel('Password').focus();

Перетаскивание

Вы можете выполнить операцию перетаскивания с помощью locator.dragTo(). Этот метод будет:

• Наводить указатель на элемент, который будет перетаскиваться.
• Нажимать левую кнопку мыши.
• Перемещать мышь к элементу, который будет принимать перетаскивание.
• Отпускать левую кнопку мыши.

await page.locator('#item-to-be-dragged').dragTo(page.locator('#item-to-drop-at'));

Ручное перетаскивание

Если вы хотите точно контролировать операцию перетаскивания, используйте методы более низкого уровня, такие как locator.hover(), mouse.down(), mouse.move() и mouse.up().

await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();

note

Если ваша страница полагается на событие dragover, вам нужно как минимум два перемещения мыши, чтобы вызвать его во всех браузерах. Чтобы надежно выполнить второе перемещение мыши, повторите ваши mouse.move() или locator.hover() дважды. Последовательность операций будет следующей: наведите указатель на элемент для перетаскивания, нажмите мышь, наведите указатель на элемент для сброса, наведите указатель на элемент для сброса второй раз, отпустите мышь.

Прокрутка

В большинстве случаев Playwright автоматически прокручивает страницу перед выполнением любых действий. Поэтому вам не нужно прокручивать явно.

// Прокручивает автоматически, чтобы кнопка была видна
await page.getByRole('button').click();

Однако в редких случаях вам может понадобиться прокрутить вручную. Например, вы можете захотеть заставить "бесконечный список" загрузить больше элементов или расположить страницу для определенного скриншота. В таком случае наиболее надежный способ — найти элемент, который вы хотите сделать видимым внизу, и прокрутить его в видимую область.

// Прокрутите нижний колонтитул в видимую область, заставляя "бесконечный список" загрузить больше контента
await page.getByText('Footer text').scrollIntoViewIfNeeded();

Если вы хотите более точно контролировать прокрутку, используйте mouse.wheel() или locator.evaluate():

// Разместите мышь и прокрутите колесиком мыши
await page.getByTestId('scrolling-container').hover();
await page.mouse.wheel(0, 10);

// Или программно прокрутите конкретный элемент
await page.getByTestId('scrolling-container').evaluate(e => e.scrollTop += 100);