木偶师 page.type() select 第二 element/class

Question

我正在尝试 select 并使用“nxcard”编辑第三个 div 的第一个文本输入 class

这是页面结构：

<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>

这是原始代码（如果没有 puppeteer，我会怎么做）

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

这就是我尝试使用 puppeteer 做同样事情的方式

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

Answer 1

我能够使用以下 css 选择器解决它

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

来源：https://www.w3schools.com/cssref/css_selectors.asp

木偶师 page.type() select 第二 element/class

puppeteer page.type() select second element/class

javascript

automation

css-selectors

node.js

puppeteer