Перетаскивание элементов drag and drop

Перетаскивание элементов в Playwright — это одна из важных возможностей для взаимодействия с элементами на веб-странице, позволяющая эмулировать действия пользователя, такие как перетаскивание и отпускание объектов на странице. Этот процесс полезен для тестирования интерфейсов, в которых элементы могут быть перемещены, такие как списки задач, канбан-доски, редакторы и другие интерактивные компоненты.

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

Playwright предоставляет мощный API для реализации таких сценариев, поддерживающий как базовые действия, так и более сложные взаимодействия с элементами, включая перетаскивание.

Работа с перетаскиванием элементов в Playwright

Playwright включает метод dragAndDrop(), который используется для эмуляции операции перетаскивания элемента из одной точки в другую. Этот метод позволяет указать исходный элемент и целевой, куда нужно переместить элемент.

Пример базового кода для перетаскивания:

const { test, expect } = require('@playwright/test');

test('drag and drop', async ({ page }) => {
  await page.goto('https://example.com'); // Переход на страницу
  const source = await page.locator('#source'); // Исходный элемент
  const target = await page.locator('#target'); // Целевой элемент

  // Перетаскивание элемента
  await source.dragAndDrop(target);

  // Проверка результата
  await expect(target).toHaveText('Перемещено'); // Ожидаемый результат
});

В этом примере элемент с идентификатором #source перемещается в элемент с идентификатором #target. После выполнения операции можно проверить, что целевой элемент изменил свой текст на “Перемещено”.

Поддержка событий при перетаскивании

Playwright позволяет работать не только с самими элементами, но и с событиями, которые могут происходить во время операции перетаскивания. Например, можно следить за событиями dragstart, dragend, drop или другими пользовательскими событиями.

Использование событий в перетаскивании:

const { test, expect } = require('@playwright/test');

test('drag and drop with events', async ({ page }) => {
  await page.goto('https://example.com');

  const source = await page.locator('#source');
  const target = await page.locator('#target');

  // Подписка на события
  page.on('dragstart', () => console.log('Перетаскивание начато'));
  page.on('dragend', () => console.log('Перетаскивание завершено'));
  page.on('drop', () => console.log('Элемент был перемещен'));

  await source.dragAndDrop(target);

  // Ожидание завершения перетаскивания
  await expect(target).toHaveText('Перемещено');
});

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

Эмуляция перетаскивания с точными координатами

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

Пример перетаскивания с указанием координат:

const { test, expect } = require('@playwright/test');

test('drag and drop with coordinates', async ({ page }) => {
  await page.goto('https://example.com');

  const source = await page.locator('#source');
  const target = await page.locator('#target');

  // Получение координат целевого элемента
  const targetBox = await target.boundingBox();

  // Перетаскивание с координатами
  const sourceBox = await source.boundingBox();
  const offsetX = targetBox.x - sourceBox.x;
  const offsetY = targetBox.y - sourceBox.y;

  await source.mouse.move(sourceBox.x + sourceBox.width / 2, sourceBox.y + sourceBox.height / 2);
  await source.mouse.down();
  await source.mouse.move(targetBox.x + offsetX, targetBox.y + offsetY);
  await source.mouse.up();

  // Проверка результата
  await expect(target).toHaveText('Перемещено');
});

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

Отладка перетаскивания

Для отладки перетаскивания и выявления возможных проблем можно использовать различные методы и подходы, включая создание скриншотов и запись видео.

Пример записи видео:

const { test, expect } = require('@playwright/test');

test('drag and drop with video recording', async ({ page }) => {
  await page.goto('https://example.com');

  await page.video().start();

  const source = await page.locator('#source');
  const target = await page.locator('#target');

  await source.dragAndDrop(target);

  // Проверка результата
  await expect(target).toHaveText('Перемещено');

  await page.video().stop();
});

Это позволяет зафиксировать все действия, связанные с перетаскиванием, и воспроизвести их для последующего анализа.

Перетаскивание в динамических интерфейсах

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

Пример работы с динамическими элементами:

const { test, expect } = require('@playwright/test');

test('drag and drop in dynamic interface', async ({ page }) => {
  await page.goto('https://example.com');

  const source = await page.locator('#source');
  const target = await page.locator('#target');

  // Ожидание появления целевого элемента
  await target.waitFor({ state: 'visible' });

  // Перетаскивание
  await source.dragAndDrop(target);

  // Проверка результата
  await expect(target).toHaveText('Перемещено');
});

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

Важные замечания

  1. Поддержка браузеров. Playwright поддерживает перетаскивание в всех поддерживаемых браузерах (Chromium, Firefox, WebKit), что позволяет тестировать функционал на разных платформах.

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

  3. Местоположение элементов. В некоторых случаях элементы могут быть скрытыми или перекрытыми другими объектами. В таких ситуациях рекомендуется использовать методы проверки видимости элементов или прямую работу с их координатами.

Перетаскивание в Playwright — это мощный инструмент для тестирования интерактивных элементов веб-приложений. При правильном подходе к написанию тестов можно убедиться в стабильности и функциональности интерфейсов, которые используют операции перетаскивания.

Оглавление