获取带::before的dot元素颜色时遇JavascriptException问题求助

核心错误原因 #

document.querySelector('.dot[_ngcontentephc8]')未找到目标元素，导致getComputedStyle接收的第一个参数不是合法的Element对象，触发类型错误。

具体问题点及修复方案 #

1. 动态选择器失效
   Angular生成的_ngcontentephc8是动态视图封装属性，每次编译、环境变更都会改变，用它作为选择器会导致元素定位失败。
   修复：改用稳定的静态选择器，比如仅保留.dot类名（若该类在页面中唯一），或结合其他静态属性定位，示例：

   document.querySelector('span.dot') // 假设圆点是带dot类的span标签
   

2. Java语法错误
   代码中System.out.println("colorCode);和System.out.println("hexColorCode);存在字符串闭合错误，缺少结尾引号与右括号，正确写法：

   System.out.println(colorCode);
   System.out.println(hexColorCode);
   

3. 属性获取不精准
   background是复合属性，可能返回包含背景图片、位置等的完整值，建议直接获取background-color来精准提取颜色：

   return window.getComputedStyle(document.querySelector('.dot'), ':before').getPropertyValue('background-color');
   

修复后的完整代码示例 #

String script = "return window.getComputedStyle(document.querySelector('.dot'), ':before').getPropertyValue('background-color')";
JavascriptExecutor jse = (JavascriptExecutor) Browser.getDriver();
String colorCode = (String) jse.executeScript(script);
System.out.println(colorCode);
String hexColorCode = convertBackgroundColorToHexFormat(colorCode);
System.out.println(hexColorCode);
return hexColorCode.equalsIgnoreCase(color);

额外验证建议 #

• 先在浏览器控制台执行document.querySelector('.dot')，确认能正确返回目标元素，再执行完整的getComputedStyle代码，验证颜色值是否可正常获取。
• 若页面中.dot类不唯一，需补充父元素、兄弟元素等定位条件，确保选择器唯一匹配目标圆点元素。

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