title: Chaining functions in Cypress
body: <h2>Context</h2>
  <p>I am having trouble trying to understand when asynchrony in Cypress should be handled by the developer and when not (because it is handled under the hood).</p>
  <p>Consider these 2 tests:</p>
  <p>A)</p>
  <pre><code>it('stackoverflow example',() =&gt; {
      cy.get('#soSection').should('contain', 'Stack Overflow').then(() =&gt;{
        cy.get('#soButton').click().then(() =&gt; {
          cy.get('#soSection').should('not.contain', 'Stack Overflow');
        });
      });
  });
  </code></pre>
  <p>B)</p>
  <pre><code>it('stackoverflow example',() =&gt; {
    cy.get('#soSection').should('contain', 'Stack Overflow');
    cy.get('#soButton').click();
    cy.get('#soSection').should('not.contain', 'Stack Overflow');
  });
  </code></pre>
  <ul>
  <li>#soSection will contain 'Stack Overflow' until we click the button. Therefore, both lines should run someway synchronously.</li>
  <li><em>(A)</em> uses <a href="https://docs.cypress.io/api/commands/then.html#Syntax" rel="nofollow noreferrer">then</a> which <em>enables you to work with the subject yielded from the previous command.</em> <em>(B)</em> does not use it.</li>
  </ul>
  <hr />
  <h2>What I've tried so far</h2>
  <p>I've run both (A) and (B) tests. Both methods work well and behave the same way.</p>
  <hr />
  <h2>Doubts</h2>
  <ol>
  <li>If we needed to use the previous subject then we should only use the method <em>(A)</em> with chainables. Are there any other cases where we MUST use chainables like in <em>(A)</em> example?</li>
  <li>Look at the 3 lines of code in <em>(B)</em>. We expect those 3 lines run in that order to success. However, Cypress claim to run asynchronously. Therefore, how can we be sure those 3 lines will run in the order expected?</li>
  </ol>