Лучше использовать «содержащиеся» или «получить», чтобы найти элемент?

Question

Я пишу login.spe c. js, и на этом этапе я проверяю наличие дополнительных ссылок для параметров входа в систему ( У меня все еще не было возможности создать для проверки этих элементов указана спецификационная метка c, согласно рекомендациям ):

<span id="DDB_Social_List">
    <span>Further login options:</span>
    <a href="..."><span><label class="icon soclgn facebook"></label><strong>Facebook</strong></span></a>
    <a href="..."><span><label class="icon soclgn paypal"></label><strong>Paypal</strong></span></a>
    <a href="..."><span><label class="icon soclgn microsoft"></label><strong>Windows Live</strong></span></a>
</span>

Я реализовал два разных способа проверки доступности этих ссылок:

cy.get('span#DDB_Social_List > a:nth-child(2)').should('have.attr', 'href','...')

и

cy.contains('Facebook').should('have.attr', '...')

Какой путь лучше и почему? Понятия не имею.

Answer 1

Я бы предложил использовать .get(), если вы знаете, какой селектор подходит для вашего элемента. Если вы используете простой .contains('Facebook') и есть другой элемент, который содержит слово Facebook, вы рискуете, что кипарис будет соответствовать этому элементу. Я думаю, если несколько элементов совпадают, это зависит от порядка в дереве DOM. В таком случае вам нужно быть уверенным в порядке элементов и использовать команды .first() или .last() (https://docs.cypress.io/api/commands/first.html)

Использование .get() обусловлено вы знаете, селектор (тег, класс, атрибуты и т. д. c). Это более решительно и выбирает точный элемент, который вы указываете с помощью селектора. Используйте get и избегайте риска сопоставления другого элемента с тем же текстом.

Подробнее об использовании этих двух можно прочитать здесь:

• get - https://docs.cypress.io/api/commands/get.html#Syntax

• содержит - https://docs.cypress.io/api/commands/contains.html#Syntax

В вашем конкретном случае, если был div над вашим списком (например, <div> Facebook is amazing!</div>) cy.contains('facebook') будет соответствовать ему, и искомый атрибут, вероятно, будет другим и, следовательно, ваш тест не пройден.