InvalidSelectorError：使用ng-click/ng-class定位元素时选择器无效问题

嘿，我之前也踩过一模一样的坑！问题根源在于你写的选择器里引号嵌套冲突，导致xpath/css解析器没法正确识别属性值，所以才抛出了InvalidSelectorError。下面给你几个亲测有效的解决方案：

针对ng-click的xpath定位修复 #

方案1：用双引号包裹属性值（配合JS转义或模板字符串） #

在JavaScript里，你可以用双引号包裹xpath中带单引号的属性值，避免引号冲突。如果用普通字符串记得转义双引号，用ES6模板字符串会更省心：

// 转义双引号写法
element(by.xpath("//a[contains(@ng-click,\"nodes.setViewType('tiles',true)\")]"));

// ES6模板字符串写法（可读性更高）
element(by.xpath(`//a[contains(@ng-click,"nodes.setViewType('tiles',true)")]`));

方案2：用xpath的concat函数拼接字符串 #

要是不想处理引号转义，还可以用xpath的concat()函数把带单引号的部分拆分开来拼接：

element(by.xpath("//a[contains(@ng-click, concat('nodes.setViewType(', \"'tiles'\", ',true)'))]"));

针对ng-class的css选择器修复 #

同理，css选择器里的属性值如果包含引号，必须用引号把整个属性值包裹起来，比如：

// 双引号包裹属性值
element(by.css("span[ng-class=\"nodes.viewType == 'tiles'? 'Tick-Active':'Tick-Inactive'\"]"));

// 模板字符串写法
element(by.css(`span[ng-class='nodes.viewType == "tiles"? "Tick-Active":"Tick-Inactive"']`));

更简洁的替代定位方式 #

其实你完全可以绕开这些复杂的属性定位，直接用元素的文本内容定位，既简单又不容易出错：

// 用linkText精准匹配a标签文本
element(by.linkText('Tile View'));

// 用xpath匹配标准化后的文本（避免空格干扰）
element(by.xpath("//a[normalize-space(text())='Tile View']"));

这些方法应该能帮你解决选择器无效的问题！

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