如何在 Cypress 组件测试中查询数据属性以获取以空格分隔的值？

Question

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

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

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

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

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

在 data-cy
在data-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" 表示“人”有残疾，但使用未包装的浏览器会禁用该元素。

参考 Using data attributes

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on 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 assertion 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"])'))

如何在 Cypress 组件测试中查询数据属性以获取以空格分隔的值？

How to query data-attribute for a whitespace-separated value in Cypress component tests?

custom-data-attribute

e2e-testing

cypress