如何用Nightwatch.js验证输入框文本颜色（数值超140变红）

需求与场景 #

当输入数值大于140时，目标输入框的文本会变为红色，需要通过Nightwatch.js验证该颜色是否正确。

相关代码与元素 #

• HTML元素：

<input placeholder="Systolic" type="text" class="form-control" value="150">

• 使用的CSS选择器：

#root > div > main > div > div:nth-child(2) > div > div:nth-child(2) > form > div:nth-child(1) > div.row.mt-4 > div > div.carenotebox > div > div:nth-child(3) > div:nth-child(2) > div.ml-2.carenote-textbox-holder.labOutOfRange > div > input

• 未生效的验证代码：

browser.expect.element('#root > div > main > div > div:nth-child(2) > div > div:nth-child(2) > form > div:nth-child(1) > div.row.mt-4 > div > div.carenotebox > div > div:nth-child(3) > div:nth-child(2) > div.ml-2.carenote-textbox-holder.labOutOfRange > div > input').to.have.css('color').which.equals('red')

问题原因 #

1. 浏览器返回的color属性值通常是RGB格式（如rgb(255, 0, 0)）或十六进制格式（如#ff0000），而非字符串red，直接匹配red会失败。
2. 过长的CSS选择器稳定性差，容易因DOM结构微小变化失效。

解决方案 #

1. 匹配浏览器实际返回的颜色值

将验证值改为RGB或十六进制格式，示例：

// 验证RGB格式
browser.expect.element('.labOutOfRange input.form-control').to.have.css('color').which.equals('rgb(255, 0, 0)');

// 或验证十六进制格式（注意部分浏览器返回大写#FF0000，可统一格式后匹配）
browser.expect.element('.labOutOfRange input.form-control').to.have.css('color').which.equals('#ff0000');

2. 简化CSS选择器

利用元素的class和属性简化选择器，提升稳定性：

• 结合placeholder属性和class：.form-control[placeholder="Systolic"]
• 结合父类labOutOfRange：.labOutOfRange input.form-control

3. 添加等待确保样式生效

输入数值后，可能需要等待样式更新完成再验证：

browser.waitForElementVisible('.labOutOfRange input.form-control', 1000)
  .expect.element('.labOutOfRange input.form-control').to.have.css('color').which.equals('rgb(255, 0, 0)');

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