I'm trying to select and edit the first text input of the third div with "nxcard" class

this is the page structure :

<div>
  <div class="nxcard">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <form>
      <input type="number" />
      <input type="text" />
    </form>
  </div>
  <div class="nxcard">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <form>
      <input type="number" />
      <input type="text" />
    </form>
  </div>
  <div class="nxcard">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <form>
      <input type="number" />
      <!-- the input I want to select using pupeteer : -->
      <input type="text" />
    </form>
  </div>
</div>

this is the original code (how I'd have done it without puppeteer)

  const loginCard = document.getElementsByClassName("nxCard")[2];
  const loginForm = loginCard.getElementsByTagName("form")[0];
  const loginUserName = loginForm.getElementsByTagName("input")[1];
  loginUserName.value = "user1";

and this is how I've tried to do the same thing using puppeteer

  await page.type(".nxcard[2] form input[1]", "user1");