Cypress：嘗試通過多個選擇器獲取一個元素

Question

問題

我需要一種通過重試/超時嘗試多個選擇器來cy.get元素的方法。 我知道這並不是使用賽普拉斯的真正預期方式，我已經閱讀了條件測試，但不幸的是這是一個要求。 它旨在提供后備標識符。

到目前為止，我的嘗試效果不佳。 我嘗試使用帶有async/await的“正常” javascript 承諾，但隨后賽普拉斯抱怨混合承諾和命令。

我用我的期望和實際發生的情況在下面評論了一些測試用例。

示例 HTML

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

測試用例/我的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()
    })
})

使用的版本

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

添加了這個 function 似乎對我有用，可以通過數組中的任何選擇器獲取元素。

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