赛普拉斯:等待不可预测的组件从排他集中渲染吗? [英] Cypress: Wait for unpredictable component to render from an exclusive set?

问题描述

为了进行全面测试，我的服务(UI +后端)在多个部署环境中迁移:ex DEV，STAGE，DEMO和PROD.当此服务迁移这些测试环境时，其UI等待来自后端的异步更新，作为测试压力，它可能不可预测地变慢；因此，加快速度既不是选择，也不是模拟响应.

For thorough testing, my service (UI+Backend) migrates through multiple deployment environments: ex DEV, STAGE, DEMO, and PROD. As this service migrates these test environments, its UI waits for asynchronous updates from its Backend, which as a test stressor it can be unpredictably slow; thereby, speeding it up is not an option nor is mocking the response.

UI测试涉及等待异步更新响应，以确定将仅呈现哪些React组件.这些React组件将是 section/div ，具有不可预测的内容/文本，因此

UI test involves waiting for an asynchronous update response to determine which React components will exclusively be presented. These React components will be section/div with unpredictable content/text, so Cypress contains is not an option.

用于处理缓慢的异步更新的典型解决方案是将固定延迟与

The typical solution for handling slow asynchronous updates is using fixed delays with Cypress wait: a bunch of milliseconds, tenths of a second, or even seconds. However, the longer are fixed delays leads your test to be more brittle.

这是我易碎的赛普拉斯测试代码的示例:

Here is an example of my brittle Cypress test code:

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秒钟后，并不能确定是否实际渲染了其中一个组件.如果两者都不渲染，则表示状态出乎意料.

However.. after waiting for 5 seconds, it is not absolutely certain, that either one of the components actually rendered. If neither or both rendered, then that is an unexpected state.

那么我该如何等待不使用 cy.wait()或 cy.contains 的这些组件中的任何一个进行渲染?

So how can I wait for either of these components to render using neither cy.wait() nor cy.contains?

谢谢

推荐答案

@GrayDwarf:谢谢您的答复

@GrayDwarf: Thank you for your response

我确实使用了赛普拉斯包含

I did use Cypress contains

    cy.get('div[data-cy="sales_listing_section"]')
        .contains(
            'h1.header-title[data-cy="sale_items_header"]',
            'Items for Sale',
            {timeout: 10000}
        )
        .then(() => {

模块 npm cypress-wait-until

    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');
                })
        })

这篇关于赛普拉斯:等待不可预测的组件从排他集中渲染吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！