how to get an outerHTML, innerHTML, and getText() of an element

Question

I'm newbie to protractor framework, and I've been trying for a while to figure out how to get the outerHTML/InnerHTML/getText() (child elements) so that I can test if an element <img> is rendered onto a view. Heads up, we've an ng-grid and I'm trying to look up in its first column to see if it contains an img element also check if it contains an attribute i.e. src=res/someImg.png.

Here is what I got

html

<div>
  <a>
    <div>
        <div>
            <span>
                <i><img src="res/someImg.png"></i>
            </span>
        </div>
        <div>
            ...
        </div>
        <div>
            ...
        </div>
    </div>
  </a>
</div>

test

it('should render an icon in agent list', function () {
    var row = element.all(by.repeater('row in renderedRows')).get(3);
    expect(row).not.toEqual(null); //pass
     expect(row.element(by.css('img')).getAttribute('src').getText()).toMatch(/someImg.png/);//fail with null
    expect(row.element(by.css('span')).outerHTML).toBe('<i><img src="res/someImg.png"></i>'); //fails
    expect(row.element(by.css('i')).innerHTML).toBe('<img src="res/someImg.png">'); //fails

});

Can someone tell what am I doing wrong please?

Have you solved the issue? Has the answer helped? – alecxe Jul 09 '15 at 16:59 — alecxe, Jul 09 '15 at 16:59

score 48 · Answer 1 · answered Dec 19 '14 at 18:25

Use getAttribute() in all 3 cases - for src, outerHTML and innerHTML:

expect(row.element(by.css('img')).getAttribute('src')).toMatch(/someImg.png/);
expect(row.element(by.css('span')).getAttribute('outerHTML')).toBe('<i><img src="res/someImg.png"></i>'); 
expect(row.element(by.css('i')).getAttribute('innerHTML')).toBe('<img src="res/someImg.png">');

^{Tested - works for me.}

score 7 · Accepted Answer · answered Dec 20 '14 at 00:30

7

A little more explicitly:

expect(row.element(by.css('img')).getAttribute('src')).toMatch(/someImg.png/);
expect(row.element(by.css('span')).getOuterHtml()).toBe('<i><img src="res/someImg.png"></i>'); 
expect(row.element(by.css('i')).getInnerHtml()).toBe('<img src="res/someImg.png">');

answered Dec 20 '14 at 00:30

Justin Acount

159
2

10

Note that [`getOuterHtml()` and `getInnerHtml()` are now deprecated in WebDriverJS and Protractor](https://github.com/SeleniumHQ/selenium/blob/96ed95a97405fa267eea09c4008cda9e7703e84d/javascript/node/selenium-webdriver/CHANGES.md#change-summary). – alecxe Aug 24 '16 at 12:00
1

Deprecated indeed. Use `.getAttribue('outerHTML')` and `.getAttribute('innerHTML')` – JellicleCat Aug 07 '20 at 18:45

score 0 · Answer 3 · answered Apr 28 '20 at 10:48

As alecxe said on Aug 24 '16, "getOuterHtml() and getInnerHtml() are now deprecated in WebDriverJS and Protractor" (see comment from https://stackoverflow.com/a/27575804/3482730)

You should now use the following to get innerHTML code (as indicated here: https://github.com/angular/protractor/issues/4041#issuecomment-372022296):

let i = browser.executeScript("return arguments[0].innerHTML;", element(locator)) as Promise<string>;

Example using a helper function:

function getInnerHTML(elem: ElementFinder): Promise<string> {
    return getInnerHTMLCommon(elem, elem.browser_);
}

function getInnerHTMLCommon(elem: WebElement|ElementFinder, webBrowser: ProtractorBrowser): Promise<string> {
    return webBrowser.executeScript("return arguments[0].innerHTML;", elem) as Promise<string>;
}

const html = await getInnerHTML(browser.element(by.xpath("div[1]")));
console.log(html);

how to get an outerHTML, innerHTML, and getText() of an element

html

test

3 Answers3