升级到 React18 / Next.js13 时，Cypress 测试突然点击失败

Question

概括
我们项目上的 cypress 测试套件在将 React 更新到版本 18 和将 Next.js 更新到版本 13 的分支上的一些测试中始终失败。单击元素失败，出现“元素已从 DOM 分离”错误。 开发环境设置为反应严格模式，测试在该模式下运行。

问题
我们正在使用 MUI 5，测试是检查不同的输入和按钮。 测试中的总体问题是它无法单击来自 MUI 的复选框输入，以及来自 MUI 的 Card 组件上的链接。 该复选框位于对话框模式组件中。

测试不会在 click() 命令上出错，并且测试会像单击它一样进行，但实际上并没有在屏幕上单击该复选框。 在此单击后添加 cy.wait() 确实会导致复选框实际被单击，但我更喜欢等待的替代方法。

但是，当单击 Card 组件中的链接时，测试在 click() 命令上失败，并出现以下错误： Cypress Error on click()

向单击“vehicle-card-link”元素的 click() 添加等待会使测试和单击非常不稳定，并且以某种方式使同一测试套件中以前未失败的其他测试更加不稳定。

测试代码
以下是失败的 cypress 测试代码，添加了上下文注释：

// The test
cy.getBySel('more-filters-button').click(); // Opens the MUI Dialog Modal
cy.get('input[name="condition"][value="New"]').click(); // Gets the Checkbox component and clicks on it
cy.getBySel('save-filter-modal').click(); // Clicks a button to close the modal
cy.getBySel('vehicle-card-link').first().click(); // Gets the first MUI Card and clicks on the link
cy.getBySel('vehicle-name').should('exist’); // Checks that the new page with a specific element has opened

// from the commands.js file, for context
Cypress.Commands.add('getBySel', (selector, args, operator = '') => cy.get(`[data-cy${operator}=${selector}]`, { ...args }));

更多上下文：我们在组件上使用 data-cy 属性来帮助进行测试，上面的自定义命令有助于在 cypress 中获取这些元素。

重要笔记

1. 这是失败的测试之一，其他测试遵循类似的模式，我将它们排除在外。 如果您想要更多示例，我可以添加它们。
2. 这个测试在任何其他 PR 上都不会失败，在其他 PR 上也不会很不稳定。 PR this is failed on 仅将 React 更新为 React18，将 Next 更新为 Next13，以及对图像如何使用 Next13 进行渲染的一些更改，不应影响应用程序或代码的这一部分。
3. 对于使用 MUI 中的复选框和卡片组件的应用程序的其他部分，还有其他测试没有失败。

疑似原因
我想这与 React 的严格模式有关，它会两次重新加载页面上的元素。

我试过的

1. 在点击命令前添加守卫：
   .should('存在'), 和
   .should('be.visible')
   这不会影响有问题的测试的行为。

2. 单击后添加一个 cy.wait(100)。
   当涉及车辆卡链接 MUI 卡元素时，这使得测试从每次都失败变得非常不稳定。

3. 为点击命令添加超时或延迟
   . 点击（{延迟：1000}）或点击（{超时：1000}）
   这不会影响有问题的测试的行为。

Answer 1

根本问题是对每次操作后发生的页面更改的检查为零。

测试将尝试以最快的速度运行，这意味着您可以（有时）拾取陈旧的元素（因此出现分离错误）。

在操作后添加一些视觉检查，例如

// open modal and confirm it's open
cy.getBySel('more-filters-button').click(); 
cy.contains('My Modal Title Here').should('be.visible')

// Change state, save, confirm modal is closed 
cy.get('input[name="condition"][value="New"]').click(); 
cy.getBySel('save-filter-modal').click(); 
cy.contains('My Modal Title Here')
  .should('not.be.visible')
//  .should('not.exist')     // or this one

// Carry on after save action is complete
cy.getBySel('vehicle-card-link').first().click(); 

更新至 Cypress v12.2.0

最新版本的 Cypress 改进了检测分离错误的查询，并在运行器发现它们时修复它们。

仅这一步就可以解决您的问题。