Selenium - how to get element and its subelements text

Question

Short version: I can get the chat message (using selenium's By.xpath in java) but I want to include smiles into proper places.

Longer version: Hello, I've been tackling this interesting issue where I need to parse a chat message from the web browser and recreate it using java and selenium. I got no problem parsing the text of the message but I want to parse it with it's subelements (smile icons) as well. Is there any good approach to this except for manual source code parsing?

Here's a code for a single message that I'm able to access:

<div class="chat_msg chat_msg_caller ">
    <div class="chat_msg_head">
        <span class="chat_msg_author">
            SomeAuthor
        </span>
        <span class="chat_msg_date">
           SomeDate
        </span>
    </div>
    <div class="chat_msg_body message_text">
        SomeMessageText
        <span class="sml-icon biggrin">
            <span>
                :D
            </span>
        </span>
        SomeOtherText
        <span class="sml-icon biggrin">
            <span>
                :D
            </span>
        </span>
    </div>
</div>

Here's an example of how I'm getting the chat message text:

String msgTxt = we.findElement(By.xpath("//div[@id='messages_body']/div[" + (i + 1) + "]/div[@class='chat_msg_body message_text']")).getText();

My result: SomeMessageText SomeOtherText The result I want: SomeMessageText :D SomeOtherText :D

CSS files:

http://badoocdn.com/v2/-/-/css/base-ltr.268.css
http://badoocdn.com/v2/-/-/css/page.chat-ltr.22.css
http://badoocdn.com/v2/-/-/css/popup.messenger-ltr.230.css

Structure:

<div id="messages_body">
   <div id="pager" class="pages"> … </div>
   <div class="chat_msg chat_msg_caller ">
       <div class="chat_msg_head">
          <span class="chat_msg_author"> … </span>
          <span class="chat_msg_date"> … </span>
       </div>
       <div class="chat_msg_body message_text"> … </div>
   </div>
   <div class="me chat_msg chat_msg_owner "> … </div>
   <div class="chat_msg chat_msg_caller "> … </div>
   <div class="me chat_msg chat_msg_owner "> … </div>
   <div class="chat_msg chat_msg_caller "> … </div>
   <div class="chat_msg chat_msg_caller "> … </div>
   <div class="chat_msg chat_msg_caller "> … </div>
   ...

Solution

If I'm understanding you correctly you just need to perform a getText() on the parent element e.g.

driver.findElement(By.cssSelector(".chat_msg_body message_text")).getText()

This should return

SomeMessageText :D SomeOtherText :D

It's possible it may remove some whitespace, you'll need to give it a go and see.

Edit

Seeing as you are dealing with potential CSS problems you could always try the below:

driver.findElement(By.cssSelector(".chat_msg_body message_text")).getAttribute("textContent")

That should get the textContent even if CSS is moving things all over the place.

Comments

[Lenymm]

I've edited my question to show how I'm getting the message text. I'm using similar approach only with By.xpath and it returns just "SomeMessageText SomeOtherText"

[Lenymm]

Even if this worked it doesnt solve the issue of having a smile in between 2 parts of the message.

[Ardesco]

This Xpath is pretty horrid '"//div[@id='messages_body']/div[" + (i + 1) + "]/div[@class='chat_msg_body message_text']"' why don't you just use the class? Anyway on to your question, can you supply the CSS? My current guess is that you are hiding the text and replacing it with an image in CSS and as Selenium is working out the spans are not visible it's not returning that text.

[Lenymm]

I've added example of the whole structure I'd really appretiate if you could advise me on how to improve my xpath as I don't like it either :) I need to go through all the divs that contain chat_msg and look inside for more specific info (owner, date, message).

[Lenymm]

You were right about those smiles. The CSS specifies which parts of a tileset are supposed to be displayed. Is there any way to process the inner part of the message so I can determine where to put the smiles?

[Ardesco]

Updated the answer to suggest you try driver.findElement(By.cssSelector(".chat_msg_body message_text")).getAttribute("textContent")