Protractor fetches filtered column data from all rows

I am attempting to retrieve only the rows that I have filtered in the 3rd column of my data table. A visual representation of the structure can be seen in this image: [Click here for site reference](https://i.sstatic.net/z8Heb.png). You can also visit the actual site by following this link: [Protractor Demo Site](http://juliemr.github.io/protractor-demo/)

    //Even after trying a code snippet found online, I am still unable to filter the data as desired 
    tablefil(){
        //Define the value we want to filter on in the third column
       var name = "11";

        return $$("table[class='table']").filter(function(row) {
          // Access and extract the text from the third column
          return row.$$("td[class='ng-binding']").get(3).getText().then(function(rowName) {
            // Check if the extracted text matches our filtering criteria
            return rowName === name;

          });
        }).getText().then(function(text){
            //Display the filtered rows
           console.log('\n'+text+'\n')
        }) 
    }


Answer №1

There are two issues within the code:

1) The css selector used to find all rows of the table is incorrect. The correct one is:

table[class='table'] tbody > tr

2) Since the array index starts from '0', to get the third column you should use: row.$$("td").get(2)

function filterTable(result){

  return $$("table[class='table'] tbody > tr")

      .filter(function(row) {

        // Check if the Result in the row matches the provided argument

        return row.$$("td").get(2).getText().then(function(text) {
          return !result || text.trim() === result;
        });

      })
      .each(function(row){

        // Read and print the text in the 2nd column (Expression) on each matched row

        row.$$("td").get(1).getText().then(function(text){
            console.log('expression: ' + text)
        });

        // Alternatively, combine and print both Expression and Result
        row.$$("td:nth-child(2),td:nth-child(3)").getText().then(function(texts){
            console.log(texts[0], '=', text[1])
        });  
      })
}

filterTable() // will print all rows
filterTable('11') // will only print row with Result equal to 11

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

What are the steps to integrating standard Bootstrap into an Angular application?

There are times when the navbar class, collapse class, and dropdown toggle button may not be supported in an angular application even after installing Bootstrap with scripts. I am interested in finding out how I can ensure that every Bootstrap class is fu ...

The template for the AppComponent is experiencing an error

Every time I run 'ng serve' command, I encounter the following error: src/app/add-dog/add-dog.component.html:8:36: 8 │ <input type="text" [(ngModel)]="formData.breed" /> ╵ ...

Angularfire2: Navigating to a New Page After User

Currently, I am using ionic 2 rc0 in conjunction with angular 2. I recently incorporated angularfire2 to utilize firebase authentication After configuring and testing everything successfully (my user is visible on the firebase console), I now aim to autom ...

An empty page persistently remains blank due to routing issues in Angular

Whenever I click on the "Portfolio" link, https://i.sstatic.net/RTxkC.png The Portfolio page doesn't appear as expected (shown below) https://i.sstatic.net/wJBP8.png I'm having trouble understanding the routing system. Below is the structure ...

Exploring the world of audio playback in TypeScript/JavaScript and Electron using setInterval

I am currently developing a metronome using electron, and I am playing the audio through howler. When the window is active on the screen, the audio plays correctly. However, when I minimize the window, the audio starts to play at incorrect intervals causi ...

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

Assets folder in Angular CLI does not appear in the dist directory

I am encountering an issue with my Angular 6 universal application. After a recent production build, the assets folder is no longer being copied into the dist directory as expected. This was working fine previously, but now the assets folder seems to be mi ...

"Utilize Ionic to subscribe the back button and close an internal div with ease

I have a div called "Search Filters" that appears when the condition this.show_filters == true is met. I am now attempting to use the Android back button to change this variable to false. async toggleFiltersWindow(){ console.log('#1 toggleFilters( ...

Although the Jest tests are passing successfully, it seems that the --covering option is not detecting all

Issue summary: I have encountered an issue with Jest while trying to generate test coverage for my TypeScript class. Even though my two tests are passing, Jest seems to be unable to pick up the covered files when using the --coverage option. The output I ...

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

Can a utility be used to generate a key name based on another key?

Is it possible to dynamically generate a new interface based on an existing one, with key names derived from the originals? Here's an example of what I'm trying to achieve: If we have this source object: interface Car { brand: Brand; model: ...

Unexpected TypeScript error encountered even after narrowing down the type

Surprisingly, the code snippet below is generating an error, even though the variable a has been narrowed down to type string in the line const b = a. It's worth noting that when I assign a to b, b does not encounter the same issue. function test(a: ...

What is the reason for this JSON attribute showing up as undefined in the logs?

Recently, I've set up a nodejs lambda function that is triggered by an SQS queue connected to an SNS topic. Here's a snippet of the lambda code: 'use strict'; import { Handler } from 'aws-lambda'; const myLambda: Handler = ...

Issues with Angular ng-bootstrap tabset component not functioning as expected

{ "name": "ModalWindow", "version": "1.0.0", "repository": { "type": "git", "url": "" }, "scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --mode development --open" }, "license": "MIT", "depend ...

Unexpected Behavior in Angular 12 Subscriptions

Having developed a ShoppingCart Service in Angular 12 with Firestore as the backend, my objective is to maintain the shopping functionality throughout the application. Upon page load, a method is triggered to check the presence of a "cartId" field in the l ...

How come Angular sets the empty value of a number input to null?

Curiosity strikes me as I ponder on the reason why in reactive forms of Angular, input fields with an attribute type='number' display a value of null when they are left empty. This behavior is quite different from what we observe in native HTML5 ...

Refresh the child component whenever there is a change in the parent's state

As of now, I am in the process of developing a MultiCheckbox Component which looks like this: Checkbox.tsx import './Checkbox.scss'; import React, {ChangeEvent, Component} from 'react'; /* * Description of Checkbox properties */ in ...

Insert a blank row at the top of the grid in Wijmo for Angular 2

I am attempting to insert a new empty row at the start of the grid when an external button is clicked. The grid is displaying correctly. <wj-flex-grid #flex [itemsSource]="data" [isReadOnly]="true" [headersVisibility]="'Column' ...

Personalizing specific dates in mat calendar (Angular material)

I am facing an issue with marking the days that have tasks in the mat calendar. I have been trying to troubleshoot why this code is not working as expected. Below is the typescript code snippet: dateClass(): any { return (date: Date): MatCalendarCell ...

Adjusting the width of an input text field in Angular: A step-by-step guide

What is the best way to adjust the width of an input text in Angular? I recently integrated an input text component called 'njm-input' from a third-party library into my application. However, I encountered difficulties when trying to customize i ...