Having trouble accessing the record by clicking on a table cell

I'm attempting to dynamically click on a cell within a row by passing the text of the cell. Here is my code:

await element.all(by.xpath('//div/table/tbody/tr')).then(rows => {
   rows.find(row => {
      return row.all(by.tagName('td')).filter(async elem => {
         await elem.getText().then(text => {
             return text === cellValue;
         });
      }).click();
   });
});

I thought this code would work for me, but unfortunately it always clicks on the first row and does not go inside.

return row.all(by.tagName('td')).filter(async elem => {

No errors are thrown either. Any ideas on what I might be overlooking?

Update - The following code is now working for me:

const rows = await element.all(by.xpath('//table/div/table/tbody/tr'));
        for (const row of rows) {
            const columns = await row.all(by.tagName('td'));
            const actualCellValue = await columns[columnIndex].getText();
            console.log(':::cell text:: ' + await columns[columnIndex].getText());
            if (actualCellValue === cellValue) {
                clickWhenAvailable(columns[columnIndex]);
                break;
            }
          }
        }

Sample HTML Table Cell -

<td _ngcontent-c30="" class="mat-cell cdk-column-Company mat-column-Company ng-star-inserted" mat-cell="" role="gridcell> VAX - ABC </td>

Answer №1

Revised Response

The reason for the failure in your code is due to the fact that your initial find operation is returning the entire row containing the cell, rather than just the cell element itself. This explains why the click action always seems to target the first cell.

To provide further clarification, there are several issues here that we can address sequentially. Firstly, it is unnecessary to use both await and .then together as they both serve the purpose of handling promises. The following two lines are essentially equivalent:

await element(by.css('button')).getText().then(btnText => {
   console.log(btnText);
})

--- Alternatively (and more readable) ---

let btnText = await element(by.css('button')).getText();
console.log(btnText)

Furthermore, you are currently locating all tr elements within the table and then applying the .find method on this collection of row elements. However, since each element in this array represents a row, using .find will only locate one of these rows - when you expect to retrieve a cell value instead.

In reality, you might not need to consider the rows altogether. Instead, you could try simplifying with the following approach:

await element(by.xpath('//div/table/tbody/tr//td[text()=cellValue]').click();

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

Is it impossible to access the length property of an undefined variable?

After developing a function that calculates the length of a string entered into an HTML textbox, I encountered an error when trying to display the result in another textbox. The function is designed to get the value from the 5th textbox on my HTML page and ...

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

The <input> element is not functioning as expected when attempting to use it as a button. I am struggling to find the solution to

My HTML file contains: <!Doctype HTML> <html> <head> <title>Orange’s Game</title> <meta charset="utf-8"> <script src="game.js”></script> </head> <body> <input type="button ...

React Typescript: The specified argument type cannot be assigned to the parameter type

Creating a Check Box Button React component has resulted in an error related to setRSelected(1) and setRSelected(2)... const [cSelected, setCSelected] = useState([]); const [rSelected, setRSelected] = useState(); const onCheckboxBtnClick = (selected ...

What is the best way to retrieve and showcase data in NextJs version 13 and beyond?

Being new to NextJS, my question may seem trivial but I'd appreciate your patience. Essentially, my goal is to fetch data from a database and display it on the page upon the initial render. To achieve this, I am utilizing the useEffect and useState ho ...

Using JavaScript import may encounter issues when trying to access the same file or a different file

When importing something and using it, there are certain scenarios where it may not work as expected. For example: <html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module"> ...

Unexpected discovery about Immediately Invoked Function Expressions (IIFE) in Node.js on Windows operating

Have you encountered this behavior while using nodejs? It seems a bit buggy to me, but could it be expected? What am I missing here? var abc = function(){ console.log("hello"); } (function(){ console.log("welcome"); })(); When I run this code, I enc ...

What could be causing the issue with dayjs dynamic importing in TypeScript?

Currently, I am developing a web screen within a .NET application and facing an issue with sending datetime preferences from the system to the web screen using CefSharp settings. AcceptLanguageList = CultureInfo.CurrentUICulture.Name In my TypeScript code ...

Tips for Preserving the HTML Page State After Making jQuery Changes

Hi there! I am currently working on developing a card game using HTML5, CSS3, and Javascript. This game will communicate with a server built on node.js, facilitated by socket.io for data transmission. One of the key features I am trying to implement is th ...

The scrolling speed of my news div is currently slow, and I am looking to increase its

This is the news div with bottom to top scrolling, but it is slow to start scrolling. I want to increase the speed. The current behavior is the div appears from the y-axis of the system, but I want it to start exactly where I define. The scrolling div is ...

What sets apart !$scope.variableName from $scope.variableName in AngularJS?

Greetings to all my fellow coders! As a newcomer in the field, I often find myself pondering over things like this. Would someone be kind enough to elucidate the dissimilarity between these two elements in AngularJs? $scope.variableName and !$scope.var ...

Is there a way to run JavaScript using Selenium and extract information at the same time?

Greetings and thank you for taking the time to read this. I am currently working on a parser that scans hundreds of websites to check if they have a specific module or plugin installed. The main challenge I am facing is determining whether a website utili ...

Problem with combining Grunt, Protractor, and Cucumber

Operating System: Windows 7 Currently in the process of setting up an automated testing system for an angularjs application using grunt. Progress was going smoothly until encountering a frustrating snag that requires resolution, although it won't ha ...

What is the process of allocating a function to a question within a POST request?

Is it possible to assign the function renderAnswers() to a question in a POST request? How can I do this correctly for it to work as intended? methods: { renderAnswers() { let answers = this.question; let newAnswers = answers.map(( ...

Utilizing MDX Component Properties in NextJS

Currently, I am in the process of developing a layout system for my upcoming app inspired by Adam Wathan's approach and his tailwind website. While I have successfully implemented it for js files, I am facing issues trying to apply the same syntax to ...

What could be causing my form to malfunction when attempting to submit data using Ajax and an external PHP script that is handling two string inputs?

Hello, I am facing an issue while trying to utilize Ajax to interact with a PHP file and submit both inputs (fullname and phonenumber). When I click the submit button, it simply refreshes the page without performing the desired action. Below is the code I ...

What steps can be taken to convert this function into a more concise, dry function?

I'm attempting to customize a typewriter effect on my webpage, and while it successfully displays predefined data, I am struggling with converting it into a function that can receive values and then display those values. I have made attempts to modif ...

The Material UI Icon rendered using document.createElementNS in React is failing to load properly

I'm currently developing a tags section for my app, similar to the tags feature in a new Stack Overflow question form. For this, I am utilizing the Material UI close icon. You can see how it is implemented in this tutorial on YouTube. (I have confirme ...

Opt for ion-select with a range of i to j options

Looking to set up an ion-select menu in Ionic4 where users can pick a value between 20 and 220 without manually typing each number. I attempted to use the approach detailed in this post Tersest way to create an array of integers from 1..20 in JavaScript ...

Is there a way to utilize namespace import without bringing in all the other imports as well

Within our angular application built with typescript, we make use of lodash. Our current approach to importing lodash is demonstrated below: import * as _ from 'lodash'; //.. code which utilizes _.pluck() However, in order to optimize for tree ...