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

Question

vuetify v-data-table 组件有一个名为“show-select”的属性，它允许您在每个列表项上放置一个复选框。我遇到的问题是我需要检查表的任何元素以进行 Cypress 测试，但它还没有工作。我给了我的表一个 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 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>描述之前的元素，因此您可以使用 .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 的 sibling

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