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

Question

摘要
\n我们项目中的 cypress 测试套件在将 React 更新到版本 18 和将 Next.js 更新到版本 13 的分支上的一些测试始终失败。单击元素失败，\xe2\x80\x98 元素已与DOM\xe2\x80\x99 错误。开发环境设置为反应严格模式，测试在该模式上运行。

\n

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

\n

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

\n

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

\n

向单击 \xe2\x80\x98vehicle-card-link\xe2\x80\x99 元素的 click() 添加等待，使测试和单击变得非常不稳定，并且以某种方式使之前在同一测试套件中进行的其他测试变得不稳定没有失败，更脆弱。

\n

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

\n

// The test\ncy.getBySel(\'more-filters-button\').click(); // Opens the MUI Dialog Modal\ncy.get(\'input[name="condition"][value="New"]\').click(); // Gets the Checkbox component and clicks on it\ncy.getBySel(\'save-filter-modal\').click(); // Clicks a button to close the modal\ncy.getBySel(\'vehicle-card-link\').first().click(); // Gets the first MUI Card and clicks on the link\ncy.getBySel(\'vehicle-name\').should(\'exist\xe2\x80\x99); // Checks that the new page with a specific element has opened\n\n// from the commands.js file, for context\nCypress.Commands.add(\'getBySel\', (selector, args, operator = \'\') => cy.get(`[data-cy${operator}=${selector}]`, { ...args }));\n

\n

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

\n

重要笔记

\n

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

\n

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

\n

我\xe2\x80\x99尝试过什么

\n

\n

1. 在单击命令前添加防护：\xe2\x80\xa8
   \n.should(\xe2\x80\x98exist\xe2\x80\x99) 和\xe2\x80\xa8
   \n.should(\xe2\x80\x98be .visible\xe2\x80\x99)
   \n\xe2\x80\xa8这不会影响有问题的测试的行为。

   \n
\n

2. 单击后添加 cy.wait(100) 。
   \n\xe2\x80\xa8 当涉及车辆卡链接 MUI 卡元素时，这使得测试从每次失败变得非常不稳定，如前面提到的。

   \n
\n

3. 向点击命令添加超时或延迟
   \n。\xe2\x80\xa8click({delay: 1000}) 或 click({timeout: 1000})
   \n\xe2\x80\xa8这不会影响有问题的行为测试。

   \n
\n

\n

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(); 

更新至赛普拉斯 v12.2.0

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

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