title: Puppeteer: proper selection of inner text
body: <p>I want to grab a string that has a particular class name, lets say 'CL1'.</p>
  
  <p>This is what is used to do and it worked:
  (we are inside an asycn function)</p>
  
  <pre><code>var counter = await page.evaluate(() =&gt; {
              return document.querySelector('.CL1').innerText;
          });
  </code></pre>
  
  <p>Now, after some months, when i try to run the code i get this error:</p>
  
  <pre><code>Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null
  </code></pre>
  
  <p>I did some debugging with some <code>console.log()</code> before and after the previous snippet of code and found out that this is the culprit.</p>
  
  <p>I looked the code of the webpage and the particular class is inside.</p>
  
  <p>But i found out two more classes with the same name.</p>
  
  <p>All three of them are nested deep inside many classes.</p>
  
  <p>So what is the proper way to selected the one i want, given i know the class hierarchy for the one i am interested in?</p>
  
  <p>EDIT:
  Since there are three class names with the same name, and i want to extract info from the first, can i use an array notation on the querySelector() to access the information from the first one?</p>
  
  <p>EDIT2:
  I run this:</p>
  
  <pre><code>return document.querySelector('.CL1').length;
  </code></pre>
  
  <p>and i got</p>
  
  <pre><code>Error: Evaluation failed: TypeError: Cannot read property 'length' of null
  </code></pre>
  
  <p>This gets even more confusing...</p>
  
  <p>EDIT 3:
  I trie the suggestion of Md Abu Taher and i saw that the snippet of code he provided did not return undefined. This means that the selector is visible to my code.</p>
  
  <p>Then i run this snippet of code:</p>
  
  <pre><code>var counter = await page.evaluate(() =&gt; {
              return document.querySelector('#react-root &gt; section &gt; main &gt; div &gt; header &gt; section &gt; ul &gt; li:nth-child(1) &gt; a &gt; span').innerText;
              });
  </code></pre>
  
  <p>And i got back the same error:</p>
  
  <pre><code>Error: Evaluation failed: TypeError: Cannot read property 'innerText' of null
  </code></pre>