如何使用Protractor通过含空格的title属性定位div元素并点击？

你遇到的问题核心在于CSS属性选择器对带空格的属性值有语法要求——当属性值包含空格或特殊字符时，必须用引号把值完整包裹起来。你当前的选择器div[title=Create New Index]没给title值加引号，浏览器会把空格后的New Index当成额外的选择器规则，直接触发语法错误。

正确的写法 #

只需要给title的属性值加上单引号或双引号即可，两种写法都能正常工作：

// 使用双引号包裹title值
$$('.dhxtoolbar_float_left').get(0).$('div[title="Create New Index"]').click();

// 或者使用单引号包裹（注意转义，避免和外层字符串冲突）
$$('.dhxtoolbar_float_left').get(0).$('div[title=\'Create New Index\']').click();

原理说明 #

根据CSS选择器规范，当属性值是包含空格、逗号、方括号这类特殊字符的字符串时，必须用引号（单双均可）将其完整包裹。这样浏览器才能准确识别整个字符串作为属性的匹配值，而不会把空格后的内容误解析成其他选择器条件。

这样修改后，你完全不需要改动原元素的title属性，就能成功定位到目标工具栏按钮并触发点击事件了。

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