How to write a Xpath for Showing text in console which is separated using tag?

Question

How to write a Xpath for Showing text in console which is separated using
tag?

url: http://www.tizag.com/htmlT/htmlcheckboxes.php

<div class="display"> Please select every sport that you play.
    <br> Soccer:
    <input type="checkbox" name="sports" value="soccer">
    <br> Football:
    <input type="checkbox" name="sports" value="football">
    <br> Baseball:
    <input type="checkbox" name="sports" value="baseball">
    <br> Basketball:
    <input type="checkbox" name="sports" value="basketball">
    <br>
</div>

Answer 1

You can use the xpaths like:

//div[@class='display']/input[@value='football']
//div[@class='display']/input[@value='baseball']
//div[@class='display']/input[@value='basketball']

But, for each of these xpaths, you get 2 objects as shown below(for example, Football):

So, for this particular case, if you need to select say Football checkbox under the header HTML Checkbox Form, then you several options like:

• By Index: //div[@class='display'][1]/input[@value='football']

• By finding a static object between 2 similar objects i.e, If, in this case, I want to select the Football checkbox that comes before the static header HTML Pre-Selected Checkboxes(refer image), we can write something like:

  //h2[contains(text(),'HTML Pre-Selected Checkboxes')]/preceding-sibling::div/input[@value='football']

  If we wanted to select the 2nd Football checkbox, we know it comes after the header HTML Pre-Selected Checkboxes, so could have very well written the xpath:

  //h2[contains(text(),'HTML Pre-Selected Checkboxes')]/following-sibling::div/input[@value='football']

Answer 2

The texts Soccer:, Football:, Baseball:, Basketball: etc are within Text Node. So to extract the texts you can use the following Locator Strategy:

• xpath:

  // printing Soccer:
  System.out.println((String)((JavaScriptExecutor)driver).executeScript("return arguments[0].childNodes[2].textContent;", driver.findElement(By.xpath("//div[@class='display']"))));
  
  // printing Football:
  System.out.println((String)((JavaScriptExecutor)driver).executeScript("return arguments[0].childNodes[5].textContent;", driver.findElement(By.xpath("//div[@class='display']"))));
  
  // printing Baseball:
  System.out.println((String)((JavaScriptExecutor)driver).executeScript("return arguments[0].childNodes[8].textContent;", driver.findElement(By.xpath("//div[@class='display']"))));
  
  // printing Basketball:
  System.out.println((String)((JavaScriptExecutor)driver).executeScript("return arguments[0].childNodes[11].textContent;", driver.findElement(By.xpath("//div[@class='display']"))));
  

Answer 3

You can try below Xpath and use the element to extract text from the same. Please clarify if this is not what you are asking for.

//div[@class='display'][1]

After finding the element, you can either use .text or .get_attribute("innerText") methods to display the required text in the console.

driver.get("http://www.tizag.com/htmlT/htmlcheckboxes.php")

data = driver.find_element(By.XPATH,"//div[@class='display'][1]")

# Using `.text`
print(data.text)

# Using `.get_attribute("innerText")`
print(data.get_attribute("innerText"))

For both the methods the output is:

Please select every sport that you play.
Soccer:
Football:
Baseball:
Basketball: