How to find the second value with same CSS class using Selenium webdriver

Question

I want to select from a li (it looks like a dropdown but it is not) the second value (in my example, Bellevue). Here is a screenshot:

I am using Page Objects and I am looking after elements using @FindBy annonations. Here is what I tried:

@FindBy(how=How.CSS,using = "a[id^='ui-id-'][1]")

I receive the error:

The given selector a[id*='ui-id-'](1) is either invalid or does not result in a WebElement

or using

@FindBy(how=How.CSS,using = "a[id^='ui-id-']"[1])`

I get the error:

the type of expression must be an array but it resolved to string`.

It worked if I used:

WebElement value = driver.findElements(By.cssSelector("a[id^='ui-id']")).get(3);

value.click();

but I must use @FindBy and I can not get it to work on get(3) method.

Answer 1

You can't index elements using [] in CSS selectors.

Here is what you might want to try:

@FindBy(how=How.CSS,using = "li.ui-menu-item:nth-of-type(2) > a[id^='ui-id-']")

Or use XPath

@FindBy(how=How.XPATH,using = "(//a[starts-with(@id, 'ui-id-')])[2]")

Answer 2

You can create some method where you access needed element without web element defined with FindBy annotation. For example

public void yourMethod(WebDriver driver) {
   WebElement value = driver.findElements(By.cssSelector("a[id^='ui-id']")).get(3); 
   value.click();
}

Answer 3

IIRC, you can use XPath to do something like this: @FindBy(how=How.XPATH,using = "(//a[contains(@class, 'ui-id-')])[2]") where the final [2] specifies the second element returned by the previous XPath.

(sorry, I'm working from memory - I haven't tested this specific XPath)