user-interface - Cypress :对 UI 元素的存在进行条件测试的最佳实践

Question

我正在尝试使用 Cypress 开始自动化测试。但是显然学习一个新概念和一种新语言是具有挑战性的......所以我不确定我是否找到了根据条件简单地测试 UI 元素是否存在的最佳解决方案。
所有元素都呈现在服务器端。

所以基本上有一个 DIV 元素可以包含任何一个

• “card”类的 DIV 元素

或

• 'no-ops' 类的 P 元素

为了有条件地测试这个，我想出了这段代码:

cy.get('div#section_paused_op').then(($div) => {
    if($div.find('div.card').length > 0) {
        cy.get('div#section_paused_op div.card').should('exist')
    } else {
        cy.get('div#section_paused_op p.no-ops').should('exist')
    }
})

因此，为了在一种情况下测试类“card”的 DIV 元素是否存在，首先我必须使用 find() 找到它。这是好的做法还是可以用更好的方式完成？

Answer 1

正如您提到的最佳实践，我将以此作为回答，而不是代码建议:

我会说您的测试应该基于触发这些条件，并确定在该测试期间某些东西应该处于什么状态。

是什么让类为“card”的 DIV 出现？进行触发该条件的测试，然后断言元素存在。

是什么让类为“no-ops”的 P 出现？进行触发该条件的测试，然后断言元素存在。

仅仅因为页面上有某些东西并不意味着它应该存在。