NoSuchElementError: no such element: Unable to locate element with WebdriverJS

Question

I am having trouble locating the elements on my page. My page may have anywhere between 0 to 20 of these elements. I want to locate the element and verify the text of the element.

Here is my element:

<span _ngcontent-c47="" class="vehicle-title h5 m-0">
<a _ngcontent-c47="" href="https://abc-xyz.com/pqr/classic/4183C62C-A7AE-45BA-BAB8-0DD7082A8A30">2018 Acura MDX </a>
</span>

<span _ngcontent-c47="" class="vehicle-title h5 m-0">
<a _ngcontent-c47="" href="https://abc-xyz.com/pqr/classic/4183C62C-A7AE-45BA-BAB8-0DD7082A8A28">2016 ACURA MDX </a>
</span>

I tried bunch of solutions suggested online including below ones but always getting unable to locate element exception.

await driver.findElements(webdriver.By.className('vehicle-title h5 m-0')).then(async function(elements_arr) {
//some code
}

await driver.findElements(webdriver.By.xpath('//span[contains(@class, "vehicle-title h5 m-0")]')).then(async function(elements_arr) {
//some code
}

Answer 1

As per the HTML you have shared you can use the following solution to locate the elements:

• 2018 Acura MDX :

   await driver.findElements(webdriver.By.xpath("//span[@class='vehicle-title h5 m-0']/a[contains(., '2018 Acura MDX')]")).then(async function(elements_arr) { //some code } 

• 2016 ACURA MDX :

   await driver.findElements(webdriver.By.xpath("//span[@class='vehicle-title h5 m-0']/a[contains(., '2016 Acura MDX')]")).then(async function(elements_arr) { //some code } 

Answer 2

If you have case when element requires some time to be loaded, just use something like:

await driver.wait(until.elementLocated(by.xpath("//*[@class='vehicle-title h5 m-0']")), 10000).thenDoSomethingWithTheElement();

Actually a use async\\await syntax to make the view more beautiful and clear and there is no need in promiceses