Cypress：等待不可预测的组件从独占集渲染？

为了进行彻底的测试，my service UI+后端将通过多个部署环境进行迁移：ex-DEV、STAGE、DEMO和PROD。当此服务迁移这些测试环境时，其UI将等待来自后端的异步更新，这可能是测试压力的一个不可预测的原因；因此，加快这一进程既不是一种选择，也不是对反应的嘲弄

UI测试包括等待异步更新响应，以确定哪些React组件将以独占方式呈现。这些React组件将是具有不可预测内容/文本的section/div，因此不是选项

处理缓慢的异步更新的典型解决方案是使用固定延迟：几毫秒、十分之一秒甚至几秒钟。但是，固定延迟越长，测试越脆弱

下面是我的脆性Cypress测试代码示例：

cy.get('div.main')
  .then( ($divMain) => {
    cy.wait(5000) // wait 5 seconds

    const boolStateA = $divMain.find('section.A').length > 0;
    const boolStateB = $divMain.find('section.B').length > 0;

    if (boolStateA( {
      // Do ...
    } else if ( boolStateB ) {
      // Do something else ...
    }
  })

然而。。等待5秒钟后，无法绝对确定是否有一个组件实际渲染。如果两者都未渲染，则这是意外状态

那么，我如何等待这些组件中的任何一个使用cy.wait或cy.contains进行渲染呢

---

谢谢

cypress的建议是让您的测试具有确定性。也就是说，在测试运行时，找出如何确保产品始终处于已知状态。这通常是通过模拟、路由或处理后端来完成的，以提供或可能获得预先确定的状态

内联超时可能比cy.wait好一点，但这并不能解决未知状态问题

cy.get('.mobile-nav', { timeout: 10000 })
  .should('be.visible')
  .and('contain', 'Home')

或者，您可以更新应用程序，以包含测试等待的隐藏完成状态

例如：

<div data-cy="SectionLoaded">SectionA</div> 

cypress.io提供了更多关于此的信息，包括其他最佳实践和解决方法：

---

cypress的建议是使您的测试具有确定性。也就是说，在测试运行时，找出如何确保产品始终处于已知状态。这通常是通过模拟、路由或处理后端来完成的，以提供或可能获得预先确定的状态

内联超时可能比cy.wait好一点，但这并不能解决未知状态问题

cy.get('.mobile-nav', { timeout: 10000 })
  .should('be.visible')
  .and('contain', 'Home')

或者，您可以更新应用程序，以包含测试等待的隐藏完成状态

例如：

<div data-cy="SectionLoaded">SectionA</div> 

cypress.io提供了更多关于此的信息，包括其他最佳实践和解决方法：

---

@灰矮人：谢谢你的回复

我确实用过

以及模块

---

@灰矮人：谢谢你的回复

我确实用过

以及模块

---

谢谢你的回复。如前所述，或组件将以独占方式生成，且不会同时显示，也不会包含文本，因此我无法使用.text。使用cy.get'section.A'将失败，如果它从未出现，但cy.get'section.B'将成功，反之亦然。所以，我可以使用cy.find'section.A'和cy.find'section.B'但是选择cy.wait。。。超时将使测试变得脆弱。我将使用预先确定的状态，但等待预期的预先确定状态的时间才是问题所在。等待预先确定的状态不应该是问题，所以我被你的结束语弄糊涂了。cypress会自动处理某些命令（如get）的等待，并提供对重试时间的控制。似乎您的问题在于不知道加载完成后页面将处于什么状态。它会有A区还是B区，或者两者都没有？我建议使用.text是为了更新web应用程序，以便在页面中添加一些关于哪些部分的信息。工作流示例：。。。未添加任何节更正：。。。注入一点信息。我还试图在我的评论中提供一个意外发布的可视示例。也无法格式化它，因此它将是内联的。通过注入此元素，您的测试将确定地等待SectionsAdded，它包含关于添加了哪个节的信息。添加了一个页面将显示section.A XOR section.B，exclusive or：一个或另一个，但决不能同时显示两个，决不能同时显示两个。正确，在加载完成之前，我不会知道页面的状态。谢谢，谢谢你的回复。如前所述，或组件将以独占方式生成，且不会同时显示，也不会包含文本，因此我无法使用.text。使用cy.get'section.A'将失败，如果它从未出现，但cy.get'section.B'将成功，反之亦然。所以，我可以使用cy.find'section.A'和cy.find'section.B'但是选择cy.wait。。。超时将使测试变得脆弱。我将使用预先确定的状态，但等待预期的预先确定状态的时间才是问题所在。等待预先确定的状态不应该是问题，所以我被你的结束语弄糊涂了。cypress会自动处理某些命令（如get）的等待，并提供对重试时间的控制

---

对于似乎您的问题在于不知道加载完成后页面将处于什么状态。它会有A区还是B区，或者两者都没有？我建议使用.text是为了更新web应用程序，以便在页面中添加一些关于哪些部分的信息。工作流示例：。。。未添加任何节更正：。。。注入一点信息。我还试图在我的评论中提供一个意外发布的可视示例。也无法格式化它，因此它将是内联的。通过注入此元素，您的测试将确定地等待SectionsAdded，它包含关于添加了哪个节的信息。添加了一个页面将显示section.A XOR section.B，exclusive or：一个或另一个，但决不能同时显示两个，决不能同时显示两个。正确，在加载完成之前，我不会知道页面的状态。非常感谢。

    cy.get('div.main-content')
        .then(($sectionBody) => {

            // @ts-ignore
            cy.waitUntil(() => {
                return ($sectionBody.find('div[data-cy="sales_listing_section"]').length > 0)
            }, {
                errorMsg: `ERROR: Sales section has not loaded.`,
                timeout: 10000, // waits up to 10000 ms, default to 5000
                interval: 500, // performs the check every 500 ms, default to 200
                verbose: true,
                customCheckMessage: `CHECK: If Sales section has loaded`
            })
                .then(() => {
                    cy.log('Sales section', 'Loading finished');
                })
        })