SVG тестирование

Тестирование SVG (Scalable Vector Graphics) в веб-приложениях имеет свои особенности, так как элементы SVG отличаются от стандартных HTML-элементов. В отличие от обычных тегов <div> или <button>, SVG-элементы находятся в отдельном пространстве имён, что влияет на способы их поиска и взаимодействия с ними через Cypress.

Поиск SVG-элементов

Для выбора SVG-элементов можно использовать стандартные селекторы CSS, но важно помнить, что некоторые методы, такие как .contains(), могут работать иначе, так как текст внутри SVG находится в элементах <text>.

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

// Поиск по тегу
cy.get('svg circle')

// Поиск по атрибуту
cy.get('svg [data-testid="icon"]')

// Поиск текста внутри SVG
cy.get('svg text').contains('Label')

При использовании сложных SVG-графиков (например, диаграмм D3.js) часто применяются атрибуты id, class или data-*, чтобы сделать селекторы устойчивыми к изменениям структуры DOM.

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

SVG-элементы имеют свои атрибуты, такие как cx, cy, r, fill, stroke. Cypress позволяет проверять их с помощью .should('have.attr', ...):

cy.get('svg circle#dot')
  .should('have.attr', 'cx', '50')
  .and('have.attr', 'cy', '50')
  .and('have.attr', 'r', '10')
  .and('have.attr', 'fill', 'red')

Для сложных проверок, например динамического цвета или позиции, можно использовать функцию .then() для извлечения атрибута и проверки через Jav * aScript:

cy.get('svg circle#dot').then($el => {
  const fill = $el.attr('fill')
  expect(fill).to.match(/red|blue/)
})

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

Клик, наведение и другие действия в SVG работают через .click(), .trigger(), но важно учитывать координаты. Если элемент маленький или прозрачный, клик может не сработать.

Примеры клика по центру элемента:

cy.get('svg circle#dot')
  .click({ force: true }) // игнорирует перекрытия и размеры

Клик по конкретным координатам внутри SVG:

cy.get('svg')
  .click(100, 50) // x = 100, y = 50

Использование {force: true} часто необходимо для скрытых или частично перекрытых элементов.

Тестирование динамических SVG-графиков

Для графиков, построенных с помощью библиотек D3.js или Chart.js, ключевые моменты тестирования:

  1. Проверка наличия элементов после рендеринга
cy.get('svg path').should('have.length', 5) // проверка числа линий
  1. Проверка данных через атрибуты

Многие библиотеки хранят данные в data-* атрибутах:

cy.get('svg rect[data-value="20"]').should('exist')
  1. Проверка стилей и цвета
cy.get('svg path#line')
  .should('have.attr', 'stroke', '#00f')
  1. Тестирование анимаций

Для проверки анимаций можно использовать .invoke('attr', 'd') или cy.wait() с последующей проверкой координат:

cy.get('svg path#line')
  .invoke('attr', 'd')
  .then(d => {
    expect(d).to.include('M0,0')
  })

Работа с группами элементов

SVG часто использует <g> для объединения нескольких объектов. Cypress позволяет работать с ними как с контейнерами:

cy.get('svg g#group1 circle')
  .should('have.length', 3)
  .each($el => {
    cy.wrap($el).should('have.attr', 'fill', 'blue')
  })

Метод .each() удобен для итерации по элементам и проверки их индивидуальных свойств.

Советы по устойчивому тестированию SVG

  • Использовать атрибуты data-* для элементов, чтобы тесты не ломались при изменении структуры DOM.
  • Не полагаться на текст внутри SVG для поиска элементов, так как он находится в <text>.
  • Проверять не только визуальные свойства (fill, stroke), но и геометрические (cx, cy, r, x, y).
  • Для динамических графиков использовать cy.wait() с последующей проверкой атрибутов, чтобы дождаться рендеринга.
  • При клике по маленьким или перекрытым элементам применять {force: true} или точные координаты.

Примеры комплексного теста SVG

cy.get('svg g#barChart rect')
  .should('have.length', 5)
  .each(($bar, index) => {
    cy.wrap($bar)
      .should('have.attr', 'height')
      .then(height => {
        expect(parseInt(height)).to.be.greaterThan(0)
      })
  })

cy.get('svg g#barChart rect')
  .first()
  .click({ force: true })

cy.get('svg text#tooltip')
  .should('contain.text', 'Value: 50')

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

SVG-тестирование в Cypress требует внимания к деталям: атрибуты, координаты и особенности пространства имён SVG. Правильное использование селекторов, проверка атрибутов и взаимодействие через координаты обеспечивают стабильные и надёжные тесты.

Оглавление