SVG взаимодействие

SVG (Scalable Vector Graphics) — это формат для описания двухмерной векторной графики, который широко используется на веб-страницах. Взаимодействие с элементами SVG в контексте тестирования с использованием WebdriverIO может стать важной частью работы, так как часто элементы SVG используются в качестве кнопок, иконок или других интерактивных элементов.

WebdriverIO предоставляет возможность работать с элементами SVG, однако важно понимать, что взаимодействие с ними отличается от работы с обычными HTML-элементами. SVG состоит из различных элементов, таких как <svg>, <path>, <circle>, <rect>, и каждый из них имеет свои особенности в взаимодействии.

Структура SVG

SVG-документ представляет собой набор XML-элементов. На веб-странице это может быть как встроенное SVG, так и внешний файл. Важно различать, с какими элементами внутри SVG нужно взаимодействовать. Например, <path> может представлять сложную фигуру, <circle> — круг, а <rect> — прямоугольник.

Для того чтобы эффективно взаимодействовать с элементами SVG, необходимо сначала понять, как можно локализовать эти элементы с помощью WebdriverIO.

Локализация элементов SVG

В WebdriverIO можно использовать стандартные методы поиска элементов, такие как browser.$(selector), но для точной локализации элементов SVG требуется специфичный подход.

Использование CSS-селекторов

WebdriverIO поддерживает использование CSS-селекторов для поиска элементов в SVG. Однако, так как SVG элементы могут иметь разные пространства имен, важно правильно составлять селекторы.

Пример поиска по классу в SVG:

const svgElement = await browser.$('svg .my-class');

Однако, в случае если элемент не имеет классов или идентификаторов, можно использовать более детализированные селекторы. Например, если нужно выбрать элемент по тегу <path>, это можно сделать следующим образом:

const pathElement = await browser.$('svg path');

Для точной локализации часто используют атрибуты, например, d для элемента <path>:

const pathElement = await browser.$('svg path[d="M10 10 H 90 V 90 H 10 L 10 10"]');

XPath для поиска

XPath также является мощным инструментом для поиска элементов внутри SVG. XPath позволяет работать с любыми атрибутами и даже с содержимым текста внутри элементов.

Пример поиска элемента с использованием XPath:

const svgElement = await browser.$('//svg//path[@d="M10 10 H 90 V 90 H 10 L 10 10"]');

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

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

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

Клик по элементам SVG

Для клика по элементу SVG используется стандартный метод WebdriverIO:

await pathElement.click();

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

Для работы с элементами SVG, которые могут иметь специфичные области для кликов (например, в случае с <circle> или <rect>), важно убедиться, что элемент видим и доступен для взаимодействия.

Получение атрибутов SVG

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

Пример получения атрибута d для элемента <path>:

const pathData = await pathElement.getAttribute('d');
console.log(pathData);

Аналогичным образом можно получать другие атрибуты, такие как fill, stroke, transform и т. д.

Изменение атрибутов SVG

WebdriverIO позволяет не только получать, но и изменять атрибуты элементов SVG. Для этого используется метод setAttribute.

Пример изменения атрибута fill для элемента <path>:

await pathElement.setAttribute('fill', 'red');

Это позволяет динамически менять внешний вид элементов на странице во время теста.

Сложности при взаимодействии с SVG

Работа с элементами SVG может столкнуться с рядом трудностей. Одна из них — это необходимость корректной работы с координатами и размерами, так как элементы внутри SVG часто имеют свои собственные системы координат. Например, при клике на элемент <circle> важно учитывать его радиус и положение относительно родительского контейнера.

Ещё одной сложностью является использование событий. Взаимодействие с элементами SVG может требовать обработки специфичных для этого формата событий, таких как mouseover, mouseout, click и другие.

Работа с внешними SVG-файлами

В случае использования внешних SVG-файлов (<img src="file.svg"> или <object type="image/svg+xml" src="file.svg">), взаимодействие с их элементами не так прямолинейно. WebdriverIO не может напрямую манипулировать содержимым внешних SVG, так как это требует работы с внутренним содержимым файла.

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

Пример теста с SVG

Простой пример теста для проверки клика по элементу SVG:

describe('SVG Element Test', () => {
  it('should click on a path element in SVG', async () => {
    await browser.url('https://example.com/svg');
    
    const pathElement = await browser.$('svg path[d="M10 10 H 90 V 90 H 10 L 10 10"]');
    
    await pathElement.click();
    
    // Проверка какого-либо действия после клика
    const result = await browser.$('.result');
    await expect(result).toBeDisplayed();
  });
});

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

Заключение

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

Оглавление