javascript 如何获取元素的外层 HTML、内层 HTML 和 getText()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27570025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get an outerHTML, innerHTML, and getText() of an element
提问by Simple-Solution
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-gridand I'm trying to look up in its first column to see if it contains an imgelement also check if it contains an attribute i.e. src=res/someImg.png.
我是量角器框架的新手，我一直在尝试弄清楚如何获取outerHTML/InnerHTML/getText()（子元素），以便我可以测试元素<img>是否呈现到视图上。注意，我们有一个ng-grid，我试图在它的第一列中查找它是否包含一个img元素，还要检查它是否包含一个属性 ie src=res/someImg.png。
Here is what I got
这是我得到的
html
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?
有人能告诉我我做错了什么吗？
采纳答案by Justin Acount
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">');
回答by alecxe
Use getAttribute()in all 3 cases - for src, outerHTMLand innerHTML:
使用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">');
Tested - works for me.
已测试 - 对我有用。
回答by lezhumain
As alecxesaid on Aug 24 '16, "getOuterHtml() and getInnerHtml() are now deprecated in WebDriverJS and Protractor" (see comment from https://stackoverflow.com/a/27575804/3482730)
正如alecxe在2016年8 月 24 日所说，“现在 WebDriverJS 和量角器中不推荐使用 getOuterHtml() 和 getInnerHtml()”（请参阅来自https://stackoverflow.com/a/27575804/3482730 的评论）
You should now use the following to get innerHTMLcode (as indicated here: https://github.com/angular/protractor/issues/4041#issuecomment-372022296):
您现在应该使用以下内容来获取innerHTML代码（如下所示：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);
