javascript - How to iterate over and test different child elements within an element in cypress? - Stack Overflow

admin管理员组

文章数量:1389772

So, I have the elements in the following structure:

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

So, I have the elements in the following structure:

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

Now, within each event element is the following structure:

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

So, what I want to test is that if the element event-status is say pleted or active, then the element event-name will be present. So the approach that I am using is as follows:

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");
            }
          });
        }
      }
    });
  }
});

The above code is working to test what I want to test out but it is incredibly messy and any simpler approaches are wele.

• javascript
• reactjs
• automated-tests
• cypress

Share Improve this question Follow edited Jan 1, 2021 at 9:55 Sayantan Ghosh asked Dec 24, 2020 at 14:56 Sayantan GhoshSayantan Ghosh 33811 gold badge88 silver badges2626 bronze badges 1

• You can replace that index === 0 check with something more flexible like if (event-status === 'condition') – Joshua Commented Dec 25, 2020 at 9:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

Convert the for loop to an .each(). Using .within() on the event will allow internal get mands to be specific to the event, and eliminate the need to check index values.

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")
      })
    })
  })
});

Maybe this will also work. Uses closure to get the two inner elements ($status and $name) into a ternary expression, and uses .should("satisfy", callbackFn) to do an either/or check.

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;
      );
    })
  })
});

本文标签： javascriptHow to iterate over and test different child elements within an element in cypressStack Overflow