如何在柏树中的一个元素中迭代和测试不同的子元素

Question

因此，我有以下结构中的元素：

<div class="MuiBox-root" data-testid="all-events">
<ul ....>
<div class="MuiBox-root" data-testid="event">
<div class="MuiBox-root" data-testid="event">
<div class="MuiBox-root" data-testid="event">

现在，在每个事件元素中都有以下结构：

<div class="MuiBox-root" data-testid="event">
<li .....>
<div class="MuiBox-root ....." data-testid="event-status">
<div> Text Value </div>
<div class="MuiBox-root ....." data-testid="event-name">

因此，我想测试的是，如果元素事件状态是完成的或活动的，那么元素event-name就会出现。因此，我使用的方法如下：

cy.get("[data-testid='events']").its("length").then((numEvents) => {
for (let i = 0; i < numEvents; i++) {
cy.get("[data-testid='event-status']").each((status, index) => {
if (index === i) {
if (isEventActive(status)) {
cy.get("[data-testid='event-name']").each((name, index) => {
if (index === i) {
cy.get(name).should("have.text", "some value");
}
});
} else {
cy.get("[data-testid='event-name']").each((name, index) => {
if (index === i) {
cy.get(name).should("not.exist");
}
});
}
}
});
}
});

上面的代码正在测试我想要测试的东西，但它非常混乱，任何更简单的方法都是受欢迎的。

Answer 1

将for循环转换为.each()。在事件上使用.within()将允许内部get命令特定于该事件，并且无需检查索引值。

cy.get("[data-testid='events']").each($event=> { 
cy.wrap($event).within(() => {
cy.get("[data-testid='event-status']").each($status => {
if (isEventActive($status)) {
cy.get("[data-testid='event-name']").should("have.text", "some value");
}) else {
cy.get("[data-testid='event-name']").should("not.exist")
})
})
})
});

也许这也会奏效。使用闭包将两个内部元素($status和$name(获取到一个三元表达式中，并使用.should("satisfy", callbackFn)进行非此即彼的检查。

cy.get("[data-testid='events']").each($event => { 
cy.wrap($event).find("[data-testid='event-status']").then($status => {
cy.wrap($event).find("[data-testid='event-name']")
.should("satisfy", $name => isEventActive($status)  
? $name.text() === "some value"
: $name.length === 0;
);
})
})
});