title: Scrape nested span tag on loop with Puppeteer
body: <p>I have a nested html tags and I'm trying to scrape the text and link out of it. But for weird reason it's not working.</p>
  <p>I marked the line I want to scrape with <code></code> this emoji. One is the Link and Another one is text.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;q-box&quot; role=&quot;list&quot; style=&quot;box-sizing: border-box;&quot;&gt;
      &lt;div&gt;
        &lt;a class=&quot;q-box qu-display--block qu-cursor--pointer qu-hover--textDecoration--none Link___StyledBox-t2xg9c-0 KlcoI&quot; target=&quot;_blank&quot; href=&quot;https://www.quora.com/Can-Facebook-see-who-viewed-your-profile&quot; style=&quot;box-sizing: border-box; border-radius: inherit;&quot;&gt;
            &lt;div class=&quot;q-box qu-hover--textDecoration--underline qu-tapHighlight--none qu-display--flex qu-alignItems--center&quot; style=&quot;box-sizing: border-box; position: relative;&quot;&gt;
               &lt;div class=&quot;q-flex qu-alignItems--center qu-py--tiny qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                  &lt;div class=&quot;q-box qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                     &lt;div class=&quot;q-text qu-color--gray_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                        &lt;div class=&quot;q-box qu-py--tiny&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                           &lt;span class=&quot;q-text qu-color--blue_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                              &lt;div class=&quot;q-flex qu-flexDirection--row&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                                 &lt;div class=&quot;q-inline qu-flexWrap--wrap&quot; style=&quot;box-sizing: border-box; display: inline; max-width: 100%;&quot;&gt;
                                    &lt;div class=&quot;q-text qu-truncateLines--2 puppeteer_test_question_title&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                      &lt;span class=&quot;q-box qu-userSelect--text&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                      &lt;span style=&quot;background: none;&quot;&gt;Can Facebook see who viewed your profile?&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                                 &lt;/div&gt;
                              &lt;/div&gt;
                           &lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
       &lt;a class=&quot;q-box qu-display--block qu-cursor--pointer qu-hover--textDecoration--none Link___StyledBox-t2xg9c-0 KlcoI&quot; target=&quot;_blank&quot; href=&quot;https://onlinesocialmediasolution.quora.com/How-to-view-a-private-Facebook-profile&quot; style=&quot;box-sizing: border-box; border-radius: inherit;&quot;&gt;
            &lt;div class=&quot;q-box qu-hover--textDecoration--underline qu-tapHighlight--none qu-display--flex qu-alignItems--center&quot; style=&quot;box-sizing: border-box; position: relative;&quot;&gt;
               &lt;div class=&quot;q-flex qu-alignItems--center qu-py--tiny qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                  &lt;div class=&quot;q-box qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                     &lt;div class=&quot;q-text qu-color--gray_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                        &lt;div class=&quot;q-box qu-py--tiny&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                           &lt;span class=&quot;q-text qu-color--blue_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                              &lt;div class=&quot;q-flex qu-flexDirection--row&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                                 &lt;div class=&quot;q-inline qu-flexWrap--wrap&quot; style=&quot;box-sizing: border-box; display: inline; max-width: 100%;&quot;&gt;
                                    &lt;div class=&quot;q-text qu-truncateLines--2 puppeteer_test_question_title&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                      &lt;span class=&quot;q-box qu-userSelect--text&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                    &lt;span style=&quot;background: none;&quot;&gt;How do you view a private Facebook profile?&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                                 &lt;/div&gt;
                              &lt;/div&gt;
                           &lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
       &lt;a class=&quot;q-box qu-display--block qu-cursor--pointer qu-hover--textDecoration--none Link___StyledBox-t2xg9c-0 KlcoI&quot; target=&quot;_blank&quot; href=&quot;https://www.quora.com/How-can-you-tell-if-non-friends-have-viewed-your-Facebook-profile&quot; style=&quot;box-sizing: border-box; border-radius: inherit;&quot;&gt;
            &lt;div class=&quot;q-box qu-hover--textDecoration--underline qu-tapHighlight--none qu-display--flex qu-alignItems--center&quot; style=&quot;box-sizing: border-box; position: relative;&quot;&gt;
               &lt;div class=&quot;q-flex qu-alignItems--center qu-py--tiny qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                  &lt;div class=&quot;q-box qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                     &lt;div class=&quot;q-text qu-color--gray_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                        &lt;div class=&quot;q-box qu-py--tiny&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                           &lt;span class=&quot;q-text qu-color--blue_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                              &lt;div class=&quot;q-flex qu-flexDirection--row&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                                 &lt;div class=&quot;q-inline qu-flexWrap--wrap&quot; style=&quot;box-sizing: border-box; display: inline; max-width: 100%;&quot;&gt;
                                    &lt;div class=&quot;q-text qu-truncateLines--2 puppeteer_test_question_title&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                      &lt;span class=&quot;q-box qu-userSelect--text&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                          &lt;span style=&quot;background: none;&quot;&gt;How can you tell if non-friends have viewed your Facebook profile?&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                                 &lt;/div&gt;
                              &lt;/div&gt;
                           &lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
       &lt;a class=&quot;q-box qu-display--block qu-cursor--pointer qu-hover--textDecoration--none Link___StyledBox-t2xg9c-0 KlcoI&quot; target=&quot;_blank&quot; href=&quot;https://www.quora.com/Is-there-a-way-to-see-your-own-Facebook-profile-from-the-view-of-a-non-friend&quot; style=&quot;box-sizing: border-box; border-radius: inherit;&quot;&gt;
            &lt;div class=&quot;q-box qu-hover--textDecoration--underline qu-tapHighlight--none qu-display--flex qu-alignItems--center&quot; style=&quot;box-sizing: border-box; position: relative;&quot;&gt;
               &lt;div class=&quot;q-flex qu-alignItems--center qu-py--tiny qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                  &lt;div class=&quot;q-box qu-flex--auto qu-overflow--hidden&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                     &lt;div class=&quot;q-text qu-color--gray_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                        &lt;div class=&quot;q-box qu-py--tiny&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                           &lt;span class=&quot;q-text qu-color--blue_dark&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                              &lt;div class=&quot;q-flex qu-flexDirection--row&quot; style=&quot;box-sizing: border-box; display: flex;&quot;&gt;
                                 &lt;div class=&quot;q-inline qu-flexWrap--wrap&quot; style=&quot;box-sizing: border-box; display: inline; max-width: 100%;&quot;&gt;
                                    &lt;div class=&quot;q-text qu-truncateLines--2 puppeteer_test_question_title&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                      &lt;span class=&quot;q-box qu-userSelect--text&quot; style=&quot;box-sizing: border-box;&quot;&gt;
                                     &lt;span style=&quot;background: none;&quot;&gt;Is there a way to see your own Facebook profile from the view of a non-friend?&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                                 &lt;/div&gt;
                              &lt;/div&gt;
                           &lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>This is the Index.js file code I have done so far. But it's looping through all the marked emoji lines. Nor it's working.</p>
  <pre class="lang-js prettyprint-override"><code>const browser = await puppeteer.launch({
      headless: false,
    });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle2' });
    try {
      // loop through the selector and get the data
      await page.waitForSelector(
        '#root &gt; div.q-box &gt; div &gt; div &gt; div:nth-child(4) &gt; div &gt; div &gt; div:nth-child(2) &gt; div &gt; div'
      );
      const related = page.$eval(
        '#root &gt; div.q-box &gt; div &gt; div &gt; div:nth-child(4) &gt; div &gt; div &gt; div:nth-child(2) &gt; div &gt; div &gt; div.q-box.qu-mb--large &gt; div &gt; div:nth-child(2)',
        (el) =&gt; el.innerText
      );
      res.send(related);
    } catch (err) {
      // res.send(err, 500);
      console.log(err);
    }
    await browser.close();
  </code></pre>