如何在 python selenium 中选择具有相同 id 的多个按钮答案

【问题标题】：How can I select multiple button with same id in python selenium如何在 python selenium 中选择具有相同 id 的多个按钮
【发布时间】：2021-02-07 13:53:49
【问题描述】：

我有两个系列的按钮，具有相同的 id 和类名。

<div id="bedroomNum-input" class="pageComponent" data-label="CONFIG_BEDROOM">
    <span class="labels_semiBold radioInput_bubbleLable__1g8PH">No. of Bedrooms <div class="screeningActions_iconWrapper__dB1NM"></div></span>
    <div class="tagWrapper_tags_wrapper__KIRJJ  multiple_input" id="bedroomNum">
        <div id="1" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;1&quot;}}">
            <span>1</span>
        </div>
        <div id="2" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;2&quot;}}">
            <span>2</span>
        </div>
        <div id="3" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;3&quot;}}">
            <span>3</span>
        </div>
        <div id="4" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;4&quot;}}">
            <span>4</span>
        </div>
        <div class="hyperlinks_medium AddOther_addOtherLink__3jZ8s" style="display: block;">
            <i class="iconS_PPFDesk_16 icon_bluePlusIcon AddOther_addMoreIcon__24FzC"></i>
            <span class="AddOther_toggleLabel__YwU_k">Add other</span>
        </div>
    </div>
</div>

还有一个。

<div class="tagWrapper_tags_wrapper__KIRJJ  multiple_input" id="bathroomNum">
    <div id="1" class="pageComponent radioInput_textOnly__1r7GLdata-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;1&quot;}}">
        <span>1</span>
    </div>
    <div id="2" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&  quot;:&quot;2&quot;}}">
        <span>2</span>
    </div>
    <div id="3" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;3&quot;}}">
        <span>3</span>
    </div>
    <div id="4" class="pageComponent radioInput_textOnly__1r7GL" data-label="VALUE" data-custominfo="{&quot;custom_object&quot;:{&quot;value&quot;:&quot;4&quot;}}">
        <span>4</span>
    </div>
    <div class="hyperlinks_medium AddOther_addOtherLink__3jZ8s" style="display: block;">
        <i class="iconS_PPFDesk_16 icon_bluePlusIcon AddOther_addMoreIcon__24FzC"></i>
        <span class="AddOther_toggleLabel__YwU_k">Add other</span>
    </div>
</div>

我想使用 selenium python 在两个 div 下选择两个 1 按钮。我该怎么做？

【问题讨论】：

DOM 中不能有两个具有相同id 的元素。无效的 HTML。 id 在 DOM 中必须是唯一的。
当您发布 HTML 和/或代码时，请花一点时间使用像 jsbeautifier.org 这样的美化工具或您的 IDE 来正确格式化所有内容。如果您需要帮助在网站上正确格式化它，请参阅问题编辑器侧栏中的格式化帮助链接。它使阅读变得更容易，从而使您的问题更有可能得到回答。谢谢！

标签： python selenium-webdriver xpath css-selectors webdriverwait

【解决方案1】：

虽然这两个按钮具有相同的值，即 id 属性的 1，但它们位于 Viewport 内的不同位置，您可以选择，即调用 click() on分别。

所需元素是启用Ember.js 的元素，因此理想情况下，单击需要为element_to_be_clickable() 诱导WebDriverWait 的元素，您可以使用以下Locator Strategies 之一：

XPath 点击第一个元素：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='bedroomNum']//div[@id='1']/span[text()='1']"))).click()

CSS_SELECTOR 点击第一个元素：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#bedroomNum div#1 > span"))).click()

XPath 点击第二个元素：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='bathroomNum']//div[@id='1']/span[text()='1']"))).click()

CSS_SELECTOR 点击第二个元素：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#bathroomNum div#1 > span"))).click()

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

【讨论】：

@HimalayaMandal 很高兴能为您提供帮助。 Upvote 答案如果这个/任何答案对您/对您有帮助，以造福未来的读者。

【解决方案2】：

从你的HTML，我可以给你答案，如果你解释得好，那就对了。

button1=browser.find_element(By.ID,"bedroomNum-input")
button2=browser.find_element(By.ID,"bathroomNum")

【讨论】：

【解决方案3】：

第一个

driver.find_element_by_css_selector("#bedroomNum > div[id='1']")

第二个

driver.find_element_by_css_selector("#bathroomNum > div[id='1']")

这些都已经过测试，可以在基于您提供的 HTML 的模拟 HTML 页面中运行。

注意：CSS 不喜欢 #1 的 id，这就是我必须使用 [id='1'] 的原因。

【讨论】：