title: How to get nested multi-level div returned in Cypress (Material-UI Dialog)
body: <p>I am trying to get the dialog text from a dialog box written using material-ui. It looks a little like this:</p>
  
  <pre><code>&lt;div class="dialog"&gt;&lt;div&gt; 
     &lt;div&gt;
        &lt;div style=""&gt;
           &lt;div style=""&gt;
              &lt;div style=""&gt;Some Text I want to verify&lt;/div&gt;
              &lt;div style""&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried solving this from two sides;</p>
  
  <ol>
  <li>trying to add some sort of unique id to the dialogText (i.e. via
  data-test tag), but these divs appear to be generated from within
  the material-ui library.  </li>
  <li><p>in Jest/Puppeteer I managed to successfully use the
  following (probably brittle) selector to solve the same problem:</p>
  
  <pre><code>const dialogText = await page.$eval('[class="dialog"] &gt; div:first-child &gt; div:first-child &gt; div:first-child &gt; div:first-child', e =&gt; e.innerHTML);
  expect(dialogText).toBe('Some Text I want to verify');
  </code></pre></li>
  </ol>
  
  <p>I have tried the same sort of (brittle) approach in Cypress:</p>
  
  <pre><code>cy.get('.dialog &gt; div:first-child &gt; div:first-child &gt; div:first-child &gt; div:first-child').should(($dialog) =&gt; {
    const text = $dialog.text()
    cy.log('nested div tex: ', text);
  }
  </code></pre>
  
  <p>But I get null back</p>
  
  <p>I think 1) is generally a more favourable approach as it makes the code more testable (at least in my new-to-cypress state). </p>
  
  <p>However, in the absence of that, 2) should start with the "dialog" class and get whatever text is in that child(x4) div and compare it against an expected value in order to get a decent message if it isn't as expected.</p>
  
  <p>Right now I am struggling to get cy.get and cy.find to return anything.</p>
  
  <p>Thanks </p>