title: document.querySelector() returns null when DOM elements are already visible
body: <p>I am trying to build an automated Puppeteer script to download my monthly bank transactions from my bank website.</p>
  
  <p>However, I am encountering a strange error (see attached Imgur for pictures of this behavior)</p>
  
  <p><a href="https://imgur.com/a/rSwCAxj" rel="nofollow noreferrer">https://imgur.com/a/rSwCAxj</a></p>
  
  <p><strong>Problem: querySelector returns null on DOM element that is clearly visible:</strong></p>
  
  <p>Screenshot: <a href="https://imgur.com/d540E6p" rel="nofollow noreferrer">https://imgur.com/d540E6p</a></p>
  
  <p>(1) Input box for username is clearly visible on site (<a href="https://internet.ocbc.com/internet-banking/" rel="nofollow noreferrer">https://internet.ocbc.com/internet-banking/</a>), 
  (2) However, when I run <code>document.querySelector('#access-code')</code>, console returns null.</p>
  
  <p>I'm wondering why this behavior is so, and what are the circumstances that a browser would return null on a <code>querySelector(#id) query</code> when the DOM node is clearly visible.</p>
  
  <p><strong># EDIT: Weird workaround that works</strong>:</p>
  
  <p>I was continuing to play around with the browser, and used DevTools to inspect the DOM element and use it to Copy the JS Path.</p>
  
  <p>Weirdly, after using Chrome Devtools to copy the JS Path, <code>document.querySelector('#access-code')</code> returned the correct element.</p>
  
  <p><em>Screenshot of it returning the correct element</em>: <a href="https://imgur.com/a/rSwCAxj" rel="nofollow noreferrer">https://imgur.com/a/rSwCAxj</a></p>
  
  <p>In both cases, the exact same search string is used for <code>document.querySelector</code>.</p>