如何通过标签文本使用Puppeteer定位并操作密码输入框？

我尝试用Puppeteer点击密码字段并输入文本，但页面内的字段ID均为动态生成，只能通过标签文本（如「Old Password：」「New Password：」）定位对应输入框（页面存在多个type="password"元素）。我编写的代码没有效果，求帮助：

页面相关HTML代码 #

<label for="ext-gen572" style="width:180px;" class="x-form-item-label" id="ext-gen703">Old Password：</label>
<input type="password" autocomplete="off" data-flag="true" id="ext-gen572" name="ext-gen572" class="x-form-text x-form-field" size="20" maxlength="64">

<label for="ext-gen573" style="width:180px;" class="x-form-item-label" id="ext-gen706">New Password：</label>
<input type="password" autocomplete="off" data-flag="true" id="ext-gen573" name="ext-gen573" class="x-form-text x-form-field x-form-invalid" size="20" maxlength="64">

我写的无效代码 #

await page.evaluate(() => {
        const elements = [...document.queryselectorall('label')];
        const targetelement = elements.find(e => e.contains == 'Old Password：');
        if (targetelement) targetelement.click();
    });

问题分析与修正方案 #

你的代码有两个关键错误：

1. 拼写错误：document.queryselectorall应为document.querySelectorAll（注意大小写和完整拼写）
2. 文本匹配逻辑错误：e.contains是DOM节点包含关系判断方法，不能用来匹配文本内容，需用textContent获取标签文本后再比对

方案1：修正evaluate内的逻辑 #

await page.evaluate(() => {
  // 遍历所有label，找到文本匹配的目标标签
  const oldPwdLabel = Array.from(document.querySelectorAll('label')).find(
    label => label.textContent.trim() === 'Old Password：'
  );
  
  if (oldPwdLabel) {
    // 通过label的for属性获取对应input的ID，定位输入框
    const inputElement = document.getElementById(oldPwdLabel.getAttribute('for'));
    if (inputElement) {
      inputElement.focus(); // 聚焦输入框
      inputElement.value = '你的旧密码'; // 输入内容
    }
  }
});

方案2：用Puppeteer XPath选择器（更推荐） #

直接通过XPath关联标签与对应输入框，且Puppeteer的$x方法会自动等待元素加载完成，无需手动处理元素存在性：

// 定位旧密码输入框并输入
const oldPwdInput = await page.$x("//label[text()='Old Password：']/following-sibling::input[@type='password']");
if (oldPwdInput.length > 0) {
  await oldPwdInput[0].click();
  await oldPwdInput[0].type('你的旧密码'); // type方法模拟真实输入，支持自动延迟
}

// 定位新密码输入框并输入同理
const newPwdInput = await page.$x("//label[text()='New Password：']/following-sibling::input[@type='password']");
if (newPwdInput.length > 0) {
  await newPwdInput[0].click();
  await newPwdInput[0].type('你的新密码');
}

内容的提问来源于stack exchange，提问作者Andy Yu