Блог

Компонент Vuetify v-data-table имеет поле выбора строк на страницу в нижней части таблицы, проблема в том, что это не поле выбора в html, поэтому у меня масса проблем с тестированием изменения параметров с помощью Cypress, я дошел до этого фрагмента кода:

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

Однако все, что делает этот код,-это нажимает на кнопку «Выбрать» в нижнем колонтитуле таблицы, наводит курсор на опцию, нажимает, но затем опция фактически не меняется, я был бы признателен за любую помощь от людей, которые провели тестирование Cypress на компоненте Vuetify v-data-table

Вы можете изменить количество строк на странице, введя опцию, например «Все», в нужный элемент. Поиск правильного элемента — это немного проб и ошибок.

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

Пользователь также может использовать клавишу со стрелкой вниз в списке, чтобы вы могли протестировать этот способ.

Поскольку всплывающий список анимирован, главное-добавить .should('be.visible') , чтобы дождаться появления списка в DOM (в противном случае тест будет слишком быстрым).

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

Пользователь также может использовать мышь,

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