Automate Grid Controls with Cypress Data Tags

[Justin]

Hello,

We are using Cypress automation to automate UI testing. This involves adding a data-cy="FOO" to a control (grid, button, drop down, etc). We want to be able to get at the controls in a grid like a grid button, hyperlink, page size, etc. I have added tags to the individual grids and columns but this doesn't seem to get at the fine grain controls like I would expect. Does anyone have experience doing this?

[Martin Bechev]

Hello Justin,

We have provided an answer on this question in the private support thread opened by another account but will paste the answer here as well to be visible to the community.

In order to achieve the requirement, the developer needs to add ng-template customization for every single control through the app component template of the grids in question. Keep in mind that this will be a tedious endeavor and it's not really recommended as it may not yield the wanted result.

In general, the majority of the Kendo Angular components are heavily tested to the smallest of details with both unit tests and e2e tests on our side. Most of which can be found in the source code of the components. Please check the following article to see how the source code of a component can be obtained:

https://www.telerik.com/kendo-angular-ui/components/installation/source-code/ 

There are multiple tests for the Grid where we test the selection or clicking of smaller integrated controls there.

If a fine control of every DOM element is needed, using CSS selectors is preferable approach as this is the way we've done in Selenium. Although our tests are using Selenium, they can still be used as a reference for examples on the topic of all testing.

Regards,

Martin
Progress Telerik