Experimenting with a nested Ng-Repeat in a web table using Protractor

Having trouble validating a web table with nested ng-repeats. Specifically, struggling to extract data from the match column due to the structure of the table. Each row has multiple ng-repeats for columns. Looking for guidance on creating a method to validate this kind of table setup.

<div class="data">
<table class="table table-striped table-hover ng-scope">
<tbody>
    <!-- ngRepeat: row in table.filtered track by table.idPropertyFn(row) -->
    <tr ng-repeat-start="row in table.filtered track by table.idPropertyFn(row)" ng-class="table.getRowClasses(table.idPropertyFn(row), $index+1)" id="3-1-row" class="ng-scope odd">
        <td class="column-checkbox">
            <label>
             ... 
               (original table code omitted for brevity)
            ...
            </span>
        </td>
    </tr>
</tbody>

Struggling with the current method as it doesn't handle columns with multiple ng-repeats. Here's the snippet of code I'm using:

validateMatchRuleTable: function() {
    element.all(by.repeater(versionLocators.constants.selectAllRowsFromTable_repeater)).then(function(numOfRows){
        for (var i = 0; i <numOfRows.length; i++) {
            var rows = element.all(by.repeater(versionLocators.constants.selectAllRowsFromTable_repeater).row(i));
            var cellTexts = rows.map(function (elm) {
                return {
                    name: elm.element(by.binding(versionLocators.constants.matchRuleNameColumn_css)).getText().then(function (text) {
                        return text;
                    }),
               });
          }
     });
},

Seeking advice on how to include the additional column named "match" which contains an ng-repeat (match in row.matches) within the same validation method. Apologies for the lengthy post and thank you in advance!

Answer №1

To create a function that can analyze both row and column values using the element.all().each() method, follow the code below:

element.all(by.repeater="match in row.matches").each(function(row,rIndex){
 //perform action on each row of a table 
  row.all(by.repeater="value in values").each(function(col,cIndex){
 //retrieve the text value of each column
   col.getText().then(functioncValue{
    console.log("Row Index -"+rIndex+"\n Column Index -"+
                           cIndex+"\n Column value is-"+cValue);
   });
  });
});

Answer №2

  Testing the verification of a web table:

    element.all(by.tagName("tr")).then(function(rows){
        console.log("Number of rows:" + rows.length);

        for(let i = 0; i<rows.length;i++){

            rows[i].$$('td').then(function(cols){

                //let cells = rows[i].$$('td');
                for(let j =0; j<cols.length; j++){


                        cols[j].getAttribute("innerText").then(function(txt){
                           // You can insert your conditions here to compare expected and actual values
                           console.log('Values:' + txt);

                        });

                }
            });

        }

    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the scope in Angular when changing the image source using ng-src is not working

A snippet inside my controller looks like this: $scope.onFileSelect = function($files) { for(var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ url: '/smart2/api/files/profi ...

Comparing Angular 2 Components and AngularJS Directives: What Sets

Are there any parallels or distinctions between an angular2 component and an AngularJS directive? It seems that these two share similar functionalities in the angular2 component and AngularJS directive. Additionally, angular2 also incorporates a directive ...

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

How can we avoid repeated evaluations by using memoization in a function?

Currently, I am working on a jQuery function designed to switch HTML elements based on specific viewports. The concept is quite simple: <div data-swap-for="#element" data-swap-on="phone"></div> This code snippet will insert the element with t ...

Efficiency levels of reach = within angular instructions

Creating a directive can be done in various ways. Here is an example of how I structured mine: 'use strict'; myApp.directive('mySwitchOnOff', [ '$rootScope', function($rootScope) { return { restrict: 'C' ...

The useEffect hook is activated whenever any function within the component is executed

After extensive research, I have not been able to find a solution to my question. Any help would be greatly appreciated. This code snippet represents a functional component that deals with state and props: // blog id const { id } = props.match.params; // ...

Struggling with implementing authentication in React for a user sign in/sign up page

App.JS file import React from 'react'; './App.css'; { BrowserRouter as Router, Routes, Route, Link, Switch, } from "react-router-dom" import SignIn from './pages/SignIn.jsx'; funct ...

Create dynamic charts in Angular

I'm currently using Chart Js along with the Angular Chart Directive. I am trying to dynamically display a bar chart within my ng-repeat directive. As per their documentation, I need to provide two arrays: $scope.labels = ['2006', '200 ...

Can a capybara server be started in any way?

Seeking a solution for my cucumber test using selenium and capybara to avoid starting the server every time the test runs. Is there a method to start it in the background, keep it running, and connect to it for each test run? ...

Receiving warnings labeled as 'npm WARN deprecated' during the execution of npm install commands

Encountering warnings when running npm commands, seeking guidance on updating dependencies. npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possi ...

Issues with Tags Functionality in Rails 5 Bootstrap JavaScript

I encountered some unusual issues while using Bootstrap 4 with the Rails 5 javascript tags. Initially, everything was working smoothly on this project and I hadn't made any modifications to the js files. However, suddenly, my collapsible navbar dropdo ...

Is there a way to display all the elements in a list object?

Whenever I run the following code: wait = WebDriverWait(driver, 20) # Adjust the timeout value as needed parent_div = wait.until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, ".el-table-box"))) print(parent_div) The output I receive i ...

Issue encountered with adaptor.fill operation

Below is the C# code snippet: using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Diagnostics; public partial class _Upda ...

"Creating a Sleek Design: How Bootstrap 4 Tabs Use Fade Effect to Optimize Space for Multiple

In my Rails 5.2 application, I have implemented tabs using Bootstrap 4 as follows: <div class="classic-tabs mx-2 mb-5"> <ul class="nav" id="myClassicTabShadow" role="tablist"> <li class="nav-item"> <a class="nav-link wav ...

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Initially, I had a userscript designed to search for a specific string within a webpage. If the script failed to locate the string, it would refresh the page after 4 seconds: var item = 'apple'; if(document.body.innerHTML.toString().indexOf(item ...

Effortless self-explanatory TypeScript / JavaScript code

How do you typically document your typescript or javascript code? When working with C# in Visual Studio, it's as easy as typing "///" to generate a documentation stub. But what are the recommended standards and tools for documenting typescript code? ...

Retrieve every hour between two specific timestamps

I am attempting to retrieve all dates between two timestamps that fall on a specific day of the week. I have a start date represented by 'start1' and an end date represented by 'end1'. Additionally, I have a list of days with correspon ...

Tips for transforming information into JSON format

Imagine having a file with data in CSV or TXT format, such as: Name, Surname, Age, Occupation Gino, DiNanni, 19, Student Anna, Kournikova, 27, Programmer (Extra spaces have been added to enhance readability) The goal ...

Can one track the moment when a user clicks on an advertisement within a YouTube video?

Can we track when a user clicks on an advertisement within a YouTube video? We have integrated the YouTube API v2 into our website, allowing users to watch videos. The issue is that when a user clicks on an advertisement, the YouTube video pauses automat ...

Issue: Unable to update reference: The primary argument includes an invalid key

Encountering a curious error on Firebase while working with Vue.js: The process goes smoothly the first time, and I can execute the following function multiple times without any issues. addSpace: function (newSpace) { let userId = firebaseApp.auth(). ...