How to retrieve the Text of an element along with as text not as a new Line

Question

In the image above as we can see there's a <\br> in the text. Now in the assert statement, I have to verify it against the option I select which has a 'whitespace' but not <\br> which returns the text after it to a new line.

So what I am trying to do here is I want to retrieve the value of the <div> including the <\br> as 'text' so that I can retrieve the whole text and replace <\br> with a 'space' and then verify against the expected text.

I tried-<br>

1. getAttribute("textContent"):

 driver.findElement(By.xpath(//div[contains(@class,'v-label')])).getAttribute("textContent");

which retrieves text without <\br> like - CIABC-Idq BLA HLA N1 Dd/Coind(BLen AccBLA HLA)

2. getAttribute("innerText"):

driver.findElement(By.xpath(//div[contains(@class,'v-label')])).getAttribute("innerText");

which retrieves text with returning to the new line like -
CIABC-Idq BLA HLA N1 Dd/Coind (BLen AccBLA HLA)

Expected:

1. I would either need to retrieve the text with a space between the CIABC-Idq BLA HLA N1 Dd/Coind and (BLen AccBLA HLA)

Or

2. The Whole Text along with <\br> between the CIABC-Idq BLA HLA N1 Dd/Coind and (BLen AccBLA HLA) so I could replace the characters <\br> with a whitespace and then assert the string with expected value.

HTML CODE SNIPPET:

<div class="v-slot">
    <div class="v-label v-widget v-label-undef-w">
        CIABC-Idq BLA HLA N1 Dd/Coind
        <br>
        (BLen AccBLA HLA)
    </div>
</div>

could someone help?

Answer 1

textContent will evaluate control characters and innerText will evaluate <br> tags, thus returning text only. (see difference between textContent vs innerText)

Instead, you can get the innerHTML property:

driver.findElement(By.xpath(//div[contains(@class,'v-label')])).getAttribute("innerHTML");

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

innerHTML will preserve the markup.