Home

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

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

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

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

У приложения довольно простая структура:

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

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

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

cy
   .contains('Apples')

Просто и ясно. Вы знаете, что произойдет – будет выбран заголовок. Заметьте, что нам не нужно писать текст целиком – просто Apples достаточно.

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

Сужение поиска

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

cy
   .contains('Apple') // будет выбран заголовок
cy
   .get('li')
   .contains('Apple') // будет выбран элемент "Apple ????"

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

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

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

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

В этом случае я выбираю родительский элемент ul.

Верное соответствие тексту

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

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

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

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

cy
   .contains(/Apple/)

.contains() звучит как утверждение и может использоваться так, но цель этой функции в выборе элементов. Я писал о различных способов выбора элементов в Cypress, и .contains() – отличное дополнение к ним. Даже если вы не полностью контролируете ваше приложение, эти команды – хорошая замена xPath и сложным CSS-селекторам.

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