Тестирование виджетов amCharts 5: поиск элементов и синтаксис

При автоматизации тестирования веб-приложений часто возникает задача взаимодействия с графическими виджетами, такими как диаграммы amCharts 5. Эти библиотеки рендерят контент через технологию SVG (масштабируемая векторная графика), что усложняет поиск стандартных HTML-элементов. В этой статье мы подробно разберём, как искать элементы на виджете amCharts 5, какой синтаксис использовать и как применять инструменты разработчика (DevTools) для составления стабильных локаторов.

Особенности DOM-структуры amCharts 5

amCharts 5 создаёт диаграммы внутри контейнера, используя SVG-теги. В отличие от обычных HTML-элементов (div, button), графические компоненты (столбцы, линии, метки) представлены как <path>, <rect>, <text> и другие SVG-элементы. Это значит, что стандартные CSS-селекторы по ID или классам могут не сработать, если разработчик не задал явные атрибуты. Для успешного тестирования необходимо работать с атрибутами aria-label, data-value, role или использовать XPath по тексту и вложенности.

Инструменты DevTools для анализа виджета

Чтобы понять, какие элементы доступны для поиска, откройте панель разработчика (F12) и перейдите на вкладку Elements (Элементы). Найдите контейнер диаграммы (обычно это <div> с классом am5-container или am5-chart). Разверните его и изучите дочерние SVG-группы (<g>). Обратите внимание на атрибуты:

• aria-label - часто содержит текст тултипа или название серии.
• data-value - числовое значение точки данных.
• role - может быть 'graphics-symbol' или 'graphics-object'.
• class - динамические классы, которые генерируются amCharts (например, 'am5-Column').

Используйте поиск по строке в DevTools (Ctrl+F), чтобы проверить, уникален ли локатор. Например, введите //*[contains(@aria-label, '2024')] для поиска элемента с меткой года.

Синтаксис поиска элементов в Selenium и Playwright

Для автотестов на Python с Selenium или Playwright применяйте следующие стратегии:

Поиск по тексту (XPath)

Если на диаграмме есть текстовая метка (например, название месяца), используйте XPath: //*[local-name()='text' and text()='Январь']. В Selenium это выглядит так: driver.find_element(By.XPATH, "//*[local-name()='text' and contains(text(), 'Январь')]").

Поиск по атрибуту aria-label

amCharts 5 автоматически добавляет aria-label к интерактивным элементам (столбцам, точкам). Пример: //*[@aria-label='Значение: 150']. Это надёжный способ, если данные статичны.

Поиск по CSS-селектору

Если элемент имеет статический класс, например am5-Column, используйте CSS: .am5-Column. Учтите, что классы могут меняться при обновлении библиотеки.

Практические рекомендации для стабильных тестов

• Избегайте привязки к координатам - они меняются при изменении размера окна.
• Используйте data-атрибуты - попросите разработчика добавить data-testid на ключевые элементы.
• Работайте с тултипами - наведите курсор на столбец и проверьте всплывающую подсказку через aria-live.
• Тестируйте через canvas - если виджет использует Canvas, применяйте библиотеки типа canvas-ocr или проверяйте состояние через JavaScript.

Часто задаваемые вопросы

Ниже собраны ответы на типичные вопросы тестировщиков, работающих с amCharts 5.