title: Puppeteer $.eval selecting nested elements
body: <p>Lets say i'm give situation like this page </p>
  
  <pre><code>&lt;div id="details-container" class="style-scope ytd-channel-about-metadata-renderer"&gt;
           &lt;yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer"&gt;Details&lt;/yt-formatted-string&gt;
          &lt;table class="style-scope ytd-channel-about-metadata-renderer"&gt;
            &lt;tbody class="style-scope ytd-channel-about-metadata-renderer"&gt;&lt;tr class="style-scope ytd-channel-about-metadata-renderer"&gt;
              &lt;td class="label style-scope ytd-channel-about-metadata-renderer"&gt;
                &lt;yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"&gt;&lt;/yt-formatted-string&gt;
              &lt;/td&gt;
              &lt;td class="style-scope ytd-channel-about-metadata-renderer"&gt;
                &lt;ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""&gt;&lt;/ytd-button-renderer&gt;
                &lt;div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"&gt;&lt;/div&gt;
                &lt;div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"&gt;&lt;/div&gt;
                &lt;a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""&gt;&lt;/a&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="style-scope ytd-channel-about-metadata-renderer"&gt;
              &lt;td class="label style-scope ytd-channel-about-metadata-renderer"&gt;
                &lt;yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"&gt;&lt;span class="deemphasize style-scope yt-formatted-string"&gt; Location:   &lt;/span&gt;&lt;/yt-formatted-string&gt;
              &lt;/td&gt;
              &lt;td class="style-scope ytd-channel-about-metadata-renderer"&gt;
                &lt;yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"&gt;YourCountry&lt;/yt-formatted-string&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;&lt;/table&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Lets say i need get the "YourCountry" how do i actually get to this element?</p>
  
  <p>So far i tried:</p>
  
  <pre><code>  const location = await page.$$eval(
      "#details-container &gt; table &gt; tbody:nth-child(1) &gt; tr:nth-child(1) &gt; yt-formatted-string",
      locationEl =&gt; locationEl.innerHTML
    );
  console.log(location) // Undefined
  </code></pre>
  
  <p>Not sure how to go about it, trying to return just tr and then again evaluating tr[1] doesn't work as it says that tr doesn't have a function .$$eval.</p>
  
  <p>Note that i'm using apify to get the page.</p>