如何使用Selenium或量角器获取HTML中的嵌套元素的文本进行自动化？ [英] How do i get the text of a nested element in HTML for automation using Selenium or Protractor?

问题描述

我有以下HTML代码。我需要控制台日志或仅打印 desc 类文本 - 打印而不是拼写类文本量角器或硒。

 < span class =desc> 
打印此
< a class =new-linkhref =＃> 
< span class =spell>而不是< / span> 
< / a> 
< / span> 
  

我尝试 getText（）但它用下面的代码打印完整的语句 -

打印此文件，而不是这个

在使用Javascript的量角器中：

 元素（by.css（'。desc'））。 getText（）。then（function（text）{
 console.log（text）; 
}）; 
  

在使用Java的Selenium中：

 的System.out.println（driver.findElement（by.xpath（ '// * [@类= 内容描述]'））的getText（））; 
  

如何仅打印文本的第一部分（即打印）？

任何建议或帮助将不胜感激？谢谢。

解决方案

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

在量角器中，我决定为 ElementFinder 的原型添加一个自定义方法，使其成为易于使用，所以任何量角器元素都可以使用。这取决于你在哪里放置这个扩展代码，但我建议将它包含在你的测试之前的某个地方，也许在 protractor.conf.js 中。

  protractor.ElementFinder.prototype.getTextContent = function（）{
 //在页面上插入脚本
返回this.ptor_.executeScript（function（） {
 //注意：这不是一个量角器范围
 
 //当前元素
 var el = arguments [0]; 
 var text =''; 
 
 for（var i = 0，l = el.childNodes.length; i< l; i ++）{
 //仅从文本节点获取文本
 if（el。 childNodes [i] .nodeType === Node.TEXT_NODE）{
 text + = el.childNodes [i] .nodeValue; 
} 
} 
 
 //如果要排除前导和尾随空格
 text = text.trim（）; 
 
返回文本; //最终结果，Promise用此值
 
}，t his.getWebElement（））; //将当前元素传递给脚本
}; 
  

此方法将返回一个Promise，它的值为 text 变量。如何使用它：

  var el = $（'。desc'）; 
 
 expect（el.getTextContent（））。toContain（'Print this'）; 
 
 //或
 
 el.getTextContent（）。then（function（textContent）{
 console.log（textContent）; //'打印此'
}）; 
  

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>

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

Print this And not this

In Protractor using Javascript:

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

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() 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.

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

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

这篇关于如何使用Selenium或量角器获取HTML中的嵌套元素的文本进行自动化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！