Question: How do you write helper functions in Cypress/Typescript which return a value other than a chainable?

[mathewr94]

Hi,

I come from a background of Java/Selenium and I've been looking into Cypress. It's quite common for me to write helper functions inside my page classes which allow me to break up tasks, for example, one I've recently been trying to write for a Cypress test finds all price elements on a page, then loops through them to find the highest price item and returns the index of that highest price item. In Java/Selenium or even Playwright, this is a very simple function to write and a very necessary one for the test I'm writing. In Cypress, however, I'm having great difficulty writing this helper function.

Here's what I have so far:

function getIndexOfHighestPriceDress() {
    let highestPriceDressIndex: number = 0
    let highestDressPrice: number = 0.0
    // Validate that for every dress price element on the page, there is a matching dress name element
    cy.elementsCountEqualityCheck(dressesPage.dressPrices, dressesPage.dressNames)

    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())
                console.log("highest price dress: " + highestDressPrice)
                console.log("current dress price " + currentPriceAsNumber)
                if (currentPriceAsNumber > highestDressPrice) {
                    highestDressPrice = currentPriceAsNumber
                    highestPriceDressIndex = dress
                    console.log("highest price dress index: " + highestPriceDressIndex)
                }
            })
        }
    })
    console.log("highest price dress index FINAL: " + highestPriceDressIndex)
    return highestPriceDressIndex
}

You can probably spot the issue I'm having here but it boils down to the pure Typescript code running asynchronously and the Cypress sections of the code running synchronously. When I run the test that uses this helper function, the console prints the last console.log line first, and since highestPriceDressIndex gets initialised to 0 at the top, it immediately prints:
highest price dress index FINAL: 0
when, really, I need the logic which sets this variable to something meaningful to run first.

How do I go about this? Please bear in mind that the Cypress docs mention that you should not be using async await to solve this kind of thing.

Thanks,
Mathew,
Aspiring Cypress aficionado.