How can I select multiple button with same id in python selenium

Question

I have two series of a button with same id and class name.

<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>

And Another one.

<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>

I want to select both 1 button in under both div using selenium python. How can I do it?

You can't have two elements with the same `id` in the DOM. Invalid HTML. The `id` must be unique in the DOM. — C14L, Feb 07 '21 at 14:00
When you post HTML and/or code please take a minute to use a beautifier like http://jsbeautifier.org/ or your IDE to properly format everything. If you need help properly formatting it on the site, see the formatting help link in the sidebar of the question editor. It makes it a LOT easier to read which makes your question more likely to get answered. Thanks! — JeffC, Feb 07 '21 at 15:08

score 1 · Answer 1 · answered Feb 07 '21 at 14:31

1

From yout HTML, I can give you the answer,it is correct if you explained it well.

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

answered Feb 07 '21 at 14:31

Gaj Julije

1,538
15
32

score 1 · Accepted Answer · answered Feb 07 '21 at 21:39

Though both the buttons are having the same value i.e. 1 for the id attribute but they are located at different location within the Viewport and you have you select i.e. invoke click() on them individually.

The desired element is a Ember.js enabled element, so ideally, to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

XPath to click the first element:

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

CSS_SELECTOR to click the first element:

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

XPath to click the second element:

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

CSS_SELECTOR to click the second element:

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

Note: You have to add the following imports :

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

score 0 · Answer 3 · answered Feb 07 '21 at 15:12

For the first one

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

For the second one

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

These have both been tested and work in a mock HTML page based on your provided HTML.

NOTE: CSS doesn't like an id of #1, that's why I had to use [id='1'].

How can I select multiple button with same id in python selenium

3 Answers3