title: Can't find element by ID with puppeteer
body: <p>I have the following element in my code:</p>
  
  <pre><code>&lt;div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false" id="1"&gt;&lt;div class="MuiListItemText-root"&gt;&lt;span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1"&gt;Arne Nordman (arne@nordman.no)&lt;/span&gt;&lt;/div&gt;&lt;span class="MuiTouchRipple-root"&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This element is a part of a drop-down list that appears after typing into a text field. Unfortunately, when I use the following code, the element can not be identified. It says "DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector". </p>
  
  <p>Here is my code:</p>
  
  <pre><code>const puppeteer = require("puppeteer");
  
  async function run() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
  
    await page.goto("http://localhost:3000/");
  
    await page.evaluate(() =&gt;
      [...document.querySelectorAll("button")].map(
        elem =&gt; elem.innerText === "Personell &amp; Institutions" &amp;&amp; elem.click()
      )
    );
  
    await page.type("input", "arne");
    await page.waitFor(1000);
    await page.$eval("#1", el =&gt; console.log("elemnet is:", el.innerText));
  }
  
  run();
  </code></pre>
  
  <p>Any help would be truly appreciated! </p>