Перетаскивание — это обожаемая веб-функция, реализованная во многих современных веб-приложениях. Список бесконечен: от облачных сервисов хранения данных, таких как Google Drive и Dropbox, до инструментов управления проектами, таких как Jira и Trello. Как автоматизированные тестировщики, мы обязаны оставить ни одну функцию нашего приложения не протестированной. Но часто бывает сложно автоматизировать функцию со сложным взаимодействием с пользователем, например, перетаскивание.
К счастью, популярный инструмент автоматизации тестирования Selenium WebDriver предлагает функциональность, позволяющую легко автоматизировать перетаскивание веб-элемента из одной части сайта в другую. В этой статье о том, как реализовать перетаскивание на JavaScript, мы узнаем, как написать код для автоматизации тестирования функции перетаскивания с помощью Selenium JavaScript.
Давайте приступим!
Что такое действие перетаскивания?
Давайте начнем с понимания того, что именно представляет собой действие перетаскивания в HTML.
Действие перетаскивания — это программная функция на основе графического интерфейса, выполняемая с помощью мыши. Эта функция позволяет нам «удерживать» элемент, «перетаскивать» его в другое место или на другой виртуальный объект и «бросать» его в целевое место. В HTML можно перетащить любой элемент.
Рабочий процесс типичной функции перетаскивания выглядит следующим образом:
-
Интересующий элемент, который необходимо перетащить, должен быть виден на экране.
-
Пользователь инициирует взаимодействие, выбирая элемент. Методом выделения может быть щелчок мыши.
-
Удерживая элемент выбранным, пользователь перемещает указательное устройство (мышь) в нужное место или цель путем непрерывного нажатия или «перетаскивания».
-
Как только желаемое место или цель достигнуты, пользователь отпускает элемент, и он становится «брошенным».
Перетаскивание является частью многих пользовательских интерфейсов, которые мы используем каждый день. Вот несколько распространенных примеров:
-
Загрузка файла в веб-приложение (например, Google Drive).
-
Перемещение файла из одной папки в другую (например, Gmail).
-
Переупорядочивание, изменение размера и группировка объектов (например: JIRA, Trello).
-
Перестановка вкладок браузера (например: Chrome, Firefox).
Как реализовать перетаскивание в JavaScript?
Мы можем автоматизировать операцию перетаскивания с помощью класса Actions в Selenium, предоставляемого Selenium WebDriver API. Класс actions поддерживает два метода, с помощью которых мы можем перетаскивать элемент. Это
-
метод dragAndDrop
-
метод dragAndDropBy
Помимо этих двух методов, для автоматизации перетаскивания мы также можем использовать следующие методы класса Actions. Это:
-
метод moveByOffset
-
метод moveToElement
Прежде чем мы углубимся в то, как реализовать перетаскивание в JavaScript, давайте подробнее разберемся в самом классе Actions.
Что такое класс Actions в Selenium?
Команды WebElement не нуждаются в представлении, они помогают нам идентифицировать WebElement и выполнять над ним различные действия. Большинство основных действий пользователя, таких как нажатие на кнопку или ввод текста в поле ввода, могут быть выполнены с помощью команд WebElement.
Вот некоторые популярные команды:
-
WebElement.click() — щелкнуть по веб-элементу
-
WebElement.sendKeys() — ввод текста в поле ввода
-
WebElement.submit() — для отправки формы и т.д.
Однако, если вам необходимо выполнить сложные взаимодействия, такие как перетаскивание с двойным щелчком или щелчок и удержание элемента, их невозможно выполнить с помощью простых команд WebElement. И здесь на помощь приходит класс Actions.
В официальной документации класс Actions описывается как:
«Пользовательский API для эмуляции сложных жестов пользователя. Используйте этот класс вместо прямого использования клавиатуры или мыши».
Короче говоря, чтобы автоматизировать сложные действия на основе клавиатуры или мыши в Selenium, вам необходимо использовать класс Actions в Selenium. Методы класса Actions можно разделить на две основные категории:
-
События клавиатуры — keyDown(), keyUp(), sendKeys() и т.д.
-
События мыши — dragAndDrop(), dragAndDropBy(), moveByOffset(), moveToElement() и т.д.
Различные действия, поддерживаемые классом actions, следующие:
Синтаксис для перетаскивания в Selenium
В начале этого раздела о перетаскивании JavaScript мы узнали, что класс Actions поддерживает два метода, которые позволяют автоматизировать действие перетаскивания. Теперь давайте подробно изучим их, а также синтаксис, необходимый для выполнения действия.
- Метод dragAndDrop
Этот метод используется для выполнения операции Drag and Drop, когда нужно щелкнуть левой кнопкой мыши на элементе, удерживать его, перетащить в нужное целевое место и сбросить.
Синтаксис:
Actions.dragAndDrop(WebElement source, WebElement target)
Этот метод принимает два параметра:
-
*source *- веб-элемент, на котором нужно щелкнуть и начать перетаскивание
-
target — веб-элемент, на который мы должны перетащить исходный элемент.
Чтобы найти исходный и целевой элемент, мы можем использовать любую стратегию локатора.
driver.findElement(Any By strategy & locator)
2. метод dragAndDropBy
Этот метод используется для выполнения операций Drag and Drop в Selenium с использованием смещений по осям x и y. Исходный элемент будет перетащен в место, указанное с помощью смещений по осям x и y в пикселях.
Actions.dragAndDropBy(WebElement source, int xOffset, int yOffset)
Этот метод принимает три параметра:
-
*source *- элемент, на который нужно нажать и начать перетаскивание
-
xOffset — пиксельное значение оси x, определяющее горизонтальное перемещение исходного элемента
-
*yOffset *- значение пикселя оси y, определяющее вертикальное перемещение исходного элемента.
Опять же, чтобы найти исходный элемент, мы можем использовать любую стратегию локатора.
driver.findElement(Any By strategy & locator)
Функция dragAndDropBy() работает аналогично dragAndDropBy(), но единственное отличие заключается в том, что dragAndDropBy() перемещает исходный элемент к смещению, а не к какому-либо целевому элементу.
Наконец, после определения метода dragAndDrop() или dragAndDropBy() с параметрами необходимо вызвать метод perform() для выполнения действия.
Actions.dragAndDrop(WebElement source, WebElement target).perform();
ИЛИ
Actions.dragAndDropBy(WebElement source, int xOffset, int yOffset).perform();
В качестве альтернативы мы также можем добиться автоматизации перетаскивания, щелкнув и удерживая элемент, **переместив *его в целевую позицию, а затем *отпустив **его. Для выполнения этой последовательности операций мы будем использовать следующие методы класса Actions.
-
щелчок и удержание веб-элемента с помощью функции clickAndHold()
-
перемещение в целевое местоположение с помощью moveToElement() или moveByOffset()
-
отпускание кнопки мыши в целевой позиции с помощью функции release().
Рассмотрим их подробно, а также синтаксис ниже.
3. метод moveToElement
Этот метод используется для перемещения мыши к указанному веб-элементу. С помощью этого метода можно также переместить перетаскиваемый веб-элемент.
Синтаксис:
Actions.clickAndHold(WebElement source).moveToElement(WebElement target).release().perform();
-
Веб-элемент, на который мы хотим нажать и удерживать, передается в clickAndHold().
-
Затем мы перемещаем указатель мыши на целевой веб-элемент, указанный в moveToElement().
-
Затем мы освобождаем элемент от удержания кнопки мыши с помощью функции release().
-
Наконец, мы вызываем perform() для выполнения построенной цепочки действий.
4. Метод moveByOffset
Этот метод используется для перемещения мыши на указанное смещение последних известных координат мыши. При начальной загрузке страницы координаты мыши будут равны (0,0). Также с помощью этого метода можно переместить перетаскиваемый веб-элемент.
Синтаксис:
Actions.clickAndHold(WebElement source).moveByOffset(int xOffset,int yOffset).release().perform();
-
В clickAndHold() передается веб-элемент, на который нужно нажать и удерживать.
-
Затем мы перемещаем указатель мыши в целевое место, передавая смещения X и Y в moveByOffset().
-
Затем мы освобождаем элемент от удержания кнопки мыши с помощью функции release().
-
Наконец, мы вызываем функцию perform() для выполнения построенной цепочки действий.
Примечание: С помощью **Import maps** вы можете контролировать, какие URL-адреса будут получены с помощью утверждений JavaScript import
и выражений import()
.
Синтаксис для перетаскивания в JavaScript с помощью Selenium
Для работы с Selenium с использованием JavaScript drag and drop мы будем использовать библиотеку selenium-webdriver. Здесь синтаксис вызова класса Actions и доступные методы немного отличаются. Чтобы использовать функцию перетаскивания JavaScript в автоматизированном тестировании Selenium, мы будем использовать метод dragAndDrop.
- Метод dragAndDrop
Этот метод помогает нам настроить действие перетаскивания, передавая либо целевой веб-элемент, либо смещения X и Y.
Синтаксис:
this.dragAndDrop(WebElement from, WebElement|{x: number, y: number} to ).perform();
Функция принимает два параметра:
-
from — веб-элемент, на котором нужно щелкнуть и начать перетаскивание.
-
*to *- либо веб-элемент, либо смещение (в пикселях) для обозначения целевого места, куда нужно перетащить элемент.
В следующем разделе этой статьи о том, как реализовать перетаскивание в JavaScript, мы продемонстрируем написание тестового случая для автоматизации перетаскивания в JavaScript с помощью Selenium.
Как написать тестовый пример для автоматизации перетаскивания в JavaScript с помощью Selenium
До сих пор мы обсуждали класс Actions и различные методы автоматизации функции Drag and Drop. Наконец, пришло время испачкать руки!
В этом разделе о том, как реализовать перетаскивание на JavaScript, вы узнаете, как перетаскивать объекты с помощью JavaScript при автоматизации тестирования Selenium.
Предварительные условия
Я предполагаю, что в вашей системе установлены следующие предварительные условия.
-
Node.js и NPM
-
Visual Studio Code или любая другая IDE по выбору
Примечание: **Intl.PluralRules API -**API для правил языка множественного числа и форматирования с учетом множественного числа.
Сценарий тестирования
Для этого демо я напишу тестовый пример для следующего простого и понятного сценария.
-
Запустите браузер.
-
Перейдите на сайт Selenium Playground.
-
Выполните Drag and Drop, выбрав первый элемент и перетащив его на второй элемент.
-
Закройте браузер.
Я буду выполнять тест на трех разных браузерах — Firefox, Chrome и Safari — с помощью онлайн Selenium Grid, предоставляемой платформой кросс-браузерного тестирования LambdaTest. Такие инструменты автоматизации тестирования, как LambdaTest, дают вам доступ к онлайн-ферме устройств из 3000+ конфигураций браузеров, устройств и ОС, помогая вам достичь тестового покрытия на максимальном количестве комбинаций браузеров и ОС. Кроме того, LambdaTest также поддерживает веб-тестирование на последней версии Selenium 4.
Шаги по написанию тестового примера перетаскивания
Теперь пришло время написать тесты в Selenium WebDriver для автоматизации тестирования. От создания проекта до выполнения тестов я проведу вас через весь процесс шаг за шагом.
- Использование функции dragAndDrop() путем передачи исходных и целевых веб-элементов
Шаг 1: Создайте новую папку для вашего проекта. Откройте расположение папки через IDE (Visual Studio Code) и инициализируйте проект, выполнив следующую команду в терминале.
npm init -y
Теперь проект инициализирован, и файл package.json создан в корневой папке.
Шаг 2: Установка зависимостей
npm install selenium-webdriver
Шаг 3: **Создайте папку с именем «tests*» в корневой папке проекта. Здесь мы будем хранить все наши тестовые примеры. Внутри этой папки создайте первый файл тестового примера «test.js*».
Шаг 4: Внутри файла test.js добавьте необходимые импорты и конфигурации для запуска теста на облачной сетке, размещенной на LambdaTest.
-
Создайте бесплатный аккаунт в LambdaTest и получите уникальное имя пользователя и ключ доступа.
-
Определите имя пользователя и ключ доступа в файле test.js. Также определите хост сетки.
const USERNAME = «YOUR_USERNAME»; //замените на ваше имя пользователя
const KEY = «YOUR_ACCESSKEY»; //замените на ваш ключ доступаconst GRID_HOST = «hub.lambdatest.com/wd/hub»;
const gridUrl = «https://» + USERNAME + «:» + KEY + «@» + GRID_HOST;- Выполните необходимый импорт.
const { Builder, Key, By } = require(«selenium-webdriver»);
Шаг 5: Определите метод тестирования. Создайте функцию example(), которая будет содержать ваш тестовый скрипт. Не стесняйтесь давать любое имя функции по вашему выбору.
async function example() {
}
В начале этого метода тестирования давайте определим необходимые возможности. Чтобы сгенерировать нужные вам возможности в соответствии с требованиями браузера и версии ОС, воспользуйтесь генератором возможностей LambdaTest.
Здесь я задал возможность запуска тестового случая в браузере Chrome версии 91.0 на платформе windows 10 с помощью Selenium 4.
var capabilities = {
build: "Drag and Drop",
name: "Drag and Drop",
platform: "Windows 10",
browserName: "Chrome",
version: "91.0",
selenium_version: "4.0.0",
chrome.driver: "91.0",
};
Шаг 6: Теперь давайте напишем наш тестовый сценарий внутри метода тестирования с помощью Selenium и JavaScript. Я использую функцию dragAndDrop() и передаю исходный и целевой веб-элементы для выполнения действия перетаскивания.
//To wait for browser to build and launch properly
var driver = await new Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();
//To launch the website
await driver.get(
"[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
);
//To locate the source and target elements
let draggable = driver.findElement(By.id("draggable"));
let droppable = driver.findElement(By.id("droppable"));
//To perform drag and drop operation
await driver.actions().dragAndDrop(draggable, droppable).perform();
//To verify drop success/fail by validating the text inside target element
let targetText = await droppable.getText();
if (targetText === "Dropped!") {
console.log("PASS: Source is dropped at location");
} else {
console.log("FAIL: Source is not dropped at location");
}
//It is always a safe practice to quit the browser after execution
await driver.quit();
Наш окончательный код выглядит следующим образом.
const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your access key
const GRID_HOST = "hub.lambdatest.com/wd/hub";
const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;
const { Builder, Key, By } = require("selenium-webdriver");
async function example() {
try {
var capabilities = {
build: "Drag and Drop",
name: "Drag and Drop",
platform: "Windows 10",
browserName: "Chrome",
version: "91.0",
selenium_version: "4.0.0",
chrome.driver: "91.0",
};
//To wait for browser to build and launch properly
var driver = await new Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();
//To launch the website
await driver.get(
"[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
);
//To locate the source and target elements
let draggable = driver.findElement(By.id("draggable"));
let droppable = driver.findElement(By.id("droppable"));
//To perform drag and drop operation
await driver.actions().dragAndDrop(draggable, droppable).perform();
//To verify drop success/fail by validating the text inside target element
let targetText = await droppable.getText();
if (targetText === "Dropped!") {
console.log("PASS: Source is dropped at location");
} else {
console.log("FAIL: Source is not dropped at location");
}
//It is always a safe practice to quit the browser after execution
await driver.quit();
} catch (err) {
handleFailure(err, driver);
}
}
example();
function handleFailure(err, driver) {
console.error("Something went wrong!n", err.stack, "n");
driver.quit();
}
Кроме того, я добавил блок try-catch для обработки ошибок. Также я предоставил вызов функции для выполнения метода по команде run.
Шаг 7: Выполните тест. Убедитесь, что вы находитесь в нужной папке, и введите в терминале следующую команду.
node test.js
Файл test.js начнет выполняться, и вы сможете наблюдать состояние выполнения теста в реальном времени на панели LambdaTest Dashboard вместе с подробным отчетом, содержащим видео и логи.
LambdaTest помогает вам отслеживать состояние ваших автоматизированных тестов, показывая четкое представление тестов, которые прошли, не прошли и все еще находятся в процессе выполнения. Вы можете просмотреть LambdaTest Analytics, чтобы получить представление о ваших усилиях по автоматизированному тестированию.
Аналогичным образом, вы можете запустить свой тестовый пример в нескольких браузерах, определив соответствующие возможности в вашем тестовом файле.
-
Браузер Firefox
var capabilities = {
build: «Drag and Drop»,
имя: «Drag and Drop»,
платформа : «Windows 10»,
browserName : «Firefox»,
version : «86.0»,
selenium_version : «4.1.0»,
driver_version : «v0.36.0»
};- Браузер Safari
var capabilities = {
build: «Drag and Drop»,
имя: «Drag and Drop»,
платформа: «MacOS Monterey»,
browserName: «Safari»,
версия: «15.0»,
selenium_version: «4.0.0»,
driver_version: «v0.36.0»,
};
- Использование функции dragAndDrop() путем передачи смещений X и Y
В предыдущем разделе этой статьи о том, как реализовать перетаскивание в JavaScript, мы передали исходный и целевой элементы для перетаскивания. Теперь давайте посмотрим код для автоматизации перетаскивания с помощью передачи значений смещения x и y.
Обновленный код для тестового метода выглядит следующим образом:
var driver = await new Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();
//To launch the website
await driver.get(
"[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
);
//To locate the source elements
let draggable = driver.findElement(By.id("draggable"));
//To perform drag and drop by offset
await driver.actions().dragAndDrop(draggable, { x: 50, y: 50 }).perform();
await driver.quit();
Вы также можете просмотреть учебник по Selenium JavaScript, чтобы узнать, как Selenium WebDriver с JavaScript может быть использован для автоматизированного тестирования веб-приложений.
Примечание: Используя JSON.stringify() и **JSON.parse**(), вы можете преобразовывать объекты JavaScript в строки JSON и строки JSON обратно в объекты JavaScript.
Заключение
Selenium WebDriver предоставляет класс Actions, который может быть использован для автоматизации сложных пользовательских взаимодействий в браузере, таких как перетаскивание. В этом учебнике по перетаскиванию JavaScript мы рассмотрели, что такое класс Actions в Selenium и как реализовать перетаскивание в JavaScript при выполнении автоматизированного тестирования Selenium. Надеемся, что этот блог оказался полезным.
Счастливого тестирования!