Add table cell values to a 2D array in synchronous manner - Typescript-Protactor

Question

I have a protractor test case where I have to compare the data in a HTML table on the UI with the cucumber datatable. Since the cucumber datatable is a 2D array, I thought I would read the ui cell values into a 2D array and just use the chai assertions to assert it against cucumber datatable. Below is a function that another stack overflow helper helped me to write. Problem is when I print the array out, I see that the elements are pushed in random order and not the order in which they appear in the DOM; therefore it doesn't match the cucumber data able when asserted. Is there a way I can push elements in the order in which they appear in the DOM of the page? Could somone please post some ideas?

getCellValues(): Promise<string[][]> {
            return new Promise<string[][]>(function (resolve, reject) {
              let allValues = [];  
              let table = avgtable;  //avgtable is the css locator for the tbody       
              // take all 'tr' child elements and iterate them using 'each()' 
              table.all(by.css('tr')).each((el)=> { 
                let subArr = [];   

                // take a row and process each element
                el.all(by.css('td')).each((subEl)=> {
                    //console.log("subEl text: " + subEl.toString()); 
                  // get text of one row element
                  subEl.getText().then((text) =>  {

                    // at the point we receive the text add it to sub array.
                    subArr.push(text);   
                    //console.log("subarr text: " + subArr.toString());                  
                  });
                }).then(function () {                 
                  allValues.push(subArr);                
                  //console.log("arr text: " + allValues.toString()); 
                });
              }).then(function() {                               
                resolve(allValues);

              });
            });
        }

Here is the calling step definition

Then(/^the bricklet data should match the following data$/, function(table) {
    return funddetails.getCellValues().then((values: string[][]) => {
         return browser.sleep(5000).then(()=> {
            return expect(values).to.equal(table.raw());
         });

    });
    }) ;

Some references: 1) Iterate through a HTML table to get Cells using a Typescript in protractor-typescript framework 2) Iterate through HTML rows and columns of a table using webdriver using javascript(Protractor non-angular)

thanks for the inputs. I have posted a reply below.. please check when you get a chance — Monnie_tester
– Monnie_tester, Commented Jul 23, 2018 at 16:34

user8018716 · Accepted Answer · 2018-07-23 10:34:42Z

For beeing able to store elements in correct order we can rely on indexes. ElementArrayFinder.each() provides as second argument an index in it's callback. Since you want to compare whole tables, it would be enough to compare row by row and there's no need to have all values as single values. The new function would look a bit nicer as follows:

async getCellValues(): Promise<string[]> {
    return new Promise<string[]>(async function (resolve, reject) {
      let table = element(by.css('#myTableID'));
      let rows = table.all(by.css('tr'));
      let rowCount = await rows.count();
      let rowValues = new Array(rowCount);
      rows.each(async (row, index) => {
        let text = await row.getText();
        rowValues[index] = text.trim();
      }).then(function() { 
        resolve(rowValues);
      });
   });
}

I also replied on your other question with this exact same answer.

Monnie_tester · Accepted Answer · 2018-07-23 17:50:36Z

@SilvanBregy: Thanks for taking time to reply. So, as per your answer, I was ableto get the content from UI - row wise. So, I tried converting the cucumber table accordingly but running into issues. This is the closes I got comparing them both:-

Console log:

× And the bricklet data should match the following data # typeScript\stepdefinitions\datatable.js:29
       | 1 student +2.82% -3.09% -0.32%      |
       | 3 student +2.50% +0.50% +1.07%      |
       | 5 student +3.05% +1.84% +1.47%      |
       | 10 student +3.85% +3.24% +3.57%     |
       | all Students +5.75% +5.50% na |
       AssertionError
           + expected - actual

            [
           -  "1 student +2.82% -3.09% -0.32%"
           -  "3 student +2.50% +0.50% +1.07%"
           -  "5 student +3.05% +1.84% +1.47%"
           -  "10 student +3.85% +3.24% +3.57%"
           -  "All Students +5.75% +5.50% na"
           +  [
           +    "1 student +2.82% -3.09% -0.32%"
           +  ]
           +  [
           +    "3 student +2.50% +0.50% +1.07%"
           +  ]
           +  [
           +    "5 student +3.05% +1.84% +1.47%"
           +  ]
           +  [
           +    "10 student +3.85% +3.24% +3.57%"
           +  ]
           +  [
           +    "All Students +5.75% +5.50% na"
           +  ]
            ]

Here is my step defnition: I have been trying to convert the 2D array that cucumber returns to a single D array.

Then(/^the bricklet data should match the following data$/, async(table) =>  {
          //let arr1d = [].concat(...table.raw());
          //let arr1d = [].concat.apply([], table.raw())
          let arr1d = [];
          let newArr = []
          arr1d = await table.raw();
          for(var i = 0; i < arr1d.length; i++){
             newArr.push(arr1d[i]);            
          }

          await console.log("array to string" + newArr);



          //let arr1d = table.raw()
          let values: string[] = await funddetails.getCellValues();
          //let values1 = await values.join().split(" ");
            await browser.sleep(5000);
            await expect(values).to.equal(newArr);

    }) ;

Do you think I am going down the wrong path trying to modify the cucumber datatable now?

Collectives™ on Stack Overflow

Add table cell values to a 2D array in synchronous manner - Typescript-Protactor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related