NoSuchElementError：没有这样的元素：尝试通过 WebdriverJS 定位元素时无法定位元素

Question

我使用 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");
                    })
        })
    })

Answer 1

当你有一个name 属性时，你可以使用

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

我用 Selenium 提供的 name 选择器替换了 css 选择器。还删除了单引号以添加双引号。

Answer 2

根据您共享的 HTML 来识别所需元素，您可以使用以下任一定位器策略：

• css：

  return driver.wait(until.elementLocated(By.css("input.f.w-input.ng-pristine.ng-invalid.ng-invalid-required.ng-touched[name='firstName'][placeholder='Your First Name']")), 20000)
  

• xpath：

  return driver.wait(until.elementLocated(By.xpath("//input[@class='f w-input ng-pristine ng-invalid ng-invalid-required ng-touched' and @name='firstName'][@ng-model=\"vm.formData.firstName\"]")), 20000)
  

Answer 3

您没有在两个实例中使用相同的 CSS 选择器。改变

[name-firstName]

到

[name='firstName']

在第二种情况下。

此外，您的代码看起来过于复杂。你试过this之类的吗？