Ag-grid access and edit cell from Protractor e2e tests

Question

I'm looking to the right way to end to end test (e2e) an ag-grid angular application.

protractor documentation says that you can use by.model(modelName) to sendKeys to an input field using ng-model.

https://www.protractortest.org/#/api?view=ProtractorBy.prototype.model

But ng-model is not an angular 2 directive

I've tried for example this method but it's not working:

const cellElement = element(by.model('row.name'));

browser.actions().click(cellElement).perform(); //to get focus on cell

cellElement.sendKeys('some value');

But this do not give any result, there is no focus on the cell, there is no cursor in the cell as well when I debug with visual studio code.

One thing I found is that when the cell is not in focus or in edit mode, I see these classes in the devtool added to the cell element:

ag-cell, ag-cell-with-height, ag-cell-value, ag-cell-not-inline-editing, ag-cell-focus

And when I double click in a cell manually without protractor (which I'm not even able to get working), then I see these classes added to the element in the chrome devtool:

ag-cell, ag-cell-with-height, ag-cell-value, ag-cell-focus, ag-cell-inline-editing

is it possible to add the class ag-cell-inline-editing to the element and force the cell to receive the content we send to it ?

since I see that in the official documentation there is no documented way to do this advanced protractor e2e tests, even if it is normally supposed to be like a basic simple test to create.

Is there any way to get this to work and be able to do for example cell content validation ? means if I edit the content of the cell then my form is valid ? and all this using just protractor.

Answer 1

The solution I found for this is:

1- select the ag-grid cell that we want to edit:

const gridCell = element(by.css(`[role='gridcell'][col-id='colModelName']`));

2- double click on the cell to enable the edit mode on the ag-grid:

await browser.actions().doubleClick(gridCell).perform();

3- Finally send the value that we want to the cell:

await browser.actions().sendkeys('data value').perform();

You can consider a last step consisting of selecting any other element somewhere in the grid for example and click on it, this way the focus will be removed from the edited cell, and then you can really be able to select any other element from the current web page.

Hope that it will help any one trying to do e2e ag-grid testing, since I was struggling myself about how to use by.model while it is really not yet working in Protractor for angular 2+. Sadly this, is not documented any ware in the official documentation.