Пожалуй, .contains() – наиболее полюбившаяся команда в ПО Cypress, особенно если вы разработчик или тестировщик программного обеспечения.
Хотя ее наименование и звучит как своего рода утверждение, но, по факту, это классическая команда тестового выбора.
Естественно, можно поспорить, что абсолютно все команды выбора приводят к существованию элементов в принципе, но в данном материале речь пойдет немного не о том.
На простом примере продемонстрируем, чем же конкретно данная команда так полезна и почему её следует взять на вооружение.
Инструмент Cypress
Итак, начнем со структуры. Она крайне проста и запомнить ее не составит труда:
<h1>Car and another transports</h1>
<ul>
<li>Car ????</li>
<li>Bicycle????</li>
<ul>
Простейшее применение — определиться с элементом, который содержит конкретный текстовый блок.
Если пользователь ознакомлен с данной командой, то он определенно знает, как правильно выбрать элемент, на основе использования текста:
cy
.contains(‘Car’)
Очень просто и удобно. Как итог, будет выбрано оглавление.
И при этом не придется вводить весь текст полностью — достаточно добавить слово Cars.
К слову, если бы мы слово Car просто использовали в роли текста, итог был совершенно другим. Car появился бы дважды.
По умолчанию, .contains() может искать по DOM целые фразы и всегда возвращать первый элемент с необходимым набором характеристик.
Сужение поисковой выдачи
Далее предлагаем уменьшить поиск с родительских, детских и дуальных команд до анализа последних.
cy
.contains(‘Car’) // будет выбрано оглавление
cy
.get(‘li’)
.contains(‘Car’) // будет выбран «Car ????»
Подобная команда дает возможность обнаружить требуемый элемент, поэтому, если у вас в тесте есть кнопочка <button>, текст которой содержится во внутренней части элемента <span>, будет выбран <button>.
С особенностями приоритизации в Cypress можно более детально ознакомиться по этой ссылке.
Но есть и другой вариант выбора необходимого элемента — процесс передачи двух аргументов внутрь функции .contains(). В таком случае, начальный элемент — это, непосредственно, селектор, который может определять сферу поиска нашего элемента:
cy
.contains(‘ul’, ‘Pear’)
Корректное соответствие тексту
Если нет особой принципиальности, строчные или же прописные будут буквы, в функцию можно добавить вспомогательный параметр, который приказывает игнорировать буквенный регистр:
cy
.contains(‘cars’, { matchCase: false })
Это крайне полезно, если пользовательские тесты расположены в отдельной переменной или же внутри файла.
Как вариант, можно использовать разнообразные мутации выбранного языка. Если же и это не поможет, можно воспользоваться regex для нахождения любой строчки:
cy
.contains(/Car/)
Вот и всё. Данная команда звучит как переменная и может реализовываться так, но базовая цель данной функции в выборе подходящего элемента.
Команда .contains() – полезная и эффективная замена xPath и сложным Selenium CSS-селекторам.
Оставить комментарий