量角器：如何在 ui-grid 中滚动几次

Question

我正在尝试编写滚动到 table 中后一行的函数。 ui-网格在行中无限滚动。

我找到了解释滚动到最后一个元素的答案，但是我的 table 在一次滚动后有很多隐藏元素，我需要一个解决方案来滚动整个网格。 ()

解决方案： - 对我没有帮助

我的网格是：

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

根据案例，DOM可见24行，隐藏65行

我的算法是 "to scroll" 而顶部元素和 "last" 元素之间的滚动距离不会改变（并收集所有必要的文本），但是 WHILE body 不能正常工作，它只滚动一次：

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

            });


        }


    });

非常感谢任何帮助或想法，

提前致谢。

Answer 1

好的，经过长时间的研究，我有了答案。问题是承诺（通常 :)）。感谢这篇文章 ()，我的解决方案如下：

     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

例如，您正在 table:

中查找元素

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;

现在，如果您想使用它，请执行以下操作：

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

希望清楚:)

量角器：如何在 ui-grid 中滚动几次

Protractor: How to scroll a few times in ui-grid

javascript

infinite-scroll

protractor