如何在Cypress中勾选vuetify v-data-table组件的复选框元素

失效核心原因：

• 此前的代码未命中复选框实际绑定交互事件的元素：Vuetify 的 v-checkbox 组件会将原生 input 设为透明隐藏状态，交互事件绑定在原生 input 上，直接点击图标、行元素、tbody 都不会触发勾选
• Cypress 默认会检查元素可交互性，直接点击隐藏的原生 input 会被拦截，需要添加强制点击参数
• 索引规则混淆：eq() 从0开始计数，eq(1) 对应第二行，第一行需使用eq(0)

可行实现代码 #

1. 按行索引勾选指定行 #

以下示例勾选表格第二行（索引为1）的复选框：

cy.get('#dataTable')
  .find('tbody tr') // 定位所有数据行
  .eq(1) // 指定行索引，从0开始计数
  .find('.v-data-table__checkbox input') // 定位复选框原生交互元素
  .click({ force: true }) // 强制点击，绕过可交互性检查

2. 按行内容勾选指定行 #

如果需要勾选包含指定文本的行，可使用以下写法：

cy.get('#dataTable')
  .contains('tbody tr', '目标行包含的文本内容') // 匹配包含指定文本的行
  .find('.v-data-table__checkbox input')
  .click({ force: true })

3. 勾选表头全选框 #

如果需要全选所有行，可直接点击表头的全选复选框：

cy.get('#dataTable')
  .find('th .v-data-table__checkbox input')
  .click({ force: true })

结果验证 #

可添加断言确认勾选操作生效：

cy.get('#dataTable')
  .find('tbody tr')
  .eq(1)
  .find('.v-data-table__checkbox input')
  .should('be.checked') // 断言复选框为选中状态

内容的提问来源于stack exchange，提问作者sergio.gomeza