Ag-grid access and edit cell from Protractor e2e tests
up vote
0
down vote
favorite
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.
Update:
I'm thinking to a possible solution, is it possible to create a custom angular 2+ ng-model directive and use Protractor by.model
to write access the ag-grid cell from Protractor ?
angular protractor angular-test angular-e2e ag-grid-e2e
add a comment |
up vote
0
down vote
favorite
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.
Update:
I'm thinking to a possible solution, is it possible to create a custom angular 2+ ng-model directive and use Protractor by.model
to write access the ag-grid cell from Protractor ?
angular protractor angular-test angular-e2e ag-grid-e2e
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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.
Update:
I'm thinking to a possible solution, is it possible to create a custom angular 2+ ng-model directive and use Protractor by.model
to write access the ag-grid cell from Protractor ?
angular protractor angular-test angular-e2e ag-grid-e2e
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.
Update:
I'm thinking to a possible solution, is it possible to create a custom angular 2+ ng-model directive and use Protractor by.model
to write access the ag-grid cell from Protractor ?
angular protractor angular-test angular-e2e ag-grid-e2e
angular protractor angular-test angular-e2e ag-grid-e2e
edited Nov 22 at 3:12
asked Nov 9 at 4:39
HDJEMAI
4,140143755
4,140143755
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
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.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
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.
add a comment |
up vote
0
down vote
accepted
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.
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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.
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.
edited Nov 10 at 5:42
answered Nov 10 at 5:33
HDJEMAI
4,140143755
4,140143755
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219964%2fag-grid-access-and-edit-cell-from-protractor-e2e-tests%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown