如何在 Cypress 上检查 v-data-table 元素

Question

vuetify v-data-table 组件有一个名为“show-select”的属性，允许您在每个列表项上放置一个复选框。我遇到的问题是我需要检查表格的任何元素以进行赛普拉斯测试，但它还没有工作。我给我的桌子一个 id 并尝试使用“tbody”元素做这样的事情：

cy.get("#dataTable").get("tbody").eq(1).click()

和：

cy.get("#dataTable").within(() =>{
  cy.get("tbody").eq(1).click();
});

我还尝试使用 cypress 浏览器工具来尝试查找元素的名称，它向我显示如下内容：

cy.get('tbody > :nth-child(1) > :nth-child(1) > .v-data-table__checkbox > .v-icon')

但它没有用。我不知道该怎么做，如果有人帮助我，那就太好了。

Answer 1

由于我没有您的表格的 HTML，所以这主要是假设。所以我用 show-select 研究了一个类似的 vuetify v-data-table - https://vuetifyjs.com/en/components/data-tables/#row-selection

案例1：如果要一个一个地选中所有的复选框，你可以这样做：

cy.visit('https://vuetifyjs.com/en/components/data-tables/#row-selection')
cy.get('td .v-input--selection-controls__input').each(($ele) => {
  cy.wrap($ele).click()
})

案例 2：如果您想连续选择任何特定的复选框，您可以使用：

cy.contains('td','Frozen Yogurt').parent('tr').children().first().click()

Answer 2

测试表格时，HTML是这样嵌套的

<table id="dataTable">                       // table
  <tr>                                       // row 
    <td><span class="v-icon"></span></td>    // column e.g checkbox
    <td>Some text description</td>           // column e.g description
    <td>300</td>                             // column e.g score
  </tr>
</table

要选择某一行，可以在该行中搜索“Some text description”。

复选框是描述前的<td>元素，所以你可以用.prev()命令选中它

cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("Some text description")  // pick the one with this text
  .scrollIntoView()                   // in case the row is not in view
  .prev()                             // get column previous to description
  .click()

如果要按分数选择

cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":first")                 // get first column (checkbox)
  .click()

或您可以指定具有.v-icon的兄弟姐妹

cy.get("#dataTable tbody tr")         // selects all rows in #dataTable
  .contains("300")                    // pick the one with this score
  .scrollIntoView()                   // in case the row is not in view
  .siblings(":has(.v-icon)")          // get column with the checkbox
  .click()

如果要选择所有行，可以使用.click({multiple: true})

cy.get("#dataTable tbody tr")           // selects all rows in #dataTable
  .find('.v-icon')                      // select all the checkboxes
  .click({force: true, multiple: true}) // all rows