如何从 cypress 的下拉列表中选择随机选项

Question

我试图从下拉列表中选择一个随机选项。 到目前为止我发现没有任何答案有帮助。 我在选择特定选项时没有任何问题，因为所有值都设置了 ID。

这很简单/直接，而且它的工作原理：

const log = new loginPage()
            log.visit()
            log.loginEmail('test')
            log.loginPassword('test')
            log.submit()
            cy.get('#link-new-application').click()
            cy.get('#control-nationality').click()
            cy.get('#option-nationality-DZA').click()

对于随机选择有什么建议吗？我是初学者，因此我们将不胜感激。

这是 HTML：

Answer 1

tlolkema 给出的 Lodash 示例有一些错误。

options

参数是一个对象，而不是数组。它的每个选项都有一个编号属性，但它也有这些属性

• length

• prevObject

• selector

Lodash

sample()

方法可以作用于对象，但它返回对象的属性之一。

因此有时

Cypress._.sample(options)

会返回上面列出的三个属性之一，并且您的测试将因意外原因失败。

正确的方法是先将

options

转换为数组。

您还可以

cy.wrap()

选定的选项，而不是

cy.get()

它。

cy.get('id^="option-nationality-"]')
  .then(options => {
    const sample = Cypress._.sample(options.toArray())
    cy.wrap(sample).click()
})

Answer 2

一种方法是获取所有选项，然后使用 Attribute Starts With Selector

随机单击一个选项

cy.get('#control-nationality').click()  // open the dropdown

cy.get('[id^="option-nationality-"]')    // all elements with id starting "option-nationality"
  .then($options => {
    const count = $options.length
    const randomIndex = Math.floor(Math.random() * count)
    const randomOption = $options.eq(randomIndex) 
    cy.wrap(randomOption).click()
  })

Answer 3

Cypress 内置了 Lodash。

Lodesh 带来了很多方便的实用方法，使用

sample

方法你可以从集合中获取随机项目。

https://docs.cypress.io/api/utilities/_#Syntax

https://lodash.com/docs#sample

cy.get('id^="option-nationality-"]')
  .then(options => {
    cy.get(Cypress._.sample(options)).click()
})