Drag and drop

Реализация механизма перетаскивания элементов (drag and drop) является неотъемлемой частью взаимодействия с веб-приложениями. Важно, чтобы тесты, имитирующие действия пользователя, корректно обрабатывали эти сценарии, так как они требуют особого подхода в автоматизации. Puppeteer предоставляет все необходимые инструменты для симуляции таких операций.

Проблемы при тестировании Drag and Drop

Основная сложность заключается в том, что стандартные события мыши, такие как mousedown, mousemove, mouseup, часто не подходят для корректной имитации реальных пользовательских действий при перетаскивании. Поскольку эти действия зависят от конкретных координат на экране, необходимо точно определить и воспроизвести траекторию перемещения элемента.

Основные этапы drag and drop

Операция перетаскивания состоит из нескольких ключевых этапов:

  1. Инициация перетаскивания. Для этого обычно используется событие mousedown, которое сигнализирует о начале перетаскивания.
  2. Перемещение объекта. На этом этапе необходимо зафиксировать текущие координаты и постепенно изменять их, что имитирует перемещение элемента.
  3. Завершение перетаскивания. Заключительным этапом является отпускание элемента с помощью события mouseup, что и завершает процесс перетаскивания.

Основные функции Puppeteer для Drag and Drop

Puppeteer предоставляет несколько функций для взаимодействия с элементами на странице. Для имитации drag and drop можно использовать методы page.mouse для симуляции событий мыши.

Пример реализации

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com/drag-and-drop');
  
  const sourceSelector = '#source-element';
  const targetSelector = '#target-element';
  
  const sourceElement = await page.$(sourceSelector);
  const targetElement = await page.$(targetSelector);
  
  const sourceBox = await sourceElement.boundingBox();
  const targetBox = await targetElement.boundingBox();
  
  const startX = sourceBox.x + sourceBox.width / 2;
  const startY = sourceBox.y + sourceBox.height / 2;
  
  const endX = targetBox.x + targetBox.width / 2;
  const endY = targetBox.y + targetBox.height / 2;
  
  // Симуляция перетаскивания
  await page.mouse.move(startX, startY);
  await page.mouse.down();
  await page.mouse.move(endX, endY);
  await page.mouse.up();
  
  await browser.close();
})();

Этот скрипт делает следующее:

  1. Открывает браузер и переходит на страницу, где доступна функциональность drag and drop.
  2. Находит элементы, которые будут участвовать в перетаскивании, с помощью селекторов #source-element и #target-element.
  3. Получает координаты этих элементов через метод boundingBox().
  4. Симулирует движение мыши с помощью метода mouse.move(), начиная с центра исходного элемента и заканчивая в центре целевого элемента.
  5. С помощью mouse.down() и mouse.up() имитируются нажатие и отпускание кнопки мыши.

Точность координат и отступы

Важно учитывать, что элементы на веб-странице могут быть расположены не только по оси X и Y, но и иметь отступы (margin, padding). Поэтому всегда стоит точно вычислять центральную точку элемента с учётом всех его стилей. Метод boundingBox() помогает избежать ошибок, связанных с неточными вычислениями.

Механизм ожидания

Перетаскивание элемента может повлиять на состояние страницы, например, изменить расположение других элементов. Для правильной синхронизации действий можно использовать методы ожидания, такие как waitForSelector, чтобы удостовериться в том, что целевой элемент или страница в целом находятся в ожидаемом состоянии после перетаскивания. 

await page.waitForSelector(targetSelector, { visible: true });

Такой подход помогает гарантировать, что элемент появился на странице и готов принять перетаскиваемый объект.

Взаимодействие с динамическими элементами

При работе с динамически изменяющимися элементами, например, с элементами, которые появляются только после определённых действий или асинхронных запросов, может возникнуть необходимость в дополнительной синхронизации. В этих случаях используется метод waitForSelector() для ожидания появления элемента перед его использованием.

Интеракция с кастомными элементами drag and drop

В современных веб-приложениях часто используется кастомная реализация механизма перетаскивания с помощью JavaScript-библиотек. Такие решения могут генерировать собственные события и обрабатывать их нестандартно. В таких случаях стандартные методы мыши могут не сработать.

Для корректной имитации взаимодействия с такими элементами необходимо анализировать, какие именно события (например, dragstart, drag, dragend) должны быть инициированы, и использовать их в тестах. Puppeteer позволяет взаимодействовать с этими событиями через API page.evaluate(): 

await page.evaluate((source, target) => {
  const sourceElement = document.querySelector(source);
  const targetElement = document.querySelector(target);
  
  const dragStartEvent = new DragEvent('dragstart', { bubbles: true });
  sourceElement.dispatchEvent(dragStartEvent);

  const dragOverEvent = new DragEvent('dragover', { bubbles: true });
  targetElement.dispatchEvent(dragOverEvent);

  const dropEvent = new DragEvent('drop', { bubbles: true });
  targetElement.dispatchEvent(dropEvent);
}, sourceSelector, targetSelector);

В этом примере создаются и отправляются события для имитации стандартного drag and drop с использованием нативных событий браузера.

Тестирование Drag and Drop в разных браузерах

Puppeteer использует Chromium, но важно помнить, что реализация drag and drop может варьироваться в разных браузерах. Для тестирования в других браузерах, таких как Firefox, можно использовать настройки Puppeteer, позволяя проводить дополнительные проверки совместимости. 

const browser = await puppeteer.launch({ product: 'firefox' });

Этот метод позволяет провести тесты не только в Chromium, но и в Firefox, что важно для обеспечения кроссбраузерной совместимости.

Заключение

Тестирование drag and drop в Puppeteer требует точности при симуляции событий мыши и внимательности к деталям координат и состояния элементов. Puppeteer предоставляет мощные инструменты для автоматизации таких сценариев, включая возможность работать с кастомными событиями и ожиданиями. Правильная настройка тестов для drag and drop поможет обеспечить надёжную автоматизацию даже для сложных интерактивных веб-приложений.

Оглавление