赛普拉斯如何在不选择任何项目的情况下验证所有下拉项目

Question

下面是我的 html 下拉控件：

我想验证下拉菜单是否包含以下项目：["5","15","30","45"]

我写了下面一段代码：

value=["5","15","30","45"]
cy.get(seelctor).invoke('val').should('deep.equal', value)

我不想 select 所有这些项目只是想验证下拉列表是否有它们。另外，My html 没有 value 属性。我如何根据文本断言 ??

Answer 1

在 cypress/fixtures 中创建一个夹具文件 data.json 并写入：

{
"dropdownValues": ["5","15","30","45"]
}

你的测试会是这样的：

describe('SO Question', function() {
    beforeEach(function() {
        //Load Fixture File
        cy.fixture('data').then(function(testdata) {
            this.testdata = testdata 
        })
    })
    it('Iterate dropdown and validate', function() {
        cy.get(selector).each(($ele, i) => {
            expect($ele).to.have.text(this.testdata.dropdownValues[i])
        })
    })
})

Answer 2

像 <li>15</li> 这样的标签之间的值在带有 .invoke('text') 的单个元素上访问。

invoke('val') 用于 <input> 和 <textarea> 元素。

但如果您 select 多个元素，文本将混合在一起

cy.get('li')                  // multiple elements selected
  .invoke('text')             // joins all text together, result is "5153045"
  .should('eq', '5153045')    // passes

你的情况还可以，但感觉有点笨拙。在另一种情况下，您可以在文本之间获得额外的白色 space，这使得比较更加困难。

您可以使用 jQuery 来提取单独的文本，当存在额外的白色-space 时，它们可以被修剪以更好地匹配

cy.get('li')                                            
  .then($els => Cypress.$.map($els, (el) => el.innerText.trim())) // uses jQuery .map()
  .should(values => {
    expect(values).to.deep.eq(["5","15","30","45"])
  })

但是如果您的下拉项是从 API 中获取的，您应该将尽可能多的计算放在 .should() 回调中，因为赛普拉斯会重试直到通过

cy.get('li')                                            
  .should($els => {                                              // retries here
    const values = [...$els].map(el => el.innerText.trim())      // uses Array .map()
    expect(values).to.deep.eq(["5","15","30","45"])
  })

赛普拉斯如何在不选择任何项目的情况下验证所有下拉项目

cypress how to verify all dropdown items without selecting any item

javascript

html-select

dropdown

cypress