How to add HTML/text content of a <div> into an array/list?

Question

I am new to selenium and working with xpath. I am using selenium and java to write automated tests for chat messaging web application.

I am looking for a way to take a webElement which contains multiple formatted text strings in HTML and add it to an array. For example, the following message contains three words each have a type of formatting applied to it(Bold, Italics, Underline).

<div class="ms-txt">
 <div>
 <span style="font-weight: bold;">Test</span> 
 <span style="font-style: italic;">Message</span> 
 <span style="text-decoration: underline;">One</span>
 </div>
</div>

I would like to take each formatted message add it to array/list using Selenium/java. I would assume the array would look like the following:

0 : <span style="font-weight: bold;">Test</span>
1 : <span style="font-style: italic;">Message</span> 
2 : <span style="text-decoration: underline;">One</span>

Some caveats is the message is a single message and this would be its contents. This array/list would be used later to validate the formatted contents of a single message.

I figure I could always take the content of the div and pull the HTML content into a string then perform another operation to take the string put each formatted substring into an array/list. I would rather find a way to pull the HTML substring and add it to an array/list from the get-go.

Any ideas what I could try?

Answer 1

You need to get innerHTML attribute of the div.
Try this:

System.out.println(driver.findElement(By.xpath("//*[@class='ms-txt']/div")).getAttribute("innerHTML"));

Answer 2

You should try to avoid xpath. It's usually slow in comparison with other methods, and when trying to get nested elements, xpaths can be get long and unmantainable.
Anyhow, if what you want is to just pull the visible string, you can use yourElement.getText()
In this particular case, if you want to get the texts into a list, you could simply do something like:

List<String> texts = new ArrayList<>();
driver.findElement(By.className("ms-txt")).findElements(By.tagName("span")).forEach(e -> texts.add(e.getText());

(Note that this is Java 8. For 7 and before, you would need a normal for loop)

• MikeG: This does not work for me because I do not know what the children elements are or contain. I cannot just search for "span".
• michaelsnowden: @MikeG This will find all the span elements under the first .ms-txt element. That matches the HTML snipper you posted exactly. What's wrong with this?
• MikeG: Sorry, I did not do a good job at clarifying it originally. The snippet is an example. I know what the content will be in the message but it could a mixture of a hrefs, plain text, imgs, and spans. I was originally looking for a way to do it using a single xpath. The problem is a bit more complicated than I originally thought.