如何从所有行中获取文本&使用量角器在无限滚动 ng-grid 中的列? [英] How to getText from all rows & columns in an infinite scrolling ng-grid using protractor?

问题描述

我正在尝试编写一个在数组中返回完整网格内容的函数.我们的 ng-grid 可以无限滚动行，也可以滚动列.

我在这里找到了滚动的答案 量角器:滚动表格并测试无限滚动

但我希望完全滚动网格并获取数据，以便在将过滤器应用于网格时验证数据.

非常感谢您对此的任何帮助，谢谢

行的示例 HTML 代码

<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;"><div class="ag-pinned-left-cols-viewport" style="display: inline; height: 245px;"><div class="ag-pinned-left-cols-container" style="width: 480px; height: 1830px; top: 0px;"><div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-111 ag-row-index-10" style="top: 300px;高度:30px；"row-id="111" row="10" v_element_id="19490"><div class="ag-cell ag-cell-no-focus ag-cell-value" style="left: 0px; width: 35px;"colid="id" v_element_id="19491"><div class="ag-cell ag-cell-no-focus ag-cell-value" style="left: 35px; width: 245px;"colid="title" v_element_id="19492">June12-AA-3</div><div class="ag-cell ag-cell-no-focus ag-cell-value" style="left: 280px; width: 200px;"colid="operation_status_enum" v_element_id="19493">INVALID</div></div><div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-110 ag-row-index-9" style="top: 270px;高度:30px；"row-id="110" row="9" v_element_id="20136"><div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-109 ag-row-index-8" style="top: 240px;高度:30px；"row-id="109" row="8" v_element_id="20153"><div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-107 ag-row-index-6" style="top: 180px;高度:30px；"row-id="107" row="6" v_element_id="20170"><div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-108 ag-row-index-7" style="top: 210px;高度:30px；"row-id="108" row="7" v_element_id="20187">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-106 ag-row-index-5" style="top: 150px;高度:30px；"row-id="106" row="5" v_element_id="20221"><div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-104 ag-row-index-3" style="top: 90px;高度:30px；"row-id="104" row="3" v_element_id="20238"><div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-102 ag-row-index-1" style="top: 30px;高度:30px；"row-id="102" row="1" v_element_id="20255"><div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-103 ag-row-index-2" style="top: 60px;高度:30px；"row-id="102" row="1" v_element_id="20258">

解决方案

我可以通过以下方式滚动网格并从所有行中获取数据.我从 Protractor: Scrolling a表和测试无限滚动(感谢@alecxe)

for 循环中几乎没有硬编码.我应该找到一种方法来知道我应该向下滚动表格多少次.最终结果也有一些重复需要清理它.

向下滚动() {return browser.executeScript("return arguments[0].offsetTop;", this.lastRow.getWebElement()).then((offset) => {browser.executeScript("arguments[0].scrollTop = arguments[1];", element(by.className("ag-body-viewport")).getWebElement(), offset);});}获取行(){返回 this.pinnedRows.getText();}getTotalRows() {const defer = Promise.defer();让 allRows = [];for (让 i = 0; i < 3; i++) {this.getRows().then((rows) => {allRows = allRows.concat(rows);this.scrollDown();this.waitToLoad();如果(我 === 2){defer.resolve(allRows);}});}返回 defer.promise；}等待加载(){waitFor.elementToBeVisible(this.pinnedRows.get(15));browser.waitForAngular();}

在规范中:

 getTotalRows().then((data) => {log.info(`TOTAL ROWS: ${data}`);log.info(`总行数:${data.length}`);期望(data.length).toBeGreaterThan(50)；});

I am trying to write a function which returns the complete grid content in an array. Our ng-grid has infinite scrolling through the rows and also have scrolling through the columns.

I have found an answer for scrolling here Protractor: Scrolling a table and testing for infinite scroll

But I am looking to scroll through the grid fully and get the data, So that I can validate the data when I apply filters to the grid.

Any help on this is highly appreciated, thanks

Sample HTML Code for the rows

<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;">
  <div class="ag-pinned-left-cols-viewport" style="display: inline; height: 245px;">
    <div class="ag-pinned-left-cols-container" style="width: 480px; height: 1830px; top: 0px;">
      <div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-111 ag-row-index-10" style=" top: 300px; height: 30px;" row-id="111" row="10" v_element_id="19490">
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 0px; width: 35px;" colid="id" v_element_id="19491">
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 35px; width: 245px;" colid="title" v_element_id="19492">June12-AA-3</div>
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 280px; width: 200px;" colid="operation_status_enum" v_element_id="19493">INVALID</div>
      </div>
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-110 ag-row-index-9" style=" top: 270px; height: 30px;" row-id="110" row="9" v_element_id="20136">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-109 ag-row-index-8" style=" top: 240px; height: 30px;" row-id="109" row="8" v_element_id="20153">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-107 ag-row-index-6" style=" top: 180px; height: 30px;" row-id="107" row="6" v_element_id="20170">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-108 ag-row-index-7" style=" top: 210px; height: 30px;" row-id="108" row="7" v_element_id="20187">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-105 ag-row-index-4" style=" top: 120px; height: 30px;" row-id="105" row="4" v_element_id="20204">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-106 ag-row-index-5" style=" top: 150px; height: 30px;" row-id="106" row="5" v_element_id="20221">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-104 ag-row-index-3" style=" top: 90px; height: 30px;" row-id="104" row="3" v_element_id="20238">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-102 ag-row-index-1" style=" top: 30px; height: 30px;" row-id="102" row="1" v_element_id="20255">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-103 ag-row-index-2" style=" top: 60px; height: 30px;" row-id="102" row="1" v_element_id="20258">

解决方案

I am able to scroll through the grid and get the data from all rows in the following way. I got the scrollDown code from Protractor: Scrolling a table and testing for infinite scroll (thanks @alecxe)

There is little hard coding in the for loop. I should find out a way to know how many times I should scrollDown the table. Also the final result have some duplicates will need to clean it up.

  
    scrollDown() {
    return browser.executeScript("return arguments[0].offsetTop;", this.lastRow.getWebElement()).then((offset) => {
      browser.executeScript("arguments[0].scrollTop = arguments[1];", element(by.className("ag-body-viewport")).getWebElement(), offset);
    });
  }

  getRows() {
    return this.pinnedRows.getText();
  }

  getTotalRows() {
    const defer = Promise.defer();
    let allRows = [];

    for (let i = 0; i < 3; i++) {
      this.getRows().then((rows) => {
        allRows = allRows.concat(rows);
        this.scrollDown();
        this.waitToLoad();
        if (i === 2) {
          defer.resolve(allRows);
        }
      });
    }
    return defer.promise;
  }

  waitToLoad() {
    waitFor.elementToBeVisible(this.pinnedRows.get(15));
    browser.waitForAngular();
  }

In the spec:

  getTotalRows().then((data) => {
      log.info(`TOTAL ROWS: ${data}`);
      log.info(`TOTAL NUMBER OF ROWS : ${data.length}`);
      expect(data.length).toBeGreaterThan(50);
    });

这篇关于如何从所有行中获取文本&使用量角器在无限滚动 ng-grid 中的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！