Итак, у меня есть элементы в следующей структуре:
<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-status, скажем, завершен или активен, то элемент 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");
}
});
}
}
});
}
});
Приведенный выше код работает для проверки того, что я хочу проверить, но он невероятно запутан, и приветствуются любые более простые подходы.
Преобразуйте цикл 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;
);
})
})
});
Вы можете заменить этот
index === 0
чек чем-то более гибким, напримерif (event-status === 'condition')