赛普拉斯未针对和更改 Vuetify v-data-table 组件的 "rows-per-page"

Question

Vuetify v-data-table 组件在 table 底部有一个每页行数 select 框，问题是它不是 select 框中 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();

然而，所有这些代码所做的只是点击 table 页脚中的 select，将鼠标悬停在一个选项上，点击，但该选项实际上并没有改变，我将不胜感激在 Vuetify v-data-table 组件

上完成赛普拉斯测试的人的任何帮助

Answer 1

您可以通过在右侧元素中键入一个选项（例如“全部”）来更改每页行数。找到正确的元素需要反复试验。

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

赛普拉斯未针对和更改 Vuetify v-data-table 组件的 "rows-per-page"

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

testing

vue.js

vuetify.js

cypress