如何迭代和测试赛普拉斯元素中的不同子元素？答案

【问题标题】：How to iterate over and test different child elements within an element in cypress?如何迭代和测试赛普拉斯元素中的不同子元素？
【发布时间】：2020-12-24 14:56:13
【问题描述】：

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

<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">

现在，在每个 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");
            }
          });
        }
      }
    });
  }
});

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

【问题讨论】：

您可以将 index === 0 检查替换为更灵活的内容，例如 if (event-status === 'condition')

标签： javascript reactjs automated-tests cypress

【解决方案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;
      );
    })
  })
});

【讨论】：