如何使用Protractor验证元素是否禁用？已尝试两种方法均失败

我来帮你捋一捋这个问题，你遇到的两种方法失效的情况其实很典型，咱们先分析原因，再给你可行的解决方案：

为什么你的两种方法会失败？ #

• isEnabled() 返回true：这个API的核心是判断元素是否可交互，而非单纯看视觉上的禁用状态。如果元素的禁用是通过CSS模拟的（比如加了pointer-events: none或者灰色样式），但DOM里没设置原生的disabled属性，isEnabled()就会认为元素是可交互的，返回true。
• getAttribute('disabled') 返回null：说明这个元素的禁用状态根本不是通过原生HTML的disabled属性实现的。很多UI框架会用自定义属性（比如data-disabled="true"）、CSS类（比如is-disabled）或者纯样式来模拟禁用效果，这时候自然拿不到disabled属性值。

可行的验证方案 #

根据元素禁用的实现方式，你可以选下面的方法：

1. 检查原生disabled属性是否存在 #

如果元素确实用了原生disabled属性（哪怕属性值是空的），可以直接验证属性存在，而不是验证属性值等于disabled：

// Jasmine/Cypress 示例
expect(locator).toHaveAttribute('disabled');

// Playwright 示例
await expect(locator).toHaveAttribute('disabled');

2. 检查禁用相关的CSS类 #

很多UI组件库会给禁用元素加特定的类名，比如disabled、is-disabled或者ant-btn-disabled（Ant Design），直接验证类是否存在：

// 验证元素包含禁用类
expect(locator).toHaveClass('is-disabled');

3. 检查元素的交互样式 #

如果是通过CSS样式阻止交互的，比如pointer-events: none，可以通过计算样式来验证：

// 示例：获取元素的pointer-events样式
const pointerEvents = await locator.evaluate(el => getComputedStyle(el).pointerEvents);
expect(pointerEvents).toBe('none');

4. 直接验证元素不可交互 #

最直接的方式是尝试点击元素，验证是否无法触发预期行为，或者捕获点击失败的异常：

// Playwright 示例：尝试点击禁用元素会抛出错误
await expect(locator.click()).rejects.toThrow();

小提示 #

先打开浏览器开发者工具（F12），定位到这个禁用元素，看看它的DOM结构：

• 有没有disabled属性？
• 有没有额外的禁用类？
• 样式里有没有pointer-events: none或者其他阻止交互的设置？
  搞清楚实现方式，再选对应的验证方法就准没错啦！

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