В данной статье мы узнаем, как получить правильные атрибуты элемента и осуществить доступ к различным свойствам выбранного элемента в HTML.
Содержание:
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Получение текста элемента
Чтобы получить правильные атрибуты элемента, полезно понимать некоторые основные моменты, касающиеся различных элементов HTML. Давайте разберем ситуацию на примере. Допустим, у нас есть два элемента:
<div>Please type in your name:</div> <input type="text"></input>
В ходе тестирования будет заполнено поле ввода, а затем проведена проверка, чтобы понять, правильно ли расположен текст внутри поля. С помощью обоих элементов вы можете видеть текст на странице. Но если вы хотите “проверить текст” на этих элементах, то для каждого из них нужно использовать несколько иной подход:
cy
.get('div')
.should('have.text', 'Please type in your name:')
cy
.get('input')
.type('Rick Sanchez')
.should('have.value', 'Rick Sanchez')
Разница заключается в том, что наш div элемент содержит определенный текст, а input элементы в HTML используются для вставки значения. Для изучения различных типов полей форм ввода рекомендуем ознакомиться с W3Schools docs.
Получение атрибута
В процессе работы вам может понадобиться проверить адреса якорных ссылок. Вы можете получить href атрибут из элемента якоря (anchor). Допустим, у нас есть следующая ссылка:
<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() команду, чтобы проверить, поставлен ли флажок в элементе чекбокс (checkbox).
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;
});
Вы так же можете столкнуться с ситуацией, когда элемент для ввода входных данных перерисовывается во время прохождения теста и удаляет введенные данные. Чтобы обойти эту проблему существует специальная команда “type and check”, которая выполняет повторную попытку, если ввод данных не сработал должным образом:
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() val заключается в том, что передача второго аргумента в эту функцию позволяет изменять значение и (вроде как) имитировать вставку текста в textarea. Простой пример выглядит примерно так:
cy
.get("input")
.invoke('val', 'paste this text')
Надеемся, перечисленные в статье лайфхаки по работе с входными данными, атрибутами и свойствами элементов пригодятся вам в работе тестировщиком.
Перевод статьи «Cypress basics: Check attributes, value and text».