How to check v-data-table element on Cypress

user_7138350 0
Viewed 952

The vuetify v-data-table component has a property called "show-select" that allows you to put a checkbox on every list item. The problem i have is that i need to check any element of the table for a Cypress test, but it haven't worked yet. I gave my table an id and tried using "tbody" element doing something like this:

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

and:

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

I also tried to use cypress browser tool to try to find the name of the element and it show me something like this:

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

but it didn't worked. I don't know how to do it and would be great if somebody helps me.

vuetify.js cypress vue.js
2 Answers

Since I don't have the HTML for your table so this is mostly assumptions. SO I have looked into a similar vuetify v-data-table with show-select - https://vuetifyjs.com/en/components/data-tables/#row-selection

Case 1: If you want to select all the checkbox one by one, you can do something like this:

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

Case 2: If you want to select any particular checkbox in a row, you can do that by using:

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

When testing a table, the HTML is nested like this

<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

You want to pick a certain row, you can search for "Some text description" in the row.

The checkbox is the <td> element before the description, so you can select it with the .prev() command

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

If you want to select by score

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

or you can specify the sibling that has .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()

If you want to select all rows, you can use .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
user_167915050
Related