Действия

Введение

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

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

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

// Текстовый ввод
await page.GetByRole(AriaRole.Textbox).FillAsync("Петр");

// Ввод даты
await page.GetByLabel("Дата рождения").FillAsync("2020-02-02");

// Ввод времени
await page.GetByLabel("Время встречи").FillAsync("13-15");

// Ввод локальной даты и времени
await page.GetByLabel("Местное время").FillAsync("2020-03-02T05:15");

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

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

// Установить флажок
await page.GetByLabel("Я согласен с условиями выше").CheckAsync();

// Проверить состояние флажка
await Expect(page.GetByLabel("Подписаться на рассылку")).ToBeCheckedAsync();

// Выбрать радиокнопку
await page.GetByLabel("XL").CheckAsync();

Выбор опций

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

// Одиночный выбор по значению или метке
await page.GetByLabel("Выберите цвет").SelectOptionAsync("blue");

// Одиночный выбор по метке
await page.GetByLabel("Выберите цвет").SelectOptionAsync(new SelectOptionValue { Label = "blue" });

// Несколько выбранных элементов
await page.GetByLabel("Выберите несколько цветов").SelectOptionAsync(new[] { "blue", "green", "red" });

Клик мышью

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

// Общий клик
await page.GetByRole(AriaRole.Button).ClickAsync();

// Двойной клик
await page.GetByText("Элемент").DblClickAsync();

// Правый клик
await page.GetByText("Элемент").ClickAsync(new() { Button = MouseButton.Right });

// Shift + клик
await page.GetByText("Элемент").ClickAsync(new() { Modifiers = new[] { KeyboardModifier.Shift } });

// Ctrl + клик на Windows и Linux
// Meta + клик на macOS
await page.GetByText("Элемент").ClickAsync(new() { Modifiers = new[] { KeyboardModifier.ControlOrMeta } });

// Наведение на элемент
await page.GetByText("Элемент").HoverAsync();

// Клик в верхний левый угол
await page.GetByText("Элемент").ClickAsync(new() { position = new Position { X = 0, Y = 0 } });

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

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

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

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

await page.GetByRole(AriaRole.Button).ClickAsync(new() { Force = true });

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

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

await page.GetByRole(AriaRole.Button).DispatchEventAsync("click");

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

предупреждение

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

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

// Нажимайте клавиши одну за другой
await Page.Locator("#area").PressSequentiallyAsync("Hello World!");

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

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

// Нажать Enter
await page.GetByText("Отправить").PressAsync("Enter");

// Отправить Control+Right
await page.GetByRole(AriaRole.Textbox).PressAsync("Control+ArrowRight");

// Нажать знак $ на клавиатуре
await page.GetByRole(AriaRole.Textbox).PressAsync("$");

Метод Locator.PressAsync() фокусирует выбранный элемент и производит одно нажатие клавиши. Он принимает логические имена клавиш, которые генерируются в свойстве 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").PressAsync("Shift+A");

// <input id=name>
await page.Locator("#name").PressAsync("Shift+ArrowLeft");

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

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

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

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

// Выбрать один файл
await page.GetByLabel("Загрузить файл").SetInputFilesAsync("myfile.pdf");

// Выбрать несколько файлов
await page.GetByLabel("Загрузить файлы").SetInputFilesAsync(new[] { "file1.txt", "file12.txt" });

// Выбрать директорию
await page.GetByLabel("Загрузить директорию").SetInputFilesAsync("mydir");

// Удалить все выбранные файлы
await page.GetByLabel("Загрузить файл").SetInputFilesAsync(new[] {});

// Загрузить буфер из памяти
await page.GetByLabel("Загрузить файл").SetInputFilesAsync(new FilePayload
{
    Name = "file.txt",
    MimeType = "text/plain",
    Buffer = System.Text.Encoding.UTF8.GetBytes("this is a test"),
});

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

var fileChooser = page.RunAndWaitForFileChooserAsync(async () =>
{
    await page.GetByLabel("Загрузить файл").ClickAsync();
});
await fileChooser.SetFilesAsync("myfile.pdf");

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

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

await page.GetByLabel("Пароль").FocusAsync();

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

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

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

await page.Locator("#item-to-be-dragged").DragToAsync(page.Locator("#item-to-drop-at"));

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

Если вы хотите точно контролировать операцию перетаскивания, используйте методы более низкого уровня, такие как Locator.HoverAsync(), Mouse.DownAsync(), Mouse.MoveAsync() и Mouse.UpAsync().

await page.Locator("#item-to-be-dragged").HoverAsync();
await page.Mouse.DownAsync();
await page.Locator("#item-to-drop-at").HoverAsync();
await page.Mouse.UpAsync();

примечание

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

Прокрутка

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

// Прокручивает автоматически, чтобы кнопка была видна
await page.GetByRole(AriaRole.Button).ClickAsync();

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

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

Если вы хотите более точно контролировать прокрутку, используйте Mouse.WheelAsync() или Locator.EvaluateAsync():

// Разместите мышь и прокрутите колесиком мыши
await page.GetByTestId("scrolling-container").HoverAsync();
await page.Mouse.WheelAsync(0, 10);

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