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

Cypress предоставляет удобные методы для работы с атрибутами элементов на странице, что позволяет тестировать состояние интерфейса и корректность HTML-разметки. Атрибуты могут включать стандартные HTML-поля (id, class, href, src и др.), пользовательские атрибуты (data-*) и свойства элементов (disabled, checked, value).

Получение значения атрибута

Метод .should() и команда .invoke() позволяют проверять или получать значения атрибутов. Самый простой способ — использовать invoke('attr', '<название_атрибута>'). Пример:

cy.get('a.nav-link')
  .invoke('attr', 'href')
  .should('eq', '/home');

В данном примере Cypress получает атрибут href у ссылки с классом nav-link и проверяет, что он равен /home. Метод invoke возвращает значение атрибута напрямую, что удобно для дальнейших сравнений и логики теста.

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

Для проверки, присутствует ли атрибут, применяется метод .should('have.attr', '<название>', '<значение>') или .should('have.attr', '<название>') без указания значения:

cy.get('input[type="checkbox"]')
  .should('have.attr', 'checked');

Если атрибут должен иметь конкретное значение:

cy.get('button.submit')
  .should('have.attr', 'type', 'submit');

Работа с пользовательскими атрибутами data-*

Современные приложения часто используют атрибуты data-* для тестирования. Cypress отлично поддерживает их проверку:

cy.get('[data-test="login-button"]')
  .should('have.attr', 'data-test', 'login-button');

Для динамических значений удобно использовать invoke:

cy.get('[data-test="user-id"]')
  .invoke('attr', 'data-user-id')
  .then((id) => {
    expect(Number(id)).to.be.greaterThan(0);
  });

Проверка состояния элементов через атрибуты

Некоторые состояния элементов напрямую отражаются в атрибутах: disabled, checked, readonly, selected. Их проверка особенно важна для форм и интерактивных элементов.

cy.get('input[name="email"]')
  .should('be.disabled');

cy.get('input[type="checkbox"]')
  .should('be.checked');

Методы be.disabled и be.checked работают через атрибуты и свойства DOM, что обеспечивает корректную проверку на разных браузерах.

Изменение и проверка после действий

Cypress позволяет проверять изменения атрибутов после взаимодействия с элементом. Например, кнопка может становиться активной после заполнения формы:

cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('password123');
cy.get('button.login')
  .should('not.be.disabled')
  .click();

После клика можно проверить, что атрибут изменился:

cy.get('button.login')
  .should('have.attr', 'aria-pressed', 'true');

Совмещение с другими командами

Проверка атрибутов часто используется вместе с другими командами Cypress: .contains(), .find(), .within(). Это позволяет локализовать элемент внутри контейнера и убедиться в корректности его состояния.

cy.get('form#signup').within(() => {
  cy.get('input[name="email"]').should('have.attr', 'placeholder', 'Введите email');
});

Сравнение нескольких атрибутов

Cypress позволяет проверять несколько атрибутов одновременно, используя цепочку команд .should():

cy.get('img.logo')
  .should('have.attr', 'src', '/images/logo.png')
  .and('have.attr', 'alt', 'Company Logo');

Это упрощает тестирование комплексных элементов без необходимости дублирования кода.

Практические рекомендации

  • Для статических атрибутов лучше использовать should('have.attr', '<название>', '<значение>').
  • Для динамических значений или вычислений подходит invoke('attr', '<название>') с последующей проверкой через then.
  • Использование data-* атрибутов делает тесты более стабильными и независимыми от внешнего CSS или классов.
  • Проверка состояния элементов через атрибуты обеспечивает надежность тестов, особенно для форм и интерактивных компонентов.

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

Оглавление