Cypress: Try to get an element by multiple selectors

Question

The Problem

I need a way to cy.get elements by trying multiple selectors with retries/timeouts. I'm aware this is not really the intended way to use Cypress and I've read Conditional Testing but unfortunately this is a requirement. It's intended to provide fallback identifiers.

My attempts so far haven't worked well. I've tried using 'normal' javascript promises with async/await but then cypress complains about mixing promises and commands.

I've commented some test cases below with my expectations and what actually happens.

Example HTML

<!-- example.html -->
<button id="button-1" onclick="this.style.color='red'">my button</button>

Test Cases / My Function

beforeEach(() => {
    cy.visit('./example.html')
})

function getWithMultipleSelectors(selectors) {
    return new Cypress.Promise(resolve => {
        cy.wrap(selectors).each(selector => {
            getWithRetries(selector).then(element => {
                if (element) resolve(element)
            })
            // how do I exit out of this .each() early?
            // I only know if I found something inside .then() so I can't just do `return false`
        })
    })
}

function getWithRetries(selector, retries = 3) {
    return new Cypress.Promise(resolve => {
        cy.wrap([...Array(retries).keys()]).each(attempt => {
            cy.log(`attempt nr ${attempt}`)
            const element = cy.$$(selector)
            cy.log(element, selector)
            if (element.length === 1) {
                resolve(element[0])
                return false // ends .each()
            }
            cy.wait(1000) // wait before next attempt
        })
    })
}

// just a sanity check that the button can indeed be found
it('normal get function finds #button-1', () => {
    cy.get('#button-1').should('exist').click()
})

// to see what happens if you check existence of null or undefined
// as expected they are considered to not exist
it('cy.wrap() null and undefined', () => {
    cy.wrap(undefined).should('not.exist')
    cy.wrap(null).should('not.exist')
})

// ends with "expected undefined to exist in the DOM" which somehow passes
// but fails when trying to click()
it('finds the button with one selector', () => {
    getWithMultipleSelectors(['#button-1']).then(element => {
        cy.wrap(element).should('exist').click()
    })
})

// ends with "expected undefined to exist in the DOM" which somehow passes
// but fails when trying to click()
it('finds the button with two selectors', () => {
    getWithMultipleSelectors(['#does-not-exist', '#button-1']).then(element => {
        cy.wrap(element).should('exist').click()
    })
})

// this test should FAIL but it doesn't
it('fails if no selector matches', () => {
    getWithMultipleSelectors(['#does-not-exist']).then(element => {
        cy.wrap(element).should('not.exist').click()
    })
})

Versions Used

Cypress package version: 7.5.0
Cypress binary version: 7.5.0
Electron version: 12.0.0-beta.14
Bundled Node version:
14.15.1

Answer 1

Added this function that seems to be working for me for getting an element by any of the selectors in an array.

Cypress.Commands.add('getMulti', (selectors) => {
    cy.document().then(($document) => {
        selectors.forEach(selector => {
          if($document.querySelector(selector)){
              return cy.get(selector).first()
          }
        })
    })
})