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

Question

我试图在Protractor中从一个相当大的HTML表格中读取数值（大约有1000行和5列）。Protractor的元素.all().getText()方法在这一点上非常慢，所以我决定使用浏览器.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)
    }; 
}

然而，当执行测试时，控制台的输出是：

无论我读取什么属性（textContent、innerText、innerHTML......），它总是返回 "undefined"。我是不是做错了什么？谢谢你的帮助！我正试图从一个相当大的HTML表格中读取值。

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

看来，nodelists 是通过 executeScript 方法作为一个数组的webElements，所以 getText() 应该可以。你也不需要使用 .then() 当初 awaited. 你可以试试下面的代码吗？

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