How to verify text within first column of Angular Grid in Protractor test?

Question

As part of a Protractor test on my Angular app, I am trying to validate the text within the cells in the first column of an Angular Grid.

The below code validates the text of each cell of the grid:

element.all(by.css('div.ag-cell'))
  .map(function (cell) {
      return cell.getText();
      })
    .then(function (cellValues) {
        expect(cellValues).toEqual(["Toyota", "Ford", "Porsche"]);
        });

When ran against the below table, this code will check "Toyota", "Celica", "35000", "Ford", "Mondeo", etc. (ie each cell)

However, I want the test to only validate "Toyota", "Ford", & "Porsche" (ie the first column of this Angular Grid ) :

Can someone please tell me what changes I need to make for this?

Note: If aria-colindex="1" left: 0px;" can be used as a selector, then I think I would be able to use that.

Answer 1

I would use col-id instead of aria-colindex , and for you I would assume col-id would be make but I will first show you using aria-colindex .

element.all(by.css('div.ag-cell[aria-colindex="1"]'))
  .map(function (cell) {
      return cell.getText();
      })
    .then(function (cellValues) {
        expect(cellValues).toEqual(["Toyota", "Ford", "Porsche"]);
        });

Using col-id

element.all(by.css('div.ag-cell[col-id="make"]'))
  .map(function (cell) {
      return cell.getText();
      })
    .then(function (cellValues) {
        expect(cellValues).toEqual(["Toyota", "Ford", "Porsche"]);
        });

Check out CSS attribute selectors: https://www.w3schools.com/css/css_attribute_selectors.asp