title: In puppeteer how to wait for DOM element lo load and then click
body: <p>In puppeteer how to wait for DOM element to load and then click. I am trying access a simple page, hit the <strong>Start</strong> button and then a text field should appear, and I need to type in that text field. </p>
  
  <p>Code given as below.</p>
  
  <pre><code>const puppeteer = require('puppeteer');
  const sleep = (waitTimeInMs) =&gt; new Promise(resolve =&gt; setTimeout(resolve, waitTimeInMs));
  
  (async () =&gt; {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto('https://janus.conf.meetecho.com/videocalltest.html');
    await page.click('#start', {waitUntil: 'domcontentloaded'});
    //await sleep(5000);
    await page.type('#username', 'austin');
    await sleep(5000);
    await browser.close();
  })();
  </code></pre>
  
  <p>However if I put a sleep of 5 second (commented in above code), then I am able to type in text field.</p>
  
  <p>I want to avoid giving sleep. Please suggest whats the work around. </p>