angularjasmineprotractorangular-grid

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


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. (i.e. each cell)

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

table

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.


Solution

  • 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