Winkelmesser: Wie man ein paar Mal in ui-Raster scrollt

Question

Ich versuche, Funktion zu schreiben, die zu einer späteren Zeile in einer Tabelle scrollt. Das UI-Grid scrollt unendlich durch die Zeilen.

Ich habe Antworten gefunden, die das Scrollen zu einem letzten Element erklären, aber meine Tabelle hat viele versteckte Elemente nach einem Bildlauf und ich brauche eine Lösung, um durch das ganze Raster zu scrollen. (Protractor: Scrolling a table and testing for infinite scroll)

Die Lösung: How to getText from all rows & columns in an infinite scrolling ng-grid using protractor - hilft mir nicht

Mein Gitter ist:

<div class="ui-grid-viewport ng-isolate-scope" ng-style="colContainer.getViewportStyle()" role="rowgroup" ui-grid-viewport="" style="overflow-x: hidden; overflow-y: scroll;"> 
 
<div class="ui-grid-canvas"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" style="margin-top: 630px;"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" style=""> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    <div class="ui-grid-row ng-scope" ng-style="Viewport.rowStyle(rowRenderIndex)" ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"> 
 
    </div> 
 
</div>

Nach dem Fall gibt es 24 Zeilen sichtbar in DOM und 65 versteckt.

Mein Algorithmus ist "Scroll", während eine Scroll-Distanz zwischen Top-Element und "Last" -Element nicht geändert wird (und sammeln Sie alle notwendigen Text), aber der WHILE-Körper funktioniert nicht ordnungsgemäß, es scrollt nur einmal :

this.tableContent = function tableContent() {  

    //for loop 
    var start = {}; 
    var distance = {}; 
    var lastRow = {};  
    var div = element(by.css('div.ui-grid-viewport')); 
    lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 

    browser.executeScript("return arguments[0].scrollTop;", lastRow.elm.getWebElement()).then(function (dst) { 
     return distance.value = dst;  
    }).then(function() { 


     while (start.value !== distance.value) { 
      //console.log('The distance before scrolling ' + dst); 


      start.value = distance.value; 

      //scroll 
      browser.executeScript("arguments[0].scrollIntoView();", lastRow.elm.getWebElement()); 
      browser.wait(protractor.ExpectedConditions.presenceOf(element.all(by.css('div.ui-grid-row')).last()), 1000); 

      lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 


      browser.executeScript("return arguments[0].scrollTop;", div.getWebElement()).then(function (dst) { 

       //console.log('the distance after scroll is ' + dst) 
       return distance.value = dst; 

      }).then(function() { 

       console.log('the distance is ' + distance.value); 
       console.log('The start.value is ' + start.value); 

      }); 


     } 


    }); 

Jede Hilfe oder Idee ist sehr willkommen,

dank im Voraus.

Answer 1

OK, Nach einer langen Recherche habe ich eine Antwort. Das Problem sind Versprechungen (wie immer :)). Vielen Dank für diesen Artikel (While loop using bluebird promises), meine Lösung, die für mich funktioniert, ist unter:

 var promiseWhile = Promise.method(function (condition, action) { 
     if (!condition()) return; 
     return action().then(promiseWhile.bind(null, condition, action)); 
    }); 

    lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 


    browser.executeScript("return arguments[0].scrollTop;", lastRow.elm.getWebElement()).then(function (dst) { 
     return distance.value = dst; 

    }) 
    .then(function() { 


     promiseWhile(function() { 

      // Condition for stopping 
      return start.value !== distance.value; 

     }, function() { 
       start.value = distance.value; 

       return collectData().then(function() { 

        //scroll 
        browser.executeScript("arguments[0].scrollIntoView();", lastRow.elm.getWebElement()); 
        browser.wait(protractor.ExpectedConditions.presenceOf(element.all(by.css('div.ui-grid-row')).last()), 1000); 

        lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 
        browser.executeScript("return arguments[0].scrollTop;", div.getWebElement()).then(function (dst) { 
         distance.value = dst; 
        }); 

       }); 

      }); 
     }); 




    var collectData = function collectData() { 

     // HERE COLLECT YOUR DATA and don't forget return result! 
    } 

Answer 2

Zum Beispiel Sie für ein Element in einer Tabelle suchen:

var UIGridCanvasManipulations = function() { 

this.isTheElementPresent = function(elementName) { 
    var start = { value: -1 }; 
    var distance = {}; 
    var lastRow = {}; 
    var flag = { value: false }; 

    var div = element(by.css('div.ui-grid-viewport')); 



    var promiseFor = Promise.method(function (condition, action, value) { 
     if (!condition(value)) return value; 
     return action(value).then(promiseFor.bind(null, condition, action)); 
    }); 
    //SHOULD check if the table has data (or rows) and then look for an element. For that purpose the wait function is used sinde sometimes it take a time to load a table 
    var res = browser.wait(protractor.ExpectedConditions.visibilityOf(element.all(by.css('div.ui-grid-row')).last())).then(function (present) { 

     if (present) { 


      lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 

      var result = browser.executeScript("return arguments[0].scrollTop;", lastRow.elm.getWebElement()).then(function (dst) { 

       return distance.value = dst; 

      }).then(function() { 

       promiseFor(function (count) { 
        return (flag.value != true && start.value !== distance.value); 
       }, function (count) { 



        return lookForElement() 
          .then(function (res) { 
         //scroll 
         browser.executeScript("arguments[0].scrollIntoView();", lastRow.elm.getWebElement()); 
         browser.wait(protractor.ExpectedConditions.presenceOf(element.all(by.css('div.ui-grid-row')).last())); 

         lastRow.elm = element.all(by.css('div.ui-grid-row')).last(); 


         browser.executeScript("return arguments[0].scrollTop;", div.getWebElement()).then(function (dst) { 
          distance.value = dst; 
         }); 


         return start.value = distance.value; 
        }) 

        return flag.value; 

       }, 0) 


      }).then(function() { 

       return flag.value; 

      }); 


      return result; 

     } else { 
      return false; 
     } 

    }, function (err) { 

     return false; 

    }); 

    return res; 




    lookForElement: function { 
    // HERE is YOUR CODE 
    }; 
}; 

};module.exports = UIGridCanvasManipulations; 

Nun, wenn Sie verwenden möchten, es wie folgt vor:

var tableManipilation = require(UIGridCanvasManipulations); 
var tellMe= new tableManipilation(); 
tellMe.isTheElementPresent(sElementTxt); 

Hoffe, dass es klar ist :)