如何使用Selenium或Protractor獲取HTML中嵌套元素的文本以實現自動化？

Question

我跟下面有HTML代碼。 我需要控制日志或僅打印desc類文本 - “打印此”而不是量角器或selenium中的spell類文本。

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

我試着getText()但是它用下面的代碼打印完整的語句 -

打印這不是這個

在使用Javascript的Protractor中：

element(by.css('.desc')).getText().then(function(text){
    console.log(text);
});

在Selenium中使用Java：

System.out.println(driver.findElement(by.xpath('//*[@class=".desc"]')).getText());

如何僅打印文本的第一部分（即“打印此”）？

任何建議或幫助將不勝感激？ 謝謝。

Answer 1

ElementFinder.getText()在元素上調用innerHTML並刪除前導和尾隨空格，但innerHTML還包括任何嵌套級別的所有子元素。 DOM中沒有特殊屬性可以只獲取第一級文本，但可以自己實現。 DOM中的文本也是一個節點，存儲在DOM樹中，與任何標記元素的方式相同，它只是具有不同的類型和屬性集。 我們可以使用屬性Element.childNodes獲取所有類型元素的第一級子元素，然后迭代它們並僅保留文本節點，然后連接它們的內容並返回結果。

在Protractor中，我決定在ElementFinder的原型中添加一個自定義方法，使其易於使用，因此任何Protractor元素都可以使用它。 這取決於你在哪里放置這個擴展代碼，但我建議在你的測試之前把它包含在某個地方，也許是在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
};

此方法將返回Promise，它使用text變量值解析。 如何使用它：

var el = $('.desc');

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

// or 

el.getTextContent().then(function (textContent) {
    console.log(textContent); // 'Print this'
});

Answer 2

我使用Michael的解決方案並嵌入到我的測試規范中而不調用該函數。 如果需要重復使用它作為單獨的功能仍然會更好。 但是，如果您需要內聯解決方案，請按以下步驟操作 -

it("Get First part of text", function(){
    browser.executeScript(function () {
        var el = arguments[0], text = '';
        for (var i = 0, l = el.childNodes.length; i < l; i++)
            if (el.childNodes[i].nodeType === Element.TEXT_NODE)
                text += el.childNodes[i].nodeValue;
        return text.trim();
    },$('.desc').getWebElement()).then(function(text){
        //use expect statements with "text" here as needed
    });
});

希望能幫助到你。