如何在赛普拉斯组件测试中查询以空格分隔值的数据属性?

Question

当测试一个复杂的组件时，我想给data-cy属性分配多个空格分隔的值，例如

<div data-cy="my-component disabled" />

，并使用~=属性选择器查询元素:

cy.get('[data-cy~="my-component"]')

现在，已经查询了my-component，我如何进一步断言它:

• 不包含"禁用";indata-cy
• 不包含"已禁用";indata-cy
• 在更广泛的意义上，是否满足css选择器?

---

我知道我可以显式地重新查询每个断言的所有参数，例如:

cy.get('[data-cy~="my-component"]:not([data-cy~="disabled"])').should('exist')

，但这感觉过于复杂，读起来不太好——我想先查询元素，然后在后面的步骤中进一步断言它——例如:

cy.get('...').should(el => { 
// assert here
})

Answer 1

这个方法看起来不错。如果使用单个属性，它们可能会与其他"原生"属性发生冲突。属性。

例如，如果data-cy="disabled"表示"人物";具有禁用功能，但使用unwrapped时浏览器会禁用该元素。

使用数据属性

data-* attributes允许我们在标准的、语义的HTML元素上存储额外的信息，而不需要其他hack，比如非标准的属性，或者DOM上的额外属性。

还有一些框架(React)对元素允许的属性很挑剔。

---

您可能正在寻找一个函数来为测试提供选择器。

const asDataCy = (attrs) => {
return attrs.split(' ').map(attr => {
let op = '~'
if (item.charAt(0) === '!') {
op = '!'
attr = attr.slice(1)
}
return `[data-cy${op}="${attr}"]`
).join('')
}
cy.get(asDataCy('my-component !disabled'))  
// [data-cy~="my-component"][data-cy!="disabled"])

Answer 2

Chai-jQuery断言expect($el).match(selector)正是这样做的!

// should form
cy.get('[data-cy~="my-component"]')
.should('match', '[data-cy~="some-value"]')  
.should('match', ':not([data-cy~="something-else"])')
// expect form
cy.get('[data-cy~="my-component"]')
.then(el => expect(el).to.match('[data-cy~="some-value"]'))
.then(el => expect(el).to.match(':not([data-cy~="something-else"])'))