How to click on the checkbox in reference to the text using Selenium Python

Question

I'm trying to access a checkbox which is contained within an element as shown below.

I cannot identify using xpath as the order of these elements can change during development. Id is also out of bounds because the developer has implemented a plain ascending order for id like item-0, item-1 etc, meaning, the id would change depending on the order of elements on the page. So I'd like to identify the text Flexibel and using this element tick the associated checkbox. Is there a way to do that?

The element hierarchy upon inspection is given below

<div _ngcontent-adp-c61="" class="col-xl-4 col-sm-6 py-2 ng-star-inserted" id="item-6">
 <div _ngcontent-adp-c61="" class="card border shadow-none h-100 mb-2">
  <input _ngcontent-adp-c61="" type="checkbox" class="form-check-input item-selector m-1 font-size-20 ng-star-inserted" style="z-index: 2;">
  <!---->
  <div _ngcontent-adp-c61="" class="card-body d-flex flex-column parent list-group-item-action pb-0" style="cursor: pointer;">
   <div _ngcontent-adp-c61="" class="d-flex align-items-start position-relative">
    <div _ngcontent-adp-c61="" class="flex-shrink-0 avatar rounded-circle me-3 ng-star-inserted"><img _ngcontent-adp-c61="" alt="" class="img-fluid border border-primary border-2 rounded-3" style="padding: 1px;" src="assets/ces/time-model/TimeModelType-TimeInterval.svg">
     <div _ngcontent-adp-c61="" class="d-flex justify-content-center">
      <!---->
     </div>
    </div>
   <!---->
   <div _ngcontent-adp-c61="" class="flex-grow-1 overflow-hidden">
    <div _ngcontent-adp-c61="" class="d-flex gap-2"><h5 _ngcontent-adp-c61="" class="font-size-15 mb-0 text-truncate"><span _ngcontent-adp-c61="" class="text-dark">Flexibel</span></h5><!---->
    </div>
    <p _ngcontent-adp-c61="" class="text-muted text-wrap mb-0 ng-star-inserted">allowed working hours for PQS team members</p>
    <!---->
   </div>
  </div>
  <div _ngcontent-adp-c61="" class="d-flex h-100 visible-parent-hover ng-star-inserted"><div _ngcontent-adp-c61="" class="btn flex-grow-1 align-self-end"><i _ngcontent-adp-c61="" class="uil-pen ng-star-inserted"></i><!----> Bearbeiten </div></div>
   <!---->
  </div>
  <!---->
 </div>
</div>

Thanks!

@platipus_on_fire the website is still in development so I'm unable to share it here — Akash
– Akash, Commented Aug 15, 2022 at 13:56
I didn't get far @Curiouskoala. What I tried to do is this flex_elem = driver.find_element(By.CLASS_NAME, 'col-xl-4 col-sm-6 py-2 ng-star-inserted'). With this I identified the entire element. Now, i can put in an if condition and say if this element contains the text 'Flexibel', click on the checkbox. But, I don't know how to get this. — Akash
– Akash, Commented Aug 15, 2022 at 14:00

undetected Selenium · Accepted Answer · 2022-08-15 23:18:31Z

1

The desired element is a Angular element, so to click on the checkbox element with respect to the text Flexibel you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following locator strategy:

Using XPATH and ancestor:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='text-dark' and text()='Flexibel']//ancestor::div[contains(@class, 'card border shadow-none')]//input"))).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

answered Aug 15, 2022 at 23:18

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akash Over a year ago

Thanks a lot @undetected Selenium, it worked! I had to spend some time learning about angular and the available contains() methods of selenium like parent, sibling, ancestor etc but I have a much clearer picture now. Cheers!

undetected Selenium Over a year ago

Glad to be able to help you.

Collectives™ on Stack Overflow

How to click on the checkbox in reference to the text using Selenium Python

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related