Java Selenium webdriver expression finding dynamic element by ccs that starts with and ends with

Question

I have the below HTML element that I need to find. Now, this "id" name is dynamic in the way that the int "0" at the end will change, but I know what it will be. The first int in "0-0" will also change, but it doesn't matter what it will be.

<div id="ui-select-choices-row-0-0">

I've tried the below code that looks for an element that starts with "#ui-select-choices-row-" and ends with the desired input of "int", but it's not finding it as expected. Any suggestions on what I'm doing wrong here?

Attempt 1:

driver.findElement(By.cssSelector("div[id^='#ui-select-choices-row-'] and div[id$='"+int+" div']"));

Attempt 2:

driver.findElement(By.cssSelector("div[id^='ui-select-choices-row-'] and div[id$='"+int+"']"));

question from:https://stackoverflow.com/questions/65893747/java-selenium-webdriver-expression-finding-dynamic-element-by-ccs-that-starts-wi

Answer 1

You were close enough. You need to remove the # from the beginning of the id as # itself denotes the id attribute.

---

Explanation of the dynamic CSS_SELECTOR

To consider only the static part of href and data-drupal-link-system-path attributes you can use the following wildcards in css-selectors:

• $ : To indicate an attribute value ends with

• ^ : To indicate an attribute value starts with

So the most granular css_selector would be :

div[id^='ui-select-choices-row-'][id$='" +count+ "']

---

Solution

Your effective line of code will be:

driver.findElement(By.cssSelector("div[id^='ui-select-choices-row-'][id$='" +count+ "']"));

Note: int is a keyword, use other names as the variable name.

---

References

You can find a couple of relevant detailed discussions in:

• Finding elements by CSS selector with ChromeDriver (Selenium) in Python
• How to click a dynamic link with in a drupal 8 website using xpath/css selector while automating through Selenium and Python
• How to get selectors with dynamic part inside using Selenium with Python?