Ag-grid访问和编辑Protractor e2e测试中的单元格 [英] Ag-grid access and edit cell from Protractor e2e tests

问题描述

我正在寻找正确的方法进行端到端测试(e2e)，即ag-grid角度应用程序.

量角器文档说，您可以使用ng-model使用by.model(modelName)到sendKeys到输入字段.

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 devtool的元素中:

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

是否可以将ag-cell-inline-editing类添加到元素中，并强制该单元格接收我们发送给它的内容?

因为我看到在官方文档中没有记录的方法来进行这种高级量角器e2e测试，即使通常认为它像创建一个基本的简单测试一样.

是否有任何方法可以使它正常工作并能够进行单元格内容验证?意味着如果我编辑单元格的内容，那么我的表格是有效的吗?以及所有这些仅使用量角器.

解决方案

我为此找到的解决方案是:

1-选择我们要编辑的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();

您可以考虑最后一步，例如，选择网格中某处的任何其他元素，然后单击它，这样就可以将焦点从已编辑的单元格中移出，然后您就可以真正选择任何其他元素从当前网页开始.

希望它对任何尝试进行e2e ag-grid测试的人都有帮助，因为我一直在努力使用by.model，而它实际上还没有在Protractor中用于角度2+.遗憾的是，官方文档中没有记录任何软件.

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.

解决方案

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.

这篇关于Ag-grid访问和编辑Protractor e2e测试中的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！