Can nested loops be used in Cypress?

Question

I would like to know if Cypress supports nested loops? In my case, I have a table where I need to iterate over each row (row is represented by the "data-automationid="DetailsRowFields"") and then over each cell.

Although I attempted to create a function that would extract it, I am unsure if it can be done.

export function getCellData() : Promise<Map<string, string>> {
return new Cypress.Promise((resolve) => {
    const cellMap = new Map<string, string>();
    cy.get('div[data-automationid="DetailsRowFields"]')
        .each((rowElement) => {
            rowElement.children()
                .each((child) => {
                    const ariaIndex = child.attr('aria-colindex');
                    const cellData = child.text();
                    cellMap.set(ariaIndex, cellData);
                });
        })
        .then(() => resolve(cellMap));
});

}

Answer 1

That won't quite work as you expect, you will only get the last row data.

The Map key should include the row index.

Also, rowElement is a jQuery object. While jQuery does have methods for .children() and .each(), the calling pattern is different to the equivalent Cypress .each().

I recommend wrapping the rowElement.

const cellMap = new Map<string, string>();

cy.get('div[data-automationid="DetailsRowFields"]')
  .each((rowElement, rowIndex) => {

    cy.wrap(rowElement)
      .children()
      .each((child) => {
        const ariaIndex = child.attr('aria-colindex');
        const cellData = child.text();
        const mapKey = `${rowIndex}:${ariaIndex}`
        cellMap.set(mapKey, cellData);
      })
  })