如何使用Nightmare.js向两个同class的元素输入文本？

嘿，我来帮你搞定这个登录自动化的小麻烦！你提到因为两个输入框的class都是form-control，只能定位到用户名框——其实完全不用局限于class，这两个输入框的name属性是独一无二的，刚好可以用来精准区分它们！

核心解决方案：使用属性选择器定位 #

Nightmare.js支持标准的CSS选择器，我们可以直接通过name属性来定位每个输入框，具体做法如下：

完整代码示例 #

const Nightmare = require('nightmare');
const co = require('co');

co(function*() {
  // 初始化Nightmare，show: true可以显示浏览器窗口方便调试
  const nightmare = Nightmare({ show: true });
  
  yield nightmare
    .goto('你的登录页面URL') // 替换成实际的登录页面地址
    // 通过name属性定位用户名输入框并输入内容
    .type('input[name="username"]', '你的游戏内用户名')
    // 通过name属性定位密码输入框并输入内容
    .type('input[name="password"]', '你的登录密码')
    // 点击登录按钮（根据实际页面调整选择器，比如用按钮的type或class）
    .click('button[type="submit"]')
    .wait(3000); // 等待页面加载或跳转，时间可按需调整

  // 结束Nightmare实例
  yield nightmare.end();
}).catch(error => {
  console.error('自动化过程出错:', error);
});

为什么这个方法有效？ #

• 用户名输入框的name是username，密码框的name是password，这两个属性值在页面中是唯一的，不会出现冲突
• CSS属性选择器input[name="xxx"]可以精准匹配到对应的输入框，比共用的form-control class更可靠

备选方案（如果name属性不可用的情况） #

如果出于某些原因不能用name属性，还可以通过以下方式定位：

• 利用输入框的type属性：input[type="password"]专门定位密码框，input[type="text"]定位用户名框
• 结合父元素的选择器：比如如果密码框在某个特定的div下，可以用.password-container input.form-control（需要根据实际页面结构调整）

这样你就能顺利完成两个输入框的内容填充啦！

内容的提问来源于stack exchange，提问作者Aidan el Goste