CODEWITHSUNDEEP
pythonselenium-webdriverxpathcss-selectorswebdriverwait
Himalaya Mandal
Himalaya Mandal

Reputation: 25

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

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?

Upvotes: 1

Views: 1495

Answers (3)

undetected Selenium
undetected Selenium

Reputation: 193238

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

Upvotes: 1

JeffC
JeffC

Reputation: 25664

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

Upvotes: 0

Gaj Julije
Gaj Julije

Reputation: 2183

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

Upvotes: 1

Related Questions