如何使用CSS选择器选中指定文本，及Nightwatch中XPath定位方法

原生CSS选择器没有提供基于文本内容匹配元素的能力，网上提到的:contains()选择器是jQuery自定义的非标准语法，浏览器原生不支持，所以你没办法直接用纯CSS实现选中指定文本的span标签的需求。你可以通过以下两种方案实现需求：

方案1：直接在Nightwatch中使用XPath定位 #

Nightwatch原生支持XPath定位，你只需要调整调用方式即可直接使用你写好的XPath逻辑：

• 写法1（推荐）：调用操作方法时显式传入定位策略参数，不会影响其他代码的默认定位规则：

SelectFilterValue(value) {
  // 第一个参数指定定位策略为xpath，第二个参数传XPath表达式
  return this.click('xpath', `//span[normalize-space(text())="${value}"]`)
}

这里用normalize-space()是为了过滤文本前后的空格、换行符，避免因为页面文本有多余空白字符导致匹配失败。

• 写法2：临时切换全局定位策略为XPath，操作完成后切回默认的CSS模式：

SelectFilterValue(value) {
  return this
    .useXpath() // 切换为XPath定位模式
    .click(`//span[normalize-space(text())="${value}"]`)
    .useCss() // 执行完成后切回默认CSS选择器模式，不影响后续代码
}

方案2：仅当你可以修改前端页面代码时，可用CSS选择器实现 #

你可以给需要匹配的span标签新增自定义属性，比如data-filter-value，属性值和span的文本内容保持一致：

<span data-filter-value="Auto-Publish">Auto-Publish</span>

之后就可以用CSS属性选择器匹配元素，不需要用到XPath：

SelectFilterValue(value) {
  return this.click(`span[data-filter-value="${value}"]`)
}

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