我如何 select 在 python selenium 中具有相同 ID 的多個按鈕

Question

我有兩個系列的按鈕具有相同的 id 和 class 名稱。

<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 下的 select 兩個 1 按鈕。 我該怎么做？

Answer 1

從你的HTML，我可以給你答案，如果你解釋得好是正確的。

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

Answer 2

對於第一個

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']的原因。

Answer 3

雖然這兩個按鈕的id屬性值相同，即1 ，但它們位於視口內的不同位置，並且您擁有 select，即分別在它們上調用click() 。

所需的元素是啟用Ember.js的元素，因此理想情況下，單擊需要為element_to_be_clickable()誘導WebDriverWait的元素，您可以使用以下任一定位器策略：

• 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