CODEWITHSUNDEEP
vue.jstestingvuetify.jscypress
mynameismyname1010101
mynameismyname1010101

Reputation: 409

Cypress not targeting and changing the Vuetify v-data-table component's "rows-per-page"

The Vuetify v-data-table component has a rows-per-page select box at the bottom of the table, the problem is it's not a select box in html, so I'm having a ton of trouble testing the changing of options using Cypress, I've got as far as this piece of code:

cy.get('#app > div.v-application--wrap > main > div > div > div > div > div.container > div > div > div.pa-5.v-card.v-sheet.theme--light > form > div:nth-child(10) > div.v-data-table.v-data-table--dense.theme--light > div.v-data-footer > div.v-data-footer__select > div > div > div > div.v-select__slot')
            .trigger('mouseover').click();
cy.get('#app > div.v-menu__content.theme--light.menuable__content__active').children().trigger('mousedown', 0, 15).wait(500).trigger('mouseover').click();

However, all this code does is click on the select in the table footer, hover over an option, clicks, but then the option doesn't actually get changed, I would appreciate any help from people who've done Cypress testing on the Vuetify v-data-table component

Upvotes: 1

Views: 689

Answers (1)

user16003578
user16003578

Reputation:

You can change rows-per-page by typing an option, for example "All" into the right element. Finding the right element is a bit of trial and error.

it('changes rows-per-page by typing option', () => {

  cy.contains('Rows per page')       // get the footer element 
    .find('.v-select__selections')   // this child element accepts keyboard input 
    .type('All{enter}')              // type in the option you want
    
  // Verify
  cy.get('.v-select__selection').should('contain', 'All')
  cy.get('tbody tr').should('have.length', 10)
})

The user can also use down arrow key on the list, so you can test that way.

Because the popup list is animated, the key thing is to add .should('be.visible') in order to wait for the list to appear in the DOM (otherwise the test is too quick)

it('changes rows-per-page by using downarrow', () => {

  cy.contains('Rows per page')
    .find('i').click()            // open the list

  cy.get('[role="listbox"]')      // get the list that pops up
    .should('be.visible')         // wait for it
    .focus()                      // need to shift focus, by default it's on the input
    .type('{downarrow}')
    .type('{downarrow}')
    .type('{downarrow}')
    .type('{downarrow}')
    .type('{enter}')

  // Verify
  cy.get('.v-select__selection').should('contain', 'All')
  cy.get('tbody tr').should('have.length', 10)
})

The user could also use the mouse,

it('changes rows-per-page by clicking option', () => {

  cy.contains('Rows per page')
    .find('i').click()

  cy.get('.v-list-item').eq(3)
    .should('be.visible')
    .click()
    
  // Verify
  cy.get('.v-select__selection').should('contain', 'All')
  cy.get('tbody tr').should('have.length', 10)
})

Upvotes: 1

Related Questions