I am currently automating some tasks with selenium and I faced a challenge where an element would render each time with a slightly different ID - the first part would be the same, but the ending would be different, such as id=navbarTop_13123. Part navbarTop_ would always be the same, but the ending different.

Partial ID Selectors

Partial ID selectors are a powerful feature of CSS selectors that allow you to select elements based on a partial match of their id attribute. This can be useful when the id attribute of an element contains a dynamic or changing value, and you need to select the element based on only part of the id attribute.

To select an element with a partial id, you can use the following syntax:

1

tagname[id*=partial_id]

So to always find my element even though the ending part would be different, I have used the following syntax:

1

navbar_element = driver.find_element(By.CSS_SELECTOR, 'div[id*=navbarTop_]')

This selector will select an element with an id that contains the text “navbarTop_”, regardless of where in the id attribute the text appears.

What is even better, CSS Selector offers options for even more dynamic searching:

1
2
3
4

tagname[id*=partial_id] # partial_id appears anywhere in the ID
tagname[id^=partial_id] # ID begins with partial_id
tagname[id$=partial_id] # ID ends with partial_id
# And a lot more options

It is very handy knowing these options exist. You can find more at W3 School reference.