Protractor/Js - Facing difficulty in retrieving precise data on table row and column counts

Question

Protractor/Js - Facing difficulty in retrieving precise data on table row and column counts

I am attempting to confirm the number of rows and columns in a table by using Protractor/Js.

After testing four different functions, I have received inaccurate results. My suspicion is that my locator, which is '.tsc_table_s13', may be incorrect.

For Rows:

 $(locator).all(by.xpath('.//tbody/tr')).count().then(function (data) {
            expect(data).to.equal(parseInt(myCount));
        });

Alternatively...

var table = element.all(by.css(locator));
        table.all(by.tagName("tr")).count().then(function (data) {
            expect(data).to.equal(parseInt(mycount));
        });

For Columns:

$(locator).all(by.xpath('.//tbody/tr/td')).count().then(function (data) {
            expect(data).to.equal(parseInt(myCount));
        });

Alternatively...

var table = element.all(by.css(locator));
        table.all(by.tagName("td")).count().then(function (data) {
            expect(data).to.equal(parseInt(myCount));
        });

When checking the column count, I receive 25 (or 26) when I should only have 6. The row count shows 0 instead of the expected 4. You can view the table here -

javascript css css-selectors protractor

Answer 1

Answer №1

Below is a straightforward solution //test.spec.js

 describe('examining all rows and columns', function() {
   var rowCount;
   var colCount;
beforeEach(function() {
  browser.waitForAngularEnabled(false);
  browser.get('http://www.toolsqa.com/automation-practice-table/');

  rowCount = element.all(by.xpath('.//tbody/tr'));
  colCount = element.all(by.xpath('.//tbody/tr[1]/td'));
}); 

it('should display the counts of rows and columns', function() {
  //expect(rowCount.count()).toEqual(4);
  //expect(colCount.count()).toEqual(6);
  rowCount.count().then(function(count) {
  console.log(count);
  })
  colCount.count().then(function(count) {
  console.log(count);       
   })
  });
 });

Answer 2

Below is a straightforward solution //test.spec.js

 describe('examining all rows and columns', function() {
   var rowCount;
   var colCount;
beforeEach(function() {
  browser.waitForAngularEnabled(false);
  browser.get('http://www.toolsqa.com/automation-practice-table/');

  rowCount = element.all(by.xpath('.//tbody/tr'));
  colCount = element.all(by.xpath('.//tbody/tr[1]/td'));
}); 

it('should display the counts of rows and columns', function() {
  //expect(rowCount.count()).toEqual(4);
  //expect(colCount.count()).toEqual(6);
  rowCount.count().then(function(count) {
  console.log(count);
  })
  colCount.count().then(function(count) {
  console.log(count);       
   })
  });
 });

Answer 3

Answer №2

The count returned is accurate, as confirmed by manually testing the locator in Chrome which yields the same result.

Initially, the result is obtained from the locator .tsc_table_s13 and then a new locator is concatenated on top of it.

Here are the attached results: https://i.sstatic.net/aCGBW.png https://i.sstatic.net/lzodx.png

Answer 4

The count returned is accurate, as confirmed by manually testing the locator in Chrome which yields the same result.

Initially, the result is obtained from the locator .tsc_table_s13 and then a new locator is concatenated on top of it.

Here are the attached results: https://i.sstatic.net/aCGBW.png https://i.sstatic.net/lzodx.png

Protractor/Js - Facing difficulty in retrieving precise data on table row and column counts

Answer №1

Answer №2

Similar questions

Harnessing the power of Div tags with a href attribute as placeholders for interactive menu items

Infinite error loop during start-up in AngularJS application due to digest cycle overflow

Angular 5 allows users to easily add products to their cart by specifying the quantity, while also displaying the total

When a link is added, the Bootstrap drop-down button may become unresponsive

npm command syntax to accept multiple arguments

Starting jQuery on embedded websites

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

When working with multiple states in React, the toggle does not update on click when using setState

Display a modal window when a dropdown list is selected

Choosing the attribute value using jQuery/CSS

How can I access the data variables from a JSON request within a function?

Error Panel Style Message Format:

Laravel: Input information into a form containing multiple dropdown menus

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

Encountering a ReferenceError message that says "readFile is not defined

Creating concentric circles with text inside is a fun way to add depth and creativity to

Trigger in Firebase returns a different node key when making an update request

Maximizing JavaScript efficiency: Returning a value within an if statement in an AJAX call

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

In cases where a selection is not made from the dropdown menu, the textbox should be enabled to input data into a MySQL table through the