使用“包含”或“获取”来查找元素更好吗？

Question

我正在编写 login.spec.js，此时，我正在检查进一步登录选项链接的可用性（我仍然没有机会创建特定标签来测试这些元素，正如最佳实践所建议的那样)：

<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()如果您知道适合您的元素的选择器是什么，我建议您使用。如果您使用一个 simple.contains('Facebook')并且有另一个包含单词 Facebook 的元素，则您可能会冒着 cypress 匹配该元素的风险。我想如果有几个元素匹配，这取决于 DOM 树中的顺序。在这种情况下，您需要确定元素和使用.first()或.last()命令的顺序（https://docs.cypress.io/api/commands/first.html）

使用.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')会匹配它，并且您正在寻找的属性可能会有所不同，因此您的测试会失败。