Question

我是量角器框架的新手，我已经尝试了一段时间来弄清楚如何获取outerHTML / InnerHTML / getText（）（子元素）以便我可以测试一个元素<img>呈现在视图上。抬头，我们已经ng-grid了，我试图在第一列中查找它是否包含img元素，同时检查它是否包含属性，即{{} 1}}。

这是我得到的

HTML

src=res/someImg.png

测试

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

有人能说出我做错了吗？

Answer 1

在所有3个案例中使用getAttribute() - 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 2

更明确一点：

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 3

如 alecxe 在 16年8月24日所述，“现在在WebDriverJS和Protractor中已弃用getOuterHtml（）和getInnerHtml（）”（请参阅https://stackoverflow.com/a/27575804/3482730的评论）

您现在应该使用以下代码获取 innerHTML 代码（如此处指示：https://github.com/angular/protractor/issues/4041#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);

如何获取元素的outerHTML，innerHTML和getText（）

HTML

测试

3 个答案: