El componente vuetify v-data-table tiene una propiedad llamada "show-select" que le permite poner una casilla de verificación en cada elemento de la lista. El problema que tengo es que necesito verificar cualquier elemento de la tabla para una prueba de Cypress, pero aún no ha funcionado. Le di a mi tabla una identificación e intenté usar el elemento "tbody" haciendo algo como esto:
cy.get("#dataTable").get("tbody").eq(1).click()y:
cy.get("#dataTable").within(() =>{ cy.get("tbody").eq(1).click(); });También traté de usar la herramienta de navegación Cypress para tratar de encontrar el nombre del elemento y me mostró algo como esto:
cy.get('tbody > :nth-child(1) > :nth-child(1) > .v-data-table__checkbox > .v-icon')pero no funcionó. No sé cómo hacerlo y sería genial si alguien me ayuda.
Como no tengo el HTML para su tabla, se trata principalmente de suposiciones. Así que he buscado en una tabla de datos v vuetify similar con show-select - https://vuetifyjs.com/en/components/data-tables/#row-selection
Caso 1: si desea seleccionar todas las casillas de verificación una por una, puede hacer algo como esto:
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() })Caso 2: si desea seleccionar cualquier casilla de verificación en particular en una fila, puede hacerlo usando:
cy.contains('td','Frozen Yogurt').parent('tr').children().first().click()Al probar una tabla, el HTML se anida así
<table id="dataTable"> // table <tr> // row <td><span class="v-icon"></span></td> // column eg checkbox <td>Some text description</td> // column eg description <td>300</td> // column eg score </tr> </tableSi desea elegir una fila determinada, puede buscar "Alguna descripción de texto" en la fila.
La casilla de verificación es el elemento <td> antes de la descripción, por lo que puede seleccionarlo con el comando .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()Si quieres seleccionar por puntuación
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() o puede especificar el hermano que tiene .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() Si desea seleccionar todas las filas, puede usar .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