如何获取多个具有data-cy属性的元素

Question

我有一个 table，所有单元格都标有 data-cy 属性，如下所示：[data-cy="cell-${row}-${column}].

单独使用经典 cy.get 获取每个单元格没有问题，例如 cy.get("[data-cy=cell-2-17]").click()，但我尝试测试按住控制键对多个单元格的点击，但我做不到做到这一点。

在这个中，它说简单地连接传递给 cy.get 的选择器，但它对我不起作用，我尝试在数据名称周围使用和不使用 ":

cy.get('[data-cy="cell-2-17"][data-cy="cell-4-10"]').click({multiple: true, ctrlKey: true})`

你能告诉我如何使用 data-cy 属性获取多个元素吗？

Answer 1

如果您连接选择器（没有 space 或 +），这意味着该元素必须具有所有这些选择器。

实际上并没有一种简洁的方法来提供所需属性的列表。

有两个有用的东西是通配符和过滤器

const cellsWanted = ['cell-2-17', 'cell-4-10']

cy.get('[data-cy^="cell-"]')   // wildcard anything that starts with "cell-"
  .filter((index, el) => cellsWanted.some(cell => el.getAttribute('data-cy') === cell))
  .click({multiple: true, ctrlKey: true})`

之间有逗号的多个选择器

刚刚发现使用 jquery multiple selectors

更简单的方法

cy.get('[data-cy="cell-2-17"], [data-cy="cell-4-10"]')
  .should('have.length', 2)
  .click({multiple: true, ctrlKey: true})

如何获取多个具有data-cy属性的元素

How to get multiple elements with data-cy attributes

cypress