如何遍历表并从行中提取值并与数据表进行比较

Question

I am trying to fill in a form and save the details then the same details get displayed in a table row. I need to iterate through the table row and extract all the values (Value1, Value2, Value3) from the row and then compare with the input values. How do I do this using cypress.

<tbody class="jss1692">
    <tr class="jss1588">
        <td class="jss1598 jss1600 jss1593 jss1597 jss1693 jss1694 jss1696 jss1697 sc-jtRfpW bPusKc" style="left: 0px;">
            <div class="sc-kTUwUJ frEzXN">
                <div title="Draft" class="sc-jKJlTe gSOlpt">
                    <div data-testid="StatusLight" class="sc-eNQAEJ heHvgs"></div>
                </div>
            </div>
        </td>
        <td class="jss1598 jss1600 jss1593 jss1597 jss1696 sc-dqBHgY eAlZOZ">
            <div class="sc-elJkPf epzdvI">Value1</div>
        </td>
        <td class="jss1598 jss1600 jss1593 jss1597 jss1696 sc-dqBHgY eAlZOZ">
            <div class="sc-elJkPf epzdvI">Value2</div>
        </td>
        <td class="jss1598 jss1600 jss1593 jss1597 jss1696 sc-dqBHgY eAlZOZ">
            <div class="sc-elJkPf epzdvI">Value3</div>
        </td>
    </tr>
</tbody>

Answer 1

You need to iterate through the td elements and extract the text content. Since I use .find('td') it finds all the td elements, and with .each() you can iterate through them one-by-one, selecting the elements you want (in this case I am skipping the element with index 0 as it's just an empty string):

let values = []
cy.visit('stackoverflow/table.html')
cy.get('tbody > tr')
  .find('td')
  .each(($el, $index) => {
     cy.wrap($el)
      .invoke('text')
      .then(text => {
          if($index!==0)
            values.push(text.trim())
          })
       })
      .then(() => expect(values).to.deep.eq(["Value1", "Value2", "Value3"]))