NoSuchElementError: no such element: Unable to locate element while trying to locate element through WebdriverJS

Question

I was using css to locate element, i was trying to avoid xpath just in case, but im having trouble with the element. Im still getting error:

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

It only works on xpath, but i want to use css locator. Is it a good practice to avoid xpath when locating element? thank you guys!

Here is the whole element:

<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">

Here is the code trial :

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

JeffC · Answer 1 · 2018-05-14T13:16:33.997

0

You aren't using the same CSS selector in both instances. Change

[name-firstName]

to

[name='firstName']

in the second instance.

Also, your code looks overly complicated. Have you tried something like this?

edited May 14 '18 at 13:16

answered May 14 '18 at 03:01

JeffC

22,180
5
32
55

1

When you say `not working` - does it throw any error or does it not do anything? Please clarify. – demouser123 May 14 '18 at 05:32
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/19717997) – Atul Sharma May 14 '18 at 13:05
@AtulSharma Sure it does. The question title is referring to a `NoSuchElementError`. The error text provided shows that the CSS selector, `[name-firstName]`, was used which is incorrect given the provided HTML. The OP requested a CSS selector so I corrected it. What do you think the OP's question is that I didn't answer? – JeffC May 14 '18 at 13:11
Is this element in an `IFRAME`? – JeffC May 14 '18 at 13:12

score 0 · Answer 2 · answered May 14 '18 at 05:34

When you've a name attribute, you can use

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

I replaced the css selector with the name selector that Selenium provides. Also single quotes removed to add double quotes.

score 0 · Answer 3 · answered May 14 '18 at 07:01

As per the HTML you have shared to identify the desired element you can use either of the following Locator Strategies :

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)

NoSuchElementError: no such element: Unable to locate element while trying to locate element through WebdriverJS

3 Answers3