如何在Cypress中无需cy.wait验证MUI表格选中行更新？

问题背景 #

我开发了一个采用MUI表格展示列表的应用，列表始终有一个条目处于选中状态。创建新列表条目后，useEffect钩子会将新条目设为选中状态。

在编写Cypress测试时，需要在选中条目更新后再继续执行。初始选中条目的文本为“Cooler Kunde”，创建新条目后变为“Neue Position”，测试代码如下：

cy.get('.Mui-selected.MuiTableRow-root') // 找到带有这两个类的<tr>标签
    .children()
    .find('p')
    .should('have.text', 'Cooler Kunde'); // 此断言生效
// 执行创建新条目的操作
cy.get('.Mui-selected.MuiTableRow-root')
    .children()
    .find('p')
    .should('have.text', 'Neue Position'); // 此断言失败

出现错误：

Timed out retrying after 4000ms: expected '<p.MuiTypography-root.MuiTypography-body2.css-1xsg5cg-MuiTypography-root>' to have text 'Neue Position', but the text was 'Cooler Kunde'

使用cy.wait(1000)可以解决问题，但不想依赖固定等待，寻求替代方案。

可行替代方案 #

• 先等待旧选中文本消失
  利用Cypress的自动重试机制，先确认旧文本已从选中行中移除，再断言新文本：

  // 执行创建新条目的操作后
  cy.get('.Mui-selected.MuiTableRow-root')
    .children()
    .find('p')
    .should('not.have.text', 'Cooler Kunde'); // 等待旧文本消失
  
  cy.get('.Mui-selected.MuiTableRow-root')
    .children()
    .find('p')
    .should('have.text', 'Neue Position');
  

• 直接用cy.contains定位目标选中行
  结合选中类与目标文本，简化代码同时确保等待到元素更新：

  // 执行创建新条目的操作后
  cy.contains('.Mui-selected.MuiTableRow-root p', 'Neue Position')
    .should('exist');
  

• 等待创建操作的完成信号
  如果创建条目涉及API请求，可拦截并等待请求完成：

  // 创建操作前拦截请求
  cy.intercept('POST', '/api/entries').as('createEntry');
  
  // 执行创建新条目的操作
  cy.get('[data-testid="create-button"]').click();
  
  // 等待请求完成
  cy.wait('@createEntry');
  
  // 断言选中文本
  cy.get('.Mui-selected.MuiTableRow-root p')
    .should('have.text', 'Neue Position');
  

  也可以等待创建按钮的状态恢复（比如从加载/禁用态变为可用）：

  // 执行创建操作后，等待按钮恢复正常状态
  cy.get('[data-testid="create-button"]')
    .should('not.be.disabled');
  
  cy.get('.Mui-selected.MuiTableRow-root p')
    .should('have.text', 'Neue Position');
  

• 检查选中行的唯一标识变化
  若选中行有唯一属性（如data-id），可等待该属性更新：

  // 记录初始选中行的ID
  cy.get('.Mui-selected.MuiTableRow-root')
    .invoke('attr', 'data-id')
    .as('initialId');
  
  // 执行创建操作
  cy.get('[data-testid="create-button"]').click();
  
  // 等待选中行ID不等于初始ID
  cy.get('.Mui-selected.MuiTableRow-root')
    .should(($row) => {
      expect($row.attr('data-id')).to.not.equal(this.initialId);
    });
  
  // 断言文本
  cy.get('.Mui-selected.MuiTableRow-root p')
    .should('have.text', 'Neue Position');
  

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