How to select an element with multiple CSS attributes using Selenium Webdriver

Question

Ok so I did my research for sure but couldn't find an answer to my problem. Using Selenium Webdriver and on the webpage there are a list of items below is a sample HTML

    <div class="color-picker-slider" style="width: 180px;" active_state="black">
    <div class="store_color_picker black-selector" style="width:20px;" color_name="black"         product_id="132" base_color="black"></div>
    <div class="store_color_picker slate-selector" style="width:20px;" color_name="slate" product_id="133" base_color="slate"></div>
    <div class="store_color_picker violet-selector" style="width:20px;" color_name="violet" product_id="157" base_color="violet"></div>
    <div class="store_color_picker flexlime-selector" style="width:20px;" color_name="lime" product_id="155" base_color="lime"></div>
    <div class="store_color_picker pink-selector" style="width:20px;" color_name="pink" product_id="156" base_color="pink"></div>
    <div class="store_color_picker teal-selector" style="width:20px;" color_name="teal" product_id="158" base_color="teal"></div>
    <div class="store_color_picker tangerine-selector" style="width:20px;" color_name="tangerine" product_id="159" base_color="tangerine"></div>
    <div class="store_color_picker navy-selector" style="width:20px;" color_name="navy" product_id="160" base_color="navy"></div>
    <div class="store_color_picker red-selector" style="width:20px;" color_name="red" product_id="161" base_color="red"></div>
    </div>

So I created an enum that contains all of the products with it's respective index location number. And that works great but the only problem is if the indexes change, let's say adding a new item not adding to the last index, then I have to go and change each and every index, therefore not very efficient. The only static attribute that I see is the product_id, which is unlikely to change. And if a new product_id is added I can just add it to the enum without having to change any indices and such.

My question then becomes how can I click on the element based on the product_id? I know how to get the attribute, but of course that returns a string but somehow I want to click on the item based on the product_id. Any help would be greatly appreciated! I use CSS for finding elements by the way. And this is not part of any dropdown list

Answer 1

You can write a CSS selector based on its attributes:

.store_color_picker[product_id='133']

Basically, the format is:

selector[attribute='attribute_value']

Thus, you could also do:

.store_color_picker[color_name='black']

if you wanted to select by the color name.

Answer 2

In Ruby Selenium (which is close to the Java version):

driver.find_element(:css, ".store_color_picker[product_id='133']")

Here's highly detailed documentation about css selectors , and you can find some more easily absorbed versions elsewhere as well.