【问题标题】：Cypress: Try to get an element by multiple selectorsCypress：尝试通过多个选择器获取一个元素
【发布时间】：2021-06-15 13:26:25
【问题描述】：

问题

我需要一种通过重试/超时尝试多个选择器来cy.get 元素的方法。我知道这并不是使用赛普拉斯的真正预期方式，我已经阅读了Conditional Testing 但不幸的是，这是一个要求。它旨在提供后备标识符。

到目前为止，我的尝试效果不佳。我尝试使用带有 async/await 的“普通”javascript 承诺，但随后赛普拉斯抱怨混合承诺和命令。

我在下面评论了一些测试用例，表达了我的期望和实际发生的情况。

示例 HTML

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

测试用例/我的功能

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

【问题讨论】：

标签： javascript cypress

【解决方案1】：

添加了这个似乎对我有用的函数，用于通过数组中的任何选择器获取元素。

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

【讨论】：