如何获取元素的 outerHTML、innerHTML 和 getText()。

Question

我是protractor框架的新手，我一直想弄清楚如何获取外链HTMLInnerHTMLgetText()(子元素)，这样我就可以测试一个元素是否有问题。<img> 呈现在一个视图上。注意，我们有一个 ng-grid 我试图在它的第一列中查找是否包含一个 img 元素也会检查它是否包含一个属性，即. src=res/someImg.png.

以下是我得到的结果

html

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

检验

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

});

谁能告诉我到底做错了什么？

Answer 1

更明确一点。

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">'); 

Answer 2

使用... getAttribute() 在所有3种情况下--对于 src, outerHTML 和 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">'); 

^{经过测试--对我来说是有效的。}

Answer 3

作为 alecxe 上说 16年8月24日，"getOuterHtml()和getInnerHtml()现在在WebDriverJS和Protractor中已经被废弃了"（参见 https:/stackoverflow.coma275758043482730。)

现在你应该使用以下方法来获得 内层HTML 代码（如这里所示。https:/github.comangularprotractorissues4041#issuecomment-372022296。):

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

使用辅助函数的例子。

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);