Перейти к основному содержимому

Действия

Введение​

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

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

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

// Текстовый ввод
page.getByRole(AriaRole.TEXTBOX).fill("Peter");

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

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

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

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

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

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

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

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

Выбор опций​

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

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

// Одиночный выбор по метке
page.getByLabel("Choose a color").selectOption(new SelectOption().setLabel("Blue"));

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

Клик мышью​

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

// Общий клик
page.getByRole(AriaRole.BUTTON).click();

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

// Правый клик
page.getByText("Item").click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));

// Shift + клик
page.getByText("Item").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));

// Ctrl + клик на Windows и Linux
// Meta + клик на macOS
page.getByText("Item").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.CONTROL_OR_META)));

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

// Клик в верхний левый угол
page.getByText("Item").click(new Locator.ClickOptions().setPosition(0, 0));

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

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

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

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

page.getByRole(AriaRole.BUTTON).click(new Locator.ClickOptions().setForce(true));

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

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

page.getByRole(AriaRole.BUTTON).dispatchEvent("click");

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

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

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

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

// Нажимайте клавиши по одной
page.locator("#area").pressSequentially("Hello World!");

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

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

// Нажмите Enter
page.getByText("Submit").press("Enter");

// Отправьте Control+Right
page.getByRole(AriaRole.TEXTBOX).press("Control+ArrowRight");

// Нажмите знак $ на клавиатуре
page.getByRole(AriaRole.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>
page.locator("#name").press("Shift+A");

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

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

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

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

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

// Выберите один файл
page.getByLabel("Upload file").setInputFiles(Paths.get("myfile.pdf"));

// Выберите несколько файлов
page.getByLabel("Upload files").setInputFiles(new Path[] {Paths.get("file1.txt"), Paths.get("file2.txt")});

// Выберите директорию
page.getByLabel("Upload directory").setInputFiles(Paths.get("mydir"));

// Удалите все выбранные файлы
page.getByLabel("Upload file").setInputFiles(new Path[0]);

// Загрузите буфер из памяти
page.getByLabel("Upload file").setInputFiles(new FilePayload(
  "file.txt", "text/plain", "this is test".getBytes(StandardCharsets.UTF_8)));

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

FileChooser fileChooser = page.waitForFileChooser(() -> {
  page.getByLabel("Upload file").click();
});
fileChooser.setFiles(Paths.get("myfile.pdf"));

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

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

page.getByLabel("Password").focus();

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

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

  • Наведите курсор на элемент, который будет перетаскиваться.
  • Нажмите левую кнопку мыши.
  • Переместите мышь к элементу, который будет принимать перетаскивание.
  • Отпустите левую кнопку мыши.
page.locator("#item-to-be-dragged").dragTo(page.locator("#item-to-drop-at"));

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

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

page.locator("#item-to-be-dragged").hover();
page.mouse().down();
page.locator("#item-to-drop-at").hover();
page.mouse().up();
примечание

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

Прокрутка​

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

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

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

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

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

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

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