Discovering the second value with a matching CSS class using Selenium WebDriver

Question

Discovering the second value with a matching CSS class using Selenium WebDriver

How can I select the second value from a list item that appears as a drop-down on a web page? In this case, the second value is 'Bellevue'. Refer to the screenshot below:

I am implementing Page Objects and trying to locate elements using @FindBy annotations. Here is my attempted solution:

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

However, I encountered the following error:

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

Alternatively, when I tried:

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

I received the error:

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

I managed to make it work by using the following code:

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

value.click();

However, I need to implement @FindBy and have been unsuccessful with the get(3) method.

java css selenium webdriver

Answer 1

Answer №1

Indexing elements using [] in CSS selectors is not possible.

If you want to achieve a similar result, consider the following:

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

Another option is to use XPath:

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

Answer 2

Indexing elements using [] in CSS selectors is not possible.

If you want to achieve a similar result, consider the following:

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

Another option is to use XPath:

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

Answer 3

Answer №2

One way to handle this situation is by implementing a custom method that allows you to access the necessary element without explicitly defining it as a web element using the FindBy annotation. Here's an example:

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

Answer 4

One way to handle this situation is by implementing a custom method that allows you to access the necessary element without explicitly defining it as a web element using the FindBy annotation. Here's an example:

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

Answer 5

Answer №3

As far as I can remember, XPath can be utilized to achieve a task similar to the following: @FindBy(how=How.XPATH,using = "(//a[contains(@class, 'ui-id-')])[2]") where the [2] at the end indicates the second element retrieved by the preceding XPath.

(apologies for any inaccuracies, this is based on my recollection - I have not verified this specific XPath)

Answer 6

As far as I can remember, XPath can be utilized to achieve a task similar to the following: @FindBy(how=How.XPATH,using = "(//a[contains(@class, 'ui-id-')])[2]") where the [2] at the end indicates the second element retrieved by the preceding XPath.

(apologies for any inaccuracies, this is based on my recollection - I have not verified this specific XPath)

Discovering the second value with a matching CSS class using Selenium WebDriver

Answer №1

Answer №2

Answer №3

Similar questions

Placing an image on the chosen option of a <mat-select> using Angular Material

Having trouble scraping YouTube views effectively using Selenium

Creating a text container in PHP for displaying information

Having trouble with CSS basics? Seeing properties change across multiple classes?

Strategies for effectively managing pop-up windows to interact with their contents

How can you find the "et-custom-css" section in WordPress?

The ngModel in Angular 2 does not update when a selection is made

When scrolling down a webpage, the background color of the content does not stretch along with the page

The slicing of jQuery parent elements

How to extract and print content within a div element using Selenium and Python

Incorporating a classList.toggle into a snippet of code

What is the most effective way to alter the font within this Bootstrap template?

Adding a CSS class to an HTML element using JQuery

Looking to replace a background image using javascript?

I am in need of setting up two rows side by side using the display

"Enhance the Navbar with a pop of color by changing

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Challenges arise when media queries fail to activate properly

Having trouble with your custom accordion content in React JS not sliding open?

Using Vue.js to dynamically assign CSS classes based on variables