WebdriverJS中CSS选择器定位元素失败，咨询是否应规避XPath

我尝试用CSS选择器定位页面元素，想尽量不用XPath，但一直抛出错误：

(node:7516) UnhandledPromiseRejectionWarning: NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"[name-firstName]"}

目前只有XPath能成功定位这个元素，但我还是想改用CSS选择器。另外也想问问，定位元素时刻意规避XPath是不是最佳实践？

对应的元素代码：

<input type="text" class="f w-input ng-pristine ng-invalid ng-invalid-required ng-touched" name="firstName" required="" ng-readonly="vm.showLoading" ng-model="vm.formData.firstName" placeholder="Your First Name">

我的尝试代码：

driver.get("www.examplewebsiteonly.com") .then(function() { 
  return driver.wait(until.elementLocated(By.css('[name=firstName]')), 20000) 
  .then(function(){ 
    driver.sleep(20000) 
    .then(function(){ 
      return driver.findElement(By.css('[name-firstName]')).sendKeys("FirstName"); 
    }) 
  }) 
})

首先，你的CSS选择器犯了语法错误！ #

看报错里的选择器是[name-firstName]，这是典型的写法错误——CSS属性选择器的正确格式是[属性名=属性值]，你把等号写成减号了！正确的写法应该是[name="firstName"]（不带引号的[name=firstName]也能生效）。

而且看你的代码，前面wait阶段用的是正确的[name=firstName]，但后面findElement又写错成了[name-firstName]，这就是定位失败的直接原因！把这个错误修正后，CSS选择器就能正常定位到目标元素了。

关于“是否要刻意规避XPath” #

其实没有绝对的“最佳实践”要求必须排斥XPath，核心是看场景选择合适的工具：

• 优先用CSS选择器的场景：当元素有稳定的class、id、name属性，或者可以通过层级、属性组合定位时，CSS选择器通常更简洁，大部分浏览器对CSS的解析性能也更好。
• 适合用XPath的场景：比如需要通过文本内容定位（//*[text()='xxx']）、复杂的反向层级定位（比如通过子元素找父元素）、或者元素没有稳定属性只能依赖结构定位时，XPath的灵活性会更有优势。

总结：不用刻意规避XPath，而是根据元素的实际情况选择最稳定、最易维护的定位方式。能用CSS搞定就用CSS，CSS覆盖不到的场景再用XPath，两者都是定位工具，没必要刻意排斥其中一个。

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