Girish Sortur Girish Sortur - 1 year ago 164
Java Question

How do i get the text of a nested element in HTML for automation using Selenium or Protractor?

I have below HTML code with me. I need to console log or print only the

class text - "Print this" and not the
class text in protractor or selenium.

<span class="desc">
Print this
<a class="new-link" href="#">
<span class="spell">And not this</span>

I tried to
but it prints the complete statement with below code -

Print this And not this

In Protractor using Javascript:


In Selenium using Java:


How do i print the first part of the text only(i.e., "Print this")?

Any suggestions or help will be appreciated? Thanks.

Answer Source

ElementFinder.getText() calls innerHTML on the element and removes leading and trailing whitespaces, but innerHTML also includes all child elements of any level of nesting. There is no special property in DOM to get only first level text, but it is possible to implement by yourself. Text in DOM is also a node and is stored in DOM tree, the same way as any tag element, it just has different type and set of properties. We can get first level children of the element of all the types with the property Element.childNodes, then iterate over them and keep only the text nodes, then concatenate their content and return the result.

In Protractor I've decided to add a custom method to the prototype of ElementFinder to make it easy to use, so any Protractor element would have it. It's up to you where to place this extension code, but I'd suggest to include it somewhere before your tests, maybe in protractor.conf.js.

protractor.ElementFinder.prototype.getTextContent = function () {
    // inject script on the page
    return this.ptor_.executeScript(function () {
        // note: this is not a Protractor scope

        // current element
        var el = arguments[0];
        var text = '';

        for (var i = 0, l = el.childNodes.length; i < l; i++) {
            // get text only from text nodes
            if (el.childNodes[i].nodeType === Node.TEXT_NODE) {
                text += el.childNodes[i].nodeValue;

        // if you want to exclude leading and trailing whitespace
        text = text.trim();

        return text; // the final result, Promise resolves with this value

    }, this.getWebElement()); // pass current element to script

This method will return a Promise, which resolves with a value of text variable. How to use it:

var el = $('.desc');

expect(el.getTextContent()).toContain('Print this');

// or 

el.getTextContent().then(function (textContent) {
    console.log(textContent); // 'Print this'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download