contains() – ценная команда в Cypress

Перевод статьи «.contains() – an overlooked gem in Cypress».

.contains() – одна из моих любимых команд в Cypress. Хотя название этой команды звучит как утверждение, на самом деле она является командой выбора.

Очень важно понимать это различие. Несколько запутанное название команды .contains() может привести к тому, что вы не заметите ее возможностей. Часть вечной борьбы при тестировании заключается в том, чтобы найти подходящий селектор и при этом сделать тест легко читаемым. Команда.contains() полагается на выбор элемента по тексту, но в действительности она может делать гораздо больше.

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Давайте рассмотрим, что именно делает эту команду такой замечательной.

Наше приложение имеет довольно простую структуру:

<h1>Apples and other fruits</h1>
<ul>
  <li>Apple 🍏</li>
  <li>Pear 🍐</li>
<ul>

Простое использование – выделение элемента, содержащего текст

Если вы знакомы с этой командой, то, вероятно, уже знаете, что она помогает выделить элемент с помощью текста:

cy
  .contains('Apples')

Все просто и понятно. Вы знаете, что она сделает. Команда выделит наш заголовок. Обратите внимание, что нам даже не нужно писать весь текст, достаточно просто добавить слово Apples.

пример выделения текста с использованием команды .contains()  в Cypress

Следует иметь в виду, что если бы мы просто использовали Apple в качестве текста, то результат был бы другим, поскольку Apple встречается на нашей странице дважды. По умолчанию .contains() будет искать по всему DOM и возвращать первый элемент с подходящими параметрами. Если у вас есть несколько элементов с одинаковым текстом, вам необходимо расширить область поиска.

Я люблю объяснять разницу между дочерними, родительскими и двойными командами на примере команды .contains(). Это отличный пример двойной команды. .contains() будет искать в области действия предыдущей команды, если таковая существует.

cy
  .contains('Apple') // will select heading

cy
  .get('li')
  .contains('Apple') // will select the "Apple 🍏" element

Эта команда помогает вам найти нужный элемент, поэтому если у вас есть <button>, где текст находится внутри элемента <span>, в итоге будет выбран элемент <button>. Существует определенный порядок предпочтения элементов, который вы можете посмотреть в документации по Cypress.

Однако можно подойти к выбору нужного элемента и по-другому. Это передача двух аргументов в функцию .contains(). В данном случае первым элементом будет селектор, задающий область видимости искомого элемента.

cy
  .contains('ul', 'Pear')

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

пример выбора родительского элемента с использованием команды .contains()  в Cypress

Таким образом, я выбираю родительский элемент ul.

Подбор правильного текста

Если вас не смущают маленькие и большие буквы, вы можете передать в функцию дополнительный параметр, чтобы игнорировать регистр:

cy
  .contains('apples', { matchCase: false })

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

Если этого недостаточно, вы можете использовать regex для сопоставления любой строки.

cy
  .contains(/Apple/)

Хотя .contains() звучит как утверждение и может быть использовано как утверждение, оно предназначено для выделения элементов. Я уже писал о различных способах выбора элементов с помощью Cypress в прошлом, и .contains() является отличным дополнением к этому. Даже если у вас нет полного контроля над тестируемым приложением, эти команды могут стать хорошей заменой xpath или сложным css-селекторам.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *