Работа с SVG

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

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

Основные принципы работы с SVG в Puppeteer

  1. Представление SVG в DOM

    В отличие от растровых изображений, которые могут быть вставлены как теги <img>, SVG может быть встроено в HTML-документ непосредственно в виде кода, или загружено как внешнее изображение через атрибут src. В случае с внутренним SVG, его элементы могут быть доступны через стандартный DOM, что позволяет легко манипулировать ими с помощью Puppeteer.

    Пример встраивания SVG в HTML: 

    <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

    При таком подходе элементы SVG, такие как <circle>, <rect>, <path> и другие, становятся частью DOM-дерева, и с ними можно работать как с обычными элементами.

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

    В Puppeteer элементы SVG можно выбирать и манипулировать ими с использованием стандартных методов API. Например, для работы с аттрибутами SVG можно использовать метод getAttribute, а для изменения атрибутов — setAttribute.

    Пример выбора элемента SVG и изменения его атрибута: 

    const svgElement = await page.$(&
await svgElement.evaluate((circle) => {
  circle.setAttribute('fill', 'blue');
});

    В данном примере выполняется изменение цвета заливки круга на синюю.

  3. Использование метода evaluate

    Для работы с элементами SVG внутри страницы можно использовать метод evaluate, который позволяет выполнять JavaScript код непосредственно в контексте страницы. Это полезно для более сложных операций с аттрибутами или стилями.

    Например, можно извлечь значения атрибутов элементов SVG: 

    const circleColor = await page.$eval('svg circle', (circle) => circle.getAttribute('fill'));
console.log(circleColor);  // Output: "yellow"

    Этот подход работает как для получения, так и для изменения данных в SVG-элементах.

Проблемы, которые могут возникнуть при работе с SVG

  1. Манипуляции с координатами и размерами

    Некоторые элементы SVG, такие как circle, rect, line, используют атрибуты, которые зависят от системы координат (например, cx, cy для круга или x, y для прямоугольников). Когда требуется точно взаимодействовать с этими элементами, важно учитывать начальные координаты и масштаб страницы. Для проверки правильности позиционирования можно использовать методы Puppeteer для захвата снимков экрана, но для более точных манипуляций следует обращаться к атрибутам элементов.

  2. Проблемы с рендерингом

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

    Пример: 

    await page.waitForSelector('svg rect');

    Это гарантирует, что элементы SVG были отрисованы перед началом выполнения теста.

  3. Анимации и трансформации

    SVG часто используется для анимаций (например, с помощью SMIL или CSS). В Puppeteer есть возможность ожидать изменения состояния элементов, но важно учитывать, что анимации могут повлиять на визуальное отображение и поведение элементов.

    Для работы с анимациями можно использовать waitForFunction, который позволяет ожидать, когда анимация завершится или когда элемент достигнет нужного состояния: 

    await page.waitForFunction(() => {
  const rect = document.querySelector('svg rect');
  return rect.getAttribute('x') === '200';  // Ожидаем, что прямоугольник окажется на позиции x=200
});

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

Проверка состояния и атрибутов SVG

Работа с аттрибутами SVG имеет свои особенности. Например, атрибуты такие как fill, stroke, opacity и другие влияют на внешний вид элементов, но они не всегда представлены в виде CSS-свойств, особенно если они заданы через атрибуты в самом SVG. Это важно учитывать при проверке визуального состояния страницы.

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

const strokeWidth = await page.$eval('svg circle', (circle) => circle.getAttribute('stroke-width'));
console.log(strokeWidth);  // Output: "4"

Для более точной проверки состояния элементов SVG, можно также использовать методы для получения стилей через getComputedStyle, если элементы SVG стилизуются через CSS.

Тестирование визуальных изменений SVG

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

Пример снятия скриншота SVG: 

await page.screenshot({ path: 'svg_image.png', clip: { x: 0, y: 0, width: 100, height: 100 } });

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

Работа с внешними SVG-изображениями

Если SVG используется как внешний ресурс, например, через тег <img>, то доступ к аттрибутам и манипуляции с графикой будут ограничены. Однако, Puppeteer всё равно позволяет работать с такими изображениями, проверяя их отображение и загруженность.

Пример работы с внешним SVG: 

await page.goto('https://example.com/image.svg');
const imageLoaded = await page.evaluate(() => document.querySelector('img').complete);
console.log(imageLoaded);  // Output: true, если изображение загружено

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

Заключение

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

Оглавление