如何访问 Protractor 中 NodeList 元素的属性

Question

我正在尝试从 Protractor 中相当大的 HTML 表中读取值（大约一千行和 5 列）。 Protractor 的 element.all().getText() 方法在这方面非常慢，所以我决定使用 browser.executeScript 实现一个解决方案来直接读取值，例如：

async getTextFromHtmlTable(){
    try{
        var rows = element.all(by.css('table[id^="P"] tr'));
        var numRows = await rows.count();
        var arrRows = [];

        for (var i = 2; i <= numRows; i++){
            console.log("********Processing row: " + i);
            var css = 'table[id^=\"P\"] tr:nth-child(' + i + ') td div div';
            //**Slow solution: var arrRowsText = await element.all(by.css(css)).getText();

            //Faster:
            var arrRowsText = await browser.executeScript("return document.querySelectorAll('" + css + "')").then(function(elements){
                var arrayRes = [];
                for (var j=0; j<elements.length; j++){
                    console.log("****** Element text: " + elements[j].textContent);
                    arrayRes.push(elements[j].textContent);    
                }

                return arrayRes;
            });

            arrRows.push(arrRowsText.join(';').replace(/;\s/gm, ";"));

        }
        return arrRows; 
    }catch(err){
        console.log ('Some error: ' + err)
    }; 
}

但是，执行测试时控制台 output 是：

********处理行：569
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义
********处理行：570
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义
****** 元素文本：未定义

无论我阅读什么属性（textContent、innerText、innerHTML ...），它总是返回“未定义”。 我做错什么了吗？ 谢谢您的帮助！

Answer 1

我终于找到了解决方案，当 DublinDev 说 executeScript 不返回 NodeLists 时，他指出了我正确的方向。 所以我考虑在 executeScript 方法中处理 NodeList 并让它返回一个文本数组而不是实际的 NodeList：

var arrRowsText = await browser.executeScript("return (function(){" +
            "var nodes = document.querySelectorAll('" + css + "');" +
            "var arrayRes = [];" +
            "for (var j=0; j<nodes.length; j++){" +
            "  arrayRes.push(nodes[j].innerText);" +
            "}" +
            "return arrayRes;" +
            "})();");

现在它就像一个魅力，使用 innerText 读取元素文本比使用 getText() 快得多。

Answer 2

似乎节点列表是通过executeScript方法作为 webElements 数组返回的，因此getText()应该可以工作。 当某些东西已经await时，您也不需要使用.then() 。 你可以试试下面的代码吗？

async getTextFromHtmlTable(){
  try{
      var rows = element.all(by.css('table[id^="P"] tr'));
      var numRows = await rows.count();
      var arrRows = [];

      for (var i = 2; i <= numRows; i++){
          console.log("********Processing row: " + i);
          var css = 'table[id^=\"P\"] tr:nth-child(' + i + ') td div div';
          //**Slow solution: var arrRowsText = await element.all(by.css(css)).getText();

          //Faster:
          var arrRowsText = await browser.executeScript("return document.querySelectorAll('" + css + "')");
          let allEleText = [];
          for(let j = 0; j < arrRowsText.length; j++){
            allEleText.push(await arrRowsText[j].getText());
          }

          arrRows.push(allEleText.join(';').replace(/;\s/gm, ";"));
      }
      return arrRows; 
  }catch(err){
      console.log ('Some error: ' + err)
  }; 
}