Devextreme-reactive: Grid elements are not identified (html id tag)

[JavierLight]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] Vue Grid

Current Behaviour

Rendered elements have no HTML id tag.

Expected Behaviour

In order to perform front-end tests we would need to get ids for rendered elements in HTML. Shouldn't this be something provided? Am I missing something?

[kvet]

Hi.

Can you explain your needs in greater detail?

In general, we do not recommend testing the Grid - it is already tested.

Also, you can provide the id attribute for the Grid.

[JavierLight]

Hi, thanks for your quick response.

Imagine the next scenario:

A verification and validation team needs to perform Selenium tests over an UI other team is developing (using React). Rendered controls (checkbox selector, command buttons...) do have an id in the HTML generated code (when using a previous library). After changing the Table component to use devexpress Grid, elements no longer have an id tag when they are rendered. So the V&V team cannot identify controls easily.

So it's not about testing the Grid, but the behavior of the UI (e.g. expected output when clicking a button, typing an input and clicking another button). This tests are automated and are getting elements by their HTML id tags (from the webpage source code).

I hope I've explained myself better now :)

Thanks for your time!

[kvet]

I am afraid that we are not planning to specify the Grid elements with ids. But you can provide required ids by overriding our components.

There are ways to find elements on a page by a tag, class name, text and so on.

[JavierLight]

Alright, thanks for the clarification. Is there any way to do this through your API (maybe through a Getter changing computed value?). Otherwise I guess you suggest using plain javascript "native" ways to identify components.

It would be awesome if you could provide an easy example with a very simple Grid (for instance override selection toolboxes to add an id to them, or whatever you may find illustrative). Thank you very much for your time :)

[kvet]

We don't provide such an API to set ids for HTML elements.

You can easily pass an id by overriding *Component properties of UI plugins. You can find examples of doing so in the "Appearance Customization" section of the following guide: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/fundamentals/

[JavierLight]

Alright, that's great, thanks.

The only remaining question would be how to get row id for which a command button is being built (using Command approach, for prop commandComponent). That would help us override components assigning them unique html id tags.

In general I'm not sure if it's possible to get a row id without creating a new Plugin with rows as a prop (using TemplateConnector and everything else). Is there an easier way to do this?

Thanks for your time and for your clear answers! 😄

[kvet]

I'm afraid that the TemplateConnector plugin primitive will not help you in this case.

You can create a PR that will add a row to the commandComponent property. Or create a different issue that we will convert to enhancement.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.