来自 Protractor e2e 测试的 Ag-grid 访问和编辑单元格
Ag-grid access and edit cell from Protractor e2e tests
我正在寻找端到端测试 (e2e) ag-grid angular 应用程序的正确方法。
量角器文档说您可以使用 by.model(modelName) 到 sendKeys 到使用 ng-model 的输入字段。
https://www.protractortest.org/#/api?view=ProtractorBy.prototype.model
但是 ng-model 不是 angular 2 指令
我试过这个方法，但它不起作用：
const cellElement = element(by.model('row.name'));
browser.actions().click(cellElement).perform(); //to get focus on cell
cellElement.sendKeys('some value');
但这没有给出任何结果，单元格上没有焦点，当我使用 visual studio 代码进行调试时，单元格中也没有光标。
我发现的一件事是 当单元格未处于焦点或处于编辑模式时，我在 devtool 中看到这些 类 添加到单元格元素：
ag-cell、ag-cell-with-height、ag-cell-value、ag-cell-not-inline-editing、ag-cell-focus
和 当我在没有量角器的情况下手动双击一个单元格时（我什至无法开始工作），然后我看到这些 类 添加到chrome 开发工具中的元素：
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 ?
因为我在官方文档中看到没有记录的方法来执行此高级量角器端到端测试，即使它通常应该像创建一个基本的简单测试一样。
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.
我找到的解决方案是：
1- select 我们要编辑的 ag-grid 单元格：
const gridCell = element(by.css(`[role='gridcell'][col-id='colModelName']`));
2- 双击单元格以在 ag-grid 上启用编辑模式：
await browser.actions().doubleClick(gridCell).perform();
3- 最后将我们想要的值发送到单元格：
await browser.actions().sendkeys('data value').perform();
您可以考虑最后一步，例如 select 在网格中某处添加任何其他元素并单击它，这样焦点将从编辑的单元格中移除，然后您就可以真正能够 select 当前网页中的任何其他元素。
希望它能帮助任何尝试进行 e2e ag-grid 测试的人，因为我一直在为如何使用 by.model 而苦苦挣扎，而它实际上还没有在量角器中工作 angular 2+。遗憾的是，官方文档中没有记录任何软件。
我正在寻找端到端测试 (e2e) ag-grid angular 应用程序的正确方法。
量角器文档说您可以使用 by.model(modelName) 到 sendKeys 到使用 ng-model 的输入字段。
https://www.protractortest.org/#/api?view=ProtractorBy.prototype.model
但是 ng-model 不是 angular 2 指令
我试过这个方法，但它不起作用：
const cellElement = element(by.model('row.name'));
browser.actions().click(cellElement).perform(); //to get focus on cell
cellElement.sendKeys('some value');
但这没有给出任何结果，单元格上没有焦点，当我使用 visual studio 代码进行调试时，单元格中也没有光标。
我发现的一件事是 当单元格未处于焦点或处于编辑模式时，我在 devtool 中看到这些 类 添加到单元格元素：
ag-cell、ag-cell-with-height、ag-cell-value、ag-cell-not-inline-editing、ag-cell-focus
和 当我在没有量角器的情况下手动双击一个单元格时（我什至无法开始工作），然后我看到这些 类 添加到chrome 开发工具中的元素：
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-editingto the element and force the cell to receive the content we send to it ?
因为我在官方文档中看到没有记录的方法来执行此高级量角器端到端测试，即使它通常应该像创建一个基本的简单测试一样。
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.
我找到的解决方案是：
1- select 我们要编辑的 ag-grid 单元格：
const gridCell = element(by.css(`[role='gridcell'][col-id='colModelName']`));
2- 双击单元格以在 ag-grid 上启用编辑模式：
await browser.actions().doubleClick(gridCell).perform();
3- 最后将我们想要的值发送到单元格：
await browser.actions().sendkeys('data value').perform();
您可以考虑最后一步，例如 select 在网格中某处添加任何其他元素并单击它，这样焦点将从编辑的单元格中移除，然后您就可以真正能够 select 当前网页中的任何其他元素。
希望它能帮助任何尝试进行 e2e ag-grid 测试的人，因为我一直在为如何使用 by.model 而苦苦挣扎，而它实际上还没有在量角器中工作 angular 2+。遗憾的是，官方文档中没有记录任何软件。