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

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

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吗？

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

3 个答案: