title: puppeteer page.type() select second element/class
body: <p>I'm trying to select and edit the first text input of the third div with &quot;nxcard&quot; class</p>
  <p>this is the page structure :</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;nxcard&quot;&gt;
      &lt;h3&gt;Lorem ipsum dolor sit amet.&lt;/h3&gt;
      &lt;form&gt;
        &lt;input type=&quot;number&quot; /&gt;
        &lt;input type=&quot;text&quot; /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class=&quot;nxcard&quot;&gt;
      &lt;h3&gt;Lorem ipsum dolor sit amet.&lt;/h3&gt;
      &lt;form&gt;
        &lt;input type=&quot;number&quot; /&gt;
        &lt;input type=&quot;text&quot; /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class=&quot;nxcard&quot;&gt;
      &lt;h3&gt;Lorem ipsum dolor sit amet.&lt;/h3&gt;
      &lt;form&gt;
        &lt;input type=&quot;number&quot; /&gt;
        &lt;!-- the input I want to select using pupeteer : --&gt;
        &lt;input type=&quot;text&quot; /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>this is the original code (how I'd have done it without puppeteer)</p>
  <pre class="lang-js prettyprint-override"><code>  const loginCard = document.getElementsByClassName(&quot;nxCard&quot;)[2];
    const loginForm = loginCard.getElementsByTagName(&quot;form&quot;)[0];
    const loginUserName = loginForm.getElementsByTagName(&quot;input&quot;)[1];
    loginUserName.value = &quot;user1&quot;;
  </code></pre>
  <p>and this is how I've tried to do the same thing using puppeteer</p>
  <pre><code>  await page.type(&quot;.nxcard[2] form input[1]&quot;, &quot;user1&quot;);
  </code></pre>