CODEWITHSUNDEEP
javascriptnode.jsautomationcss-selectorspuppeteer
Donald Abanoub
Donald Abanoub

Reputation: 37

puppeteer page.type() select second element/class

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");

Upvotes: 1

Views: 2077

Answers (1)

Donald Abanoub
Donald Abanoub

Reputation: 37

I was able to solve it using the following css selector

await page.type(".nxcard:last-child input:nth-child(1)" , "user1")

src : https://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 1

Related Questions