title: Cypress: Wait for unpredictable component to render from an exclusive set?
body: <p>For thorough testing, my <strong>service (UI+Backend)</strong> migrates through multiple deployment environments: ex DEV, STAGE, DEMO, and PROD. As this service migrates these test environments, its UI waits for <strong>asynchronous updates</strong> from its Backend, which as a test stressor it can be <strong>unpredictably</strong> slow; thereby, speeding it up is not an option nor is mocking the response.</p>
  <p>UI test involves waiting for an <strong>asynchronous update</strong> response to determine which React components will exclusively be presented. These React components will be <strong>section/div</strong> with <strong>unpredictable content/text</strong>, so <a href="https://docs.cypress.io/api/commands/contains.html#Syntax" rel="noreferrer"><code>Cypress contains</code></a> is not an option.</p>
  <p>The typical solution for handling slow <strong>asynchronous updates</strong> is using <strong>fixed delays</strong> with <a href="https://docs.cypress.io/api/commands/wait.html" rel="noreferrer"><code>Cypress wait</code></a>: a bunch of milliseconds, tenths of a second, or even seconds. However, the longer are fixed delays leads your test to be <strong>more brittle</strong>.</p>
  <p>Here is an example of my brittle Cypress test code:</p>
  <pre><code>cy.get('div.main')
    .then( ($divMain) =&gt; {
      cy.wait(5000) // wait 5 seconds
  
      const boolStateA = $divMain.find('section.A').length &gt; 0;
      const boolStateB = $divMain.find('section.B').length &gt; 0;
  
      if (boolStateA( {
        // Do ...
      } else if ( boolStateB ) {
        // Do something else ...
      }
    })
  </code></pre>
  <p>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.</p>
  <p>So how can I wait for either of these components to render using neither <code>cy.wait()</code> nor <code>cy.contains</code>?</p>
  <p>Thank you</p>