如何使用 Selenium 或 Protractor 获取 HTML 中嵌套元素的文本以实现自动化?

2022-01-16 00:00:00 selenium protractor dom javascript java

我有以下 HTML 代码.我需要控制台日志或仅打印 desc 类文本 - 打印此"而不是量角器或 selenium 中的 spell 类文本.

I have below HTML code with me. I need to console log or print only the desc class text - "Print this" and not the spell class text in protractor or selenium. 

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

我尝试 getText() 但它使用以下代码打印完整的语句 -

I tried to getText() but it prints the complete statement with below code -

打印这个而不是这个

在 Protractor 中使用 Javascript:

In Protractor using Javascript:

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

在 Selenium 中使用 Java:

In Selenium using Java:

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

如何只打印文本的第一部分(即打印此")?

How do i print the first part of the text only(i.e., "Print this")?

任何建议或帮助将不胜感激?谢谢.

Any suggestions or help will be appreciated? Thanks.

推荐答案

ElementFinder.getText() 在元素上调用 innerHTML 并删除前导和尾随空格，但是 innerHTML 还包括任何嵌套级别的所有子元素.DOM 中没有特殊属性只能获取第一级文本，但可以自己实现.DOM 中的文本也是一个节点，存储在 DOM 树中，与任何标签元素一样，只是具有不同的类型和属性集.我们可以通过 Element.childNodes 属性获取所有类型元素的第一级子元素，然后遍历它们并只保留文本节点，然后连接它们的内容并返回结果.

ElementFinder.getText() calls innerHTML on the element and removes leading and trailing whitespaces, but innerHTML also includes all child elements of any level of nesting. There is no special property in DOM to get only first level text, but it is possible to implement by yourself. Text in DOM is also a node and is stored in DOM tree, the same way as any tag element, it just has different type and set of properties. We can get first level children of the element of all the types with the property Element.childNodes, then iterate over them and keep only the text nodes, then concatenate their content and return the result.

在 Protractor 中，我决定在 ElementFinder 的原型中添加一个自定义方法以使其易于使用，因此任何 Protractor 元素都可以使用它.将此扩展代码放置在何处取决于您，但我建议您在测试之前将其包含在某处，也许在 protractor.conf.js 中.

In Protractor I've decided to add a custom method to the prototype of ElementFinder to make it easy to use, so any Protractor element would have it. It's up to you where to place this extension code, but I'd suggest to include it somewhere before your tests, maybe in 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 变量的值进行解析.使用方法:

This method will return a Promise, which resolves with a value of text variable. How to use it:

var el = $('.desc');

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

// or 

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

相关文章