如何使用Protractor脚本验证密码是否处于隐藏（非明文）状态？

当然可以验证！你遇到的element.getAttribute('value')返回明文的情况很正常——浏览器会记住输入框的实际值，但这和它的显示状态是完全两回事。密码是否隐藏，本质上是由输入框的type属性决定的，我们可以从这里入手完成验证。

核心验证方法：检查input的type属性 #

标准的密码输入框，其type属性值是password，这时候浏览器会自动将输入内容显示为圆点或星号。我们只需要断言这个属性值即可：

const passwordInput = element(by.id('your-password-input-id'));

// 验证密码处于隐藏状态
expect(passwordInput.getAttribute('type')).toEqual('password');

处理动态切换显示/隐藏的场景 #

如果你的页面有「显示密码」的按钮（点击后密码明文显示，再点击变回隐藏），那可以扩展验证逻辑：

• 点击显示按钮后，断言输入框的type变为text
• 再次点击按钮，断言type回到password

示例代码：

const showPasswordBtn = element(by.id('show-password-btn'));
const passwordInput = element(by.id('your-password-input-id'));

// 初始状态：密码隐藏
expect(passwordInput.getAttribute('type')).toEqual('password');

// 点击显示按钮，验证明文显示
showPasswordBtn.click();
expect(passwordInput.getAttribute('type')).toEqual('text');

// 再次点击，验证回到隐藏状态
showPasswordBtn.click();
expect(passwordInput.getAttribute('type')).toEqual('password');

特殊情况：自定义密码隐藏实现 #

有些前端框架可能会用自定义方式实现密码隐藏（比如用带星号的span覆盖输入框，或者修改字体样式），这种情况下你需要根据具体的DOM结构调整验证逻辑：

• 检查覆盖元素是否存在且可见
• 验证输入框的样式是否设置了隐藏文本的相关属性（比如-webkit-text-security: disc）

不过这种情况比较少见，绝大多数场景下，检查type属性就足够解决问题了。

内容的提问来源于stack exchange，提问作者J. Nee