How to test ag-grid with protractor?

问题

In my app, I use ag-grid to display the data. I am unsure on how I can select a field within the grid so that I can test if it is there or not. Many of the examples I have found have not been much help. If anybody could guide me in the right direction, that would be great!:) Here is my HTML code:

  <div style="height: 90%; text-align: left">
<ag-grid-angular enableColResize groupHeaders style="width: 100%; height: 100%;" [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"
  class="ag-theme-blue" [rowData]="rowData" [columnDefs]= "columnDefs" [enableSorting]="true"
  [animateRows]="true" [rowSelection]="rowSelection">
</ag-grid-angular>

And here is an example of how I create my data in my component class. I have figure I must select the array where I am outputting mt data but I cannot seem to figure out how to select the array. The closest I can get to selecting the fields is if I call the class ag-theme-blue. But that is not much help,as it only selects a specific user, there is no flexibility. Thank you!

 columnDefs = [

        { headerName: 'First Name', field: 'FirstName' },

    ];

EDIT: Okay, so I made some progress! It is not a solution but is a step in the right direction :). This line of code, selects the first column in the ag-grid.

return element(by.css('div.ag-body-container > [role="row"]'))

This line here, allows me to select a specific index.

 return element.all(by.css('div.ag-body-container > [role="row"]')).get(2);

This line here allows me to select the row with the given data. For example, here I am looking for a row that contains the name "TestName". Now I can test if a new field is added by checking if the field containing TestName is being displayed. To make this test even better, I can assign my test to add a name that is very distinct to ensure that it does not already exist in the database.

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

This image on this site is what my grid looks like.

http://www.adaptabletools.com/ag_Grid_implementation_available.html

EDIT 2: Updated spec with function:

  it('should select name field', () => {




  findRow(page.rows, "TestName").then(row => {

    row.getText().then(rowText => {
      expect(rowText).toContain('TestName')

回答1:

I think I have a good handle on what you are trying to do now.

You can get a list of all the rows in the grid by using

let rows = element.all(by.css('div.ag-body-container > [role="row"]'));

Then from here you can find a row that contains the data you are looking for by using .filter(). Probably best to create a generic function that allows you to pass in the rows and the string you are looking for and then return the element once you've found it.

findRow(elements, matcher) {
  const relevantRow = elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()

  return relevantRow;
}

You can call it from your tests: const row = findRow(rows, 'Some Text') and then once you have the row you are looking for you can do whatever you need with it from there.

EDIT: Here is an example that is more clear

// in your page object
public rows = element.all(by.css('div.ag-body-container > [role="row"]'));

// in some helper class
function findRow(rows, matcher) {
  return elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()
}

//in your test
helper.findRow(somePage.rows, 'Some Text').then(row => {
  row.getText().then(rowText => {
    expect(rowText).toContain('Some Text');
  });
});

If you are using async/await it would be like this

function async findRow(rows, matcher) {
  const relevantRow = await rows.filter(row => {
    return row.getText().then(text => {
      return text.includes(matcher);
    });
  }).first();

  return relevantRow;
}

//in spec
const row = await helper.findRow(somePage.rows, 'Some Text');
expect(await row.getText()).toContain('Some Text');

回答2:

Well not perfect, this seemed to do the trick:

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

Now I just need to figure out how to retrieve the data from the field.

来源：https://stackoverflow.com/questions/50843128/how-to-test-ag-grid-with-protractor

标签

angular

protractor

automated-tests

ag-grid