如何使用Selenium Webdriver選擇具有多個CSS屬性的元素

Question

好的，所以我確定要進行研究，但是找不到解決我問題的答案。 使用Selenium Webdriver，網頁上的項目列表如下：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>

因此，我創建了一個枚舉，其中包含所有產品及其相應的索引位置號。 效果很好，但是唯一的問題是如果索引更改了，比方說添加一個新項而不添加到最后一個索引，那么我必須去更改每個索引，因此效率不高。 我看到的唯一靜態屬性是product_id，該屬性不太可能更改。 如果添加了一個新的product_id，我可以將其添加到枚舉中，而無需更改任何索引等。

然后，我的問題變成如何根據product_id單擊元素？ 我知道如何獲取屬性，但是當然返回一個字符串，但是我想以某種方式單擊基於product_id的項目。 任何幫助將不勝感激！ 我用CSS來查找元素。 這不是任何下拉列表的一部分

Answer 1

您可以根據其屬性編寫CSS選擇器：

.store_color_picker[product_id='133']

基本上，格式為：

selector[attribute='attribute_value']

因此，您還可以這樣做：

.store_color_picker[color_name='black']

如果要選擇顏色名稱。

Answer 2

在Ruby Selenium（接近Java版本）中：

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

這是有關css選擇器的非常詳細的文檔 ，您還可以在其他地方找到一些更容易吸收的版本。