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?

Answer 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")

Answer 2

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'] .

Answer 3

Though both the buttons are having the same value ie 1 for the id attribute but they are located at different location within the Viewport and you have you select ie 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