How to find and click a span class element using the text of a sibling span class

Question

---

<div class="answersContainer">
  <div class="answer fadeIn" style="visibility: visible;">
    <span class="answerBox">
      <a name="checkboxtag" class="largecheckbox" onclick="selectQuizAnswer(this);"></a>
      <input type="radio" name="answers" value="8ad6a412466639700146729fa9d27534" 
      class="checkbox displaynone">
    </span>
    <span class="answerText">The Adventures of Huckleberry Finn</span>
  </div>
  <div class="answer fadeIn" style="visibility: visible;">...</div>
  <div class="answer fadeIn" style="visibility: visible;">...</div>
  <div class="answer fadeIn" style="visibility: visible;">...</div>
</div>

---

The above code, when run in a browser window, displays four checkbox, each beside a string of text, the first of which reads, "The Adventures of Huckleberry Finn". All the <div class="answer fadeIn"> elements are structured the same way as the first one (which I expanded); however, each differs from one another in its value in <span class="answerBox"> and in its text in <span class="answerText">.

I am using the latest version of Selenium in Python.

How do I use driver.find_element to find, and then .click(), the checkbox element (<span class="answerBox">) if I know the text(The Adventures of Huckleberry Finn) of the <span class="answerText"> which is in the same div class (<div class="answer fadeIn")?

In other words, If I am working inside a div class, and I know the text, but only the text, of one child span class, how do I use find_element for finding the sibling span class element or value?

For Instance, I have tried the following in Python(after importing all the necessary modules): answ = driver.find_element(By.XPATH,"//span[text=()='The Adventures of Huckleberry Finn']/preceding-sibling::span").click()

I also thought of taking the positional approach where I find the page position of each text in<span class="answerText"> ,then use .click() to select the checkbox to the left of the correct text. However, I couldn't figure out how to click the page at a certain position relative to the text. I would really appreciate if someone would help me out. Thanks

Answer 1

So here is what I understand you want to do,

You can to find an element that contains the text "The Adventures of Huckleberry Finn". Then you want to look for a radio button <input type="radio"> and click it.

With this statement

driver.find_element(By.XPATH,"//span[text=()='The Adventures of Huckleberry Finn']/preceding-sibling::span").click()

You are trying to click on a <span> which isn't a clickable element by default. It is just a container element, unless you customize it to be clickable element via JavaScript.

Hence the radio button isn't getting clicked.

What you should do it, look for the <input type="radio"> inside that <span> and click it.

This is what I tried in Java and it worked,

driver.findElement(By.xpath("//span[text()='The Adventures of Huckleberry Finn']/preceding-sibling::span/input")).click();

It's Python translation (referring your code) would be,

driver.find_element(By.XPATH,"//span[text()='The Adventures of Huckleberry Finn']/preceding-sibling::span/input").click()