How to get count of all elements matching a locator and loop through them

[mathewr94]

Hi,

I'm finding nothing online to explain how to get the count of all elements that match a locator. For example, I have a locator:
div.right-block > div.content_price > span.price
which matches 5 elements on the page (although the number is not guaranteed to be 5 forever). All I want to be able to do is something like:
cy.get("div.right-block > div.content_price > span.price").count()
or
cy.get("div.right-block > div.content_price > span.price").length()
or
cy.get("div.right-block > div.content_price > span.price").size()
so that I can do a for loop like (the following is from a Playwright test I am trying to port into Cypress):

const numberOfDresses: number = cy.get("div.right-block > div.content_price > span.price").count()
for (let i = 0; i < numberOfDresses; i++) {
    const currentDressPriceString: string = await dressesPriceElements.nth(i).textContent();
    const currentDressPrice: number = await this.convertDressPriceStringToFloat(currentDressPriceString);
    if (currentDressPrice > highestDressPrice) {
        highestDressPrice = currentDressPrice;
        highestPriceDressIndex = i;
        highestPriceDressName = await dressesNameElements.nth(i).textContent();
    }
}

but none of these count, length or size functions exist in Cypress. What can I do in order to achieve this?

[jjhelguero]

You may want to read about .each(). You will be able to iterate over the array of DOM elements returned by you .get(). So you're example will look something like this.

cy.get("div.right-block > div.content_price > span.price").each($el => {
  // code to iterate each element
}

[mathewr94]

@jjhelguero thanks for your answer but in my particular case, I don't think it's exactly what I need, as I need to use the index of the highest price dress to select a different element on that dress item.

I ended up using:

let dressCount: number;
cy.get(dressesPage.dressPrices).then((matchingElements) => {
    dressCount = matchingElements.length

    // If there's only 1 dress on the page, return index 0
    if (dressCount === 1) {
        return 0;
    }

    for (let dress = 0; dress < dressCount; dress++) {
        let currentDressPriceString: string = ""
        cy.get(dressesPage.dressPrices).eq(dress).then((currentPriceString) => {
            const currentPriceAsNumber: number = convertDressPriceStringToFloat(currentPriceString.text())
            if (currentPriceAsNumber > highestDressPrice) {
                highestDressPrice = currentPriceAsNumber
                highestPriceDressIndex = dress
            }
        })
    }
})

Although it's not in the code provided, I later use the dressCount index to click the name element of the dress with the highest price to view its details.