Cypress测试模态窗内表格行显示异常问题求助

问题详情 #

• 点击按钮后弹出模态窗口
• 实际应用DOM中，模态窗口表格的<tbody>内包含4个表格行：table > tbody > tr（共4个）
• Cypress测试环境下，该模态窗口表格的<tbody>内仅显示1个表格行：table > tbody > tr
• 尝试查找#checkboxstrategy0复选框元素时测试始终失败

已尝试的解决方法 #

• 在点击按钮前后设置固定时长等待（如cy.wait(10000)）
• 预先滚动到触发模态窗的按钮位置
• 调用show方法强制显示模态窗及目标<tr>元素

测试代码 #

cy.scrollElementIntoView('.select-rating-style')
    //cy.wait(10000)
    //cy.clickOption(cy.getField('a', 'class', 'select-rating-style'))
    cy.get('.select-rating-style').click()
    //cy.wait(10000)
    //cy.get('.modal-body').eq(2).should('be.visible')
    //cy.get('.modal-body').eq(2).invoke('show')
    cy.get('#checkboxstrategy0').invoke('show')

解决方案建议 #

1. 等待表格行自然加载完成
   抛弃固定时长等待，改用Cypress的断言机制等待表格行数量达到预期，确保数据渲染完成：

   cy.get('.select-rating-style').click()
   // 等待tbody加载出4个表格行
   cy.get('table > tbody > tr').should('have.length', 4)
   // 再定位并操作目标复选框
   cy.get('#checkboxstrategy0').should('be.visible').check()
   

2. 精准定位目标模态窗
   若页面存在多个模态窗，.modal-body.eq(2)的索引可能不准确，建议结合模态窗的唯一标识（比如标题文本、专属类名）定位：

   cy.get('.select-rating-style').click()
   // 通过模态窗标题锁定目标容器
   cy.contains('.modal-title', '目标模态窗标题')
     .parents('.modal')
     .find('table > tbody > tr')
     .should('have.length', 4)
   cy.get('#checkboxstrategy0').should('be.visible')
   

3. 监听异步请求等待数据加载
   表格行可能通过接口异步获取，可监听对应接口请求，确保数据返回后再进行断言：

   // 点击前监听目标接口
   cy.intercept('GET', '/获取表格数据的接口地址').as('loadTableData')
   cy.get('.select-rating-style').click()
   // 等待接口请求完成
   cy.wait('@loadTableData')
   // 断言表格行数量
   cy.get('table > tbody > tr').should('have.length', 4)
   cy.get('#checkboxstrategy0').should('be.visible')
   

4. 避免强制修改DOM状态
   invoke('show')会绕过应用自身的渲染逻辑，可能导致元素仅被强制显示但未完成初始化（比如未绑定事件），优先等待应用自然渲染完成，不要手动修改DOM。

内容的提问来源于stack exchange，提问作者GjoDim