title: Puppeteer focus loop through input fields
body: <p>I've got a page with 50 input fields that I'm trying to change the value of using Puppeteer.</p>
  <p>Unfortunately just setting the value like below doesn't work since the website doesn't detect changes to the field:</p>
  <pre class="lang-js prettyprint-override"><code>await page.evaluate(() =&gt; {
      document.querySelectorAll('input[name=&quot;price&quot;]').forEach(function(item) {
          item.value = &quot;14,50&quot;;
      });
  });
  </code></pre>
  <p>So I've discovered I have to use <code>focus()</code> and <code>keyboard.type()</code>. The problem I'm running into is that the input field don't have unique names and I don't know how to write a <code>focus()</code> selector that loops through the inputs.</p>
  <pre><code>&lt;input _ngcontent-lhe-c73=&quot;&quot; id=&quot;id&quot; type=&quot;text&quot; name=&quot;price&quot; autocomplete=&quot;off&quot; class=&quot;price-input&quot; placeholder=&quot;vul de prijs in&quot;&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const inputs = await page.$eval('.price-input');
  for (let i = 0; i &lt; inputs.length; i++) {
      await page.evaluate(() =&gt; { document.querySelectorAll('input[name=&quot;price&quot;]')[i].value = ''; });
      await page.focus('input[name=&quot;price&quot;]['+i+']'); // this is invalid
      await page.keyboard.type('14,50');
  }
  </code></pre>
  <p>How do I write a <code>focus()</code> selector to select the correct value in the loop? I've been trying with nth-child but this doesn't seem to be possible.</p>