Действия

Введение​

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

Ввод текста​

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

// Text input
await page.getByRole('textbox').fill('Peter');

// Date input
await page.getByLabel('Birth date').fill('2020-02-02');

// Time input
await page.getByLabel('Appointment time').fill('13:15');

// Local datetime input
await page.getByLabel('Local time').fill('2020-03-02T05:15');

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

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

// Check the checkbox
await page.getByLabel('I agree to the terms above').check();

// Assert the checked state
expect(page.getByLabel('Subscribe to newsletter')).toBeChecked();

// Select the radio button
await page.getByLabel('XL').check();

Выбрать пункты​

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

// Single selection matching the value or label
await page.getByLabel('Choose a color').selectOption('blue');

// Single selection matching the label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multiple selected items
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Нажатие мышью​

Выполняет простое нажатие мышью.

// Generic click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

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

// Ctrl + click or Windows and Linux
// Meta + click on macOS
await page.getByText('Item').click({ modifiers: ['ControlOrMeta'] });

// Hover over element
await page.getByText('Item').hover();

// Click the top left corner
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

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

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

Принудительное нажатие​

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

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

Программно нажать​

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

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

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

предостережение

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

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

// Press keys one by one
await page.locator('#area').pressSequentially('Hello World!');

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

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

// Hit Enter
await page.getByText('Submit').press('Enter');

// Dispatch Control+Right
await page.getByRole('textbox').press('Control+ArrowRight');

// Press $ sign on keyboard
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, etc.

• В качестве альтернативы, вы можете указать один символ, который вы хотите получить, например, "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(). Он ожидает, что первый аргумент указывает на элемент input с типом "file". Можно передать несколько файлов в массиве. Если некоторые пути к файлам относительные, они разрешаются относительно текущей рабочей директории. Пустой массив очищает выбранные файлы.

// Select one file
await page.getByLabel('Upload file').setInputFiles(path.join(__dirname, 'myfile.pdf'));

// Select multiple files
await page.getByLabel('Upload files').setInputFiles([
  path.join(__dirname, 'file1.txt'),
  path.join(__dirname, 'file2.txt'),
]);

// Select a directory
await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));

// Remove all the selected files
await page.getByLabel('Upload file').setInputFiles([]);

// Upload buffer from memory
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

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

// Start waiting for file chooser before clicking. Note no 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();

примечание

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

Прокрутка​

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

// Scrolls automatically so that button is visible
await page.getByRole('button').click();

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

// Scroll the footer into view, forcing an "infinite list" to load more content
await page.getByText('Footer text').scrollIntoViewIfNeeded();

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

// Position the mouse and scroll with the mouse wheel
await page.getByTestId('scrolling-container').hover();
await page.mouse.wheel(0, 10);

// Alternatively, programmatically scroll a specific element
await page.getByTestId('scrolling-container').evaluate(e => e.scrollTop += 100);