Home

Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Привет, и с вами снова цикл статей по основам Cypress!

Получение текста элемента

Чтобы получить правильные атрибуты элемента, хорошо бы понимать основы различных HTML-элементов. Приведу пример. Допустим, у нас два элемента:

<div>Пожалуйста, введите имя:</div>
<input type="text"></input>

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

cy
  .get('div')
  .should('have.text', ' Пожалуйста, введите имя:')
 
cy
  .get('input')
  .type('Rick Sanchez')
  .should('have.value', 'Rick Sanchez')

Разница в том, что div-элемент содержит определенный текст, но элементы input используются в HTML для ввода значений. Очень советую изучить документацию и разобраться в различных типах полей ввода.

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

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

<a href="https://docs.cypress.io">Read the docs!</a>

Для проверки атрибута href можно написать примерно такой тест:

cy
  .get('a')
  .invoke('attr', 'href')
  .should('eq', 'https://docs.cypress.io')

К тому же можно проверить, что ссылка валидна, сделав http-запрос:

cy
  .get('a')
  .invoke('attr', 'href')
  .then(href => {
 
    cy
      .request(href)
      .its('status')
      .should('eq', 200);
 
});

Вызов свойств

Используя .invoke('prop'), можно получить доступ к различным свойствам выбранного элемента. Полный список этих свойств можно найти в Chrome DevTools. Для доступа к ним кликните по элементу и откройте панель свойств.

Как можно видеть, вариантов тут много. К примеру, можно воспользоваться командой .invoke(), чтобы проверить, отмечен ли чекбокс:

cy
  .get('input')
  .invoke('prop', 'checked')
  .then(state => {
 
    console.log(`checkbox is ${state ? 'checked' : 'not checked'}`)
 
});

Помните, как мы тестировали значение конкретного ввода? Используя .invoke(), мы можем передать это значение другой функции, вот так:

cy
  .get('input')
  .type('Rick Sanchez')
  .invoke('val')
  .then(val => {
 
    const inputValue = val;
 
  });

Раньше у меня в приложении был плохой input-элемент, который рендерился в ходе теста заново, удаляя введенные данные. Я написал специальную команду "напечатать и проверить", которая пробовала повторный ввод, если input неверно работал.

Cypress.Commands.add('typeAndCheck', { prevSubject: true }, (subject, input) => {
 
  cy
    .wrap(subject)
    .type(input);
 
  cy
    .wrap(subject)
    .then(($subj) => {
      if ($subj[0].value !== input) {
 
         cy
          .wrap(subject)
          .clear({ force: true })
          .typeAndCheck(input);
 
        }
      });
 
});

Это довольно грязное решение. Рекомендую прочитать эту отличную статью об идентификации проблем кода (вышеописанная ситуация – одна из них!), или статью Глеба Бахмутова о том, когда тесту надо разрешать печатать.

Другая интересная штука с .invoke() в том, что передача второго аргумента этой функции позволит вам изменить значение и (типа) имитировать вставку текста в текстовую область. Я писал об этом недавно, можно ознакомиться. Простой пример будет выглядеть так:

cy
  .get("input")
  .invoke('val', 'paste this text')

Надеюсь, вам понравилось!

Обсудить в форуме