如何在赛普拉斯中正确表达我的if语句

Question

在运行了更多测试并发现了更多问题层之后，我正在重新设置其格式

当前问题

因此，我发现可以在下划线上添加data-cy来表示已选择状态。然后，我在状态名称中添加了data-cy。

因此，我可以尝试进行如下测试：

    it('Clicks to delete selected states', () => {
        if(cy.get('[data-cy=state_underline]').should('be.selected')){
            cy.get('[data-cy=state_name]')
            .click({ multiple: true })  
        }
    });

错误

运行.should('be.selected')时，它会选择前几个状态，然后抛出此错误：

CypressError: Timed out retrying: coordsHistory must be at least 2 sets of coords

当我将.should('be.selected')切换为.should('be.visible')时 会引发此错误：

This element '[ <span.css-184xmt0-Underline.css-jn1u554>, 58 more... ]' is not visible because it has an effective width and height of: '0 x 2' pixels.

---

原始问题

我正在尝试编写测试以取消选择已选择的状态。唯一更改的是该状态的<span class=。

*此外，有50种状态，一次可以选择x种状态。

未选择的跨度：

class="css-mdt04d-StateText css-1x6iasc3"

选定范围：

class="css-ddft8r-StateText css-1x6iasc3"

所需的原始行为

我不太确定如何用词来写我的if statement来检查跨度类是否已更改，然后在其上更改为cy.click)，然后在该页面上找到删除按钮（即测试的默认按钮部分）。

if statement

的示例

    it('Clicks to selected states', () => {
            if (cy.get('<span class="css-mdt04d-StateText css-1x6iasc3">') === '<span class="css-ddft8r-StateText css-1x6iasc3">'){
                cy.click()
                cy.get('[data-cy=default-buttons]')
                    .eq(3)
                    .click();
            }
    });

**更新**

因此，在进行更多挖掘之后，我发现在状态下有一个带下划线的跨度，表明该跨度已被选中。现在，我想知道是否可以说.should('be.visible')，然后再cy.click()。

下划线范围代码

<span class="css-1dsc69g-Underline css-1x6iasc4">

Answer 1

如果您想对元素状态进行布尔检查，我建议您使用赛普拉斯内置的jQuery。或者可能具有允许获取元素当前状态的属性。 假设您有跨度，并且如果它的子跨度带有下划线，我们可以假定它已被选中。因此，使用jQuery，它将像： if (Cypress.$('span[class*="StateText"]').has('span[class*="Underline"]') { //your logic to handle selected element. }
或
cy.get('span[class*="StateText"]').filter(':has(span[class*="Underline"])')...// now we have all selected spans
使用jquery比在条件条件下处理cypress链接器要容易得多，因为断言返回的是Cypress链接器对象，而不是布尔值。