Iterate Through A Html Table To Get Cells Using A Typescript In Protractor-typescript Framework

I am writing e2e test using typescript in a protractor-cucumber framework. For my test, I want to compare a HTML table in the UI with the cucumber data table. initially, all I am d

Solution 1:

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:

asyncgetCellValues(): Promise<string[]> {
    returnnew Promise<string[]>(asyncfunction (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);
      });
   });
}

Solution 2:

So, the below code partly works- in the sense it is able to iterate through the table but when I try to compare with the datatable- it fails and that is because the order of elements pushed to the 2D array is random. I think the .each() function is working asynchronously- would you have an idea as to how I can correct this?

getCellValues(): Promise<string[][]> {
            returnnewPromise<string[][]>(function (resolve, reject) {
              let allValues = [];               
              // take all 'tr' child elements and iterate them using 'each()'                Brick_table_rows1.each(function(el){
                  //console.log("el text " + el.toString());// create sub arr for filling one row in   let subArr = [];   

                // take a row and process each element
                el.all(by.css('td')).each(function(subEl){
                    //console.log("subEl text: " + subEl.toString()); // get text of one row element
                  subEl.getText().then(function(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);

              });
            });
        }