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

Question

vuetify v-data-table 组件有一个名为“show-select”的属性，它允许您在每个列表项上放置一个复选框。我遇到的问题是我需要检查 table 的任何元素以进行赛普拉斯测试，但它还没有奏效。我给了我的 table 一个 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 你的 table 所以这主要是假设。所以我研究了一个类似的 vuetify v-data-table with show-select - https://vuetifyjs.com/en/components/data-tables/#row-selection

案例一：如果你想select所有的checkbox一一勾选，你可以这样做：

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：如果您想 select 任何特定的复选框连续，您可以使用：

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

Answer 2

测试table时，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

你想挑某行，可以在行中搜索“一些文字描述”。

复选框是描述之前的 <td> 元素，因此您可以 select 使用 .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()

如果你想select按分数

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()

如果要select所有行，可以使用.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

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

How to check v-data-table element on Cypress

vue.js

vuetify.js

cypress