How to locate either of two similar elements inside a

Question

I cannot locate err_message elements for email and password. I'm getting an error as:

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"body > div:nth-child(1) > div:nth-child(4) > form:nth-child(2) > div:nth-child(1) > p:nth-child(3)"}

Tried with:

.form-signin .form_item .err_message:nth-child(1), .err_message:nth-of-type(1)

HTML snapshot:

Answer 1

A CSS selector which starts from the body element and uses > to identify every descendant down to the target, as you have done, is not a great idea, because as soon as you move things around in your document, the selector will break. Instead, use classes or ids to target elements directly.

In your case, the only ids you have in your code are on the input fields, but as these immediately precede your error message elements, you could use the adjacent sibling combinator to target your error message elements:

The error message for the email field could be selected with any of the following:

• #email + p
• #email + .err_message
• #email + p.err_message

The error message for the password field could be selected with any of the following:

• #password + p
• #password + .err_message
• #password + p.err_message

Answer 2

To locate the <p> elements you can use the Email Address and Password field as a reference identified through unique attributes and you can use the following css_selector:

• <p> tag for Email Address field:

  WebElement element = driver.findElement(By.cssSelector("div.login_page form.form-signin div.form_item input#email +p"));
  

• <p> tag for Password field:

  WebElement element = driver.findElement(By.cssSelector("div.login_page form.form-signin div.form_item input#password +p"));