javascript - 使用 'contains' 还是 'get' 来查找元素更好？

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()如果您知道适合您的元素的选择器是什么。如果您使用简单的 .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')会匹配它，而您正在寻找的属性可能会有所不同，因此您的测试会失败。