如何使用 Selenium Webdriver 选择具有多个 CSS 属性的元素答案

【问题标题】：How to select an element with multiple CSS attributes using Selenium Webdriver如何使用 Selenium Webdriver 选择具有多个 CSS 属性的元素
【发布时间】：2014-05-21 04:35:57
【问题描述】：

好的，所以我确实做了我的研究，但找不到我的问题的答案。使用 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 来查找元素。这不是任何下拉列表的一部分

【问题讨论】：

我正在尝试添加它 - 我对发布问题还很陌生...我复制了 HTML 并尝试现在发布它
我们去 - 添加:)

标签： java selenium-webdriver css-selectors

【解决方案1】：

您可以根据其属性编写 CSS 选择器：

.store_color_picker[product_id='133']

基本上格式是：

selector[attribute='attribute_value']

因此，你也可以这样做：

.store_color_picker[color_name='black']

如果您想按颜色名称进行选择。

【讨论】：

【解决方案2】：

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

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

这里是highly detailed documentation about css selectors，您也可以在其他地方找到一些更容易吸收的版本。

【讨论】：