title: No node for selector while using puppeteer on facebook messenger
body: <p>I'm using Puppeteer to make a Facebook messenger api(kind of) for my home project.</p>
  
  <p>Till now, I can login into my account using puppeteer successfully.</p>
  
  <p>The real problem starts when I want to automate after logging in.</p>
  
  <p>I can't click on any element.</p>
  
  <hr>
  
  <p><strong>For Example</strong>:</p>
  
  <p><strong><em>I want to click on the little 'i' icon</em></strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/vkP29.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vkP29.png" alt="enter image description here"></a></p>
  
  <p><strong><em>Then I copied the selector like</em></strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/KNUqk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KNUqk.png" alt="enter image description here"></a></p>
  
  <p><strong><em>I'm getting the following error in the conso</em>le</strong>:</p>
  
  <pre><code>(node:4771) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): AssertionError [ERR_ASSERTION]: No node found for selector: #cch_feb64f1b00e628 &gt; div._5742 &gt; ul &gt; li:nth-child(4) &gt; a &gt; div &gt; svg
  (node:4771) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  </code></pre>
  
  <p><strong>Code</strong>:</p>
  
  <pre><code>const puppeteer = require('puppeteer');
  
  (async function() {
  
      // This function is used to login into the account.
      async function login() {
          console.log('=====In Login=====');
          const email = '#email';
          const pass = '#pass';
          const submit = '#loginbutton';
          await page.waitFor(3000);
          await page.click(email);
          await page.waitFor(2000);
          await page.keyboard.type('not_a_real_email@mail.com');
          await page.waitFor(2000);
          await page.click(pass);
          await page.waitFor(2000);
          await page.keyboard.type('not_a_real_password');
          await page.waitFor(2000);
          await page.click(submit);
          return 0;
      }
  
      const browser = await puppeteer.launch({ headless: false });
      const page = await browser.newPage();
  
  
      page.on('load', () =&gt; console.log('=====Page loaded!====='));
  
      await page.goto('https://messenger.com');
      await login();
      await page.waitForNavigation();
      await page.waitFor(3000); // I'm waiting just for safe side to make sure the element is loaded.
  
      // This is the line where the 'i' is clicked.
      // This is the line error occurs.
      await page.click(
          '#cch_feb64f1b00e628 &gt; div._5742 &gt; ul &gt; li:nth-child(4) &gt; a &gt; div &gt; svg'
      );
  
  })();
  </code></pre>
  
  <p>So, according to the above error, I know that the selector is wrong. Then what is the correct selector? Not only that, I'm getting same error when I tried it on other elements like the emoji element.</p>