Grid components without ids - how to find components in ui automated tests like cypress

[Salvatore]

Hello everyone
i have to create some cypress tests and figured out that nested grid components like the header date time filters do not have any ids or data-role-ids.
is there a way to "enable" them? 
i can find components searching by Title (like  $(e.container).find('select[title="Operator"]'); or $(e.container).find('select[title="Additional operator"]');) but it's not 100% safe

[Anton Mironov]

Hi Salvatore,

Thank you for the details provided.

The UI for ASP.NET MVC Grid does not provide built-in options to automatically generate unique IDs or data attributes for its nested elements, such as header filters. This can make automated UI testing more challenging, as you noted.

Here are practical strategies to improve element selection reliability in your tests:

• Custom Attributes in Templates:
  For grid columns and filters where you control the template, you can inject custom HTML attributes (like data-test or unique class values) to make these elements easier to target. For example, in a filter template, you can add:

  @(columns => columns.Bound(p => p.Date)
    .Filterable(ftb => ftb.UI("dateFilterTemplate"))
  )
  
  <script>
    function dateFilterTemplate(element) {
      element.attr("data-test", "grid-date-filter");
    }
  </script>
  

  This approach lets you create stable selectors for your tests.

• Selector Strategies:
  If custom attributes aren't possible, use a combination of selectors for better reliability. For example, select elements by their class, position, or other available attributes.

  • https://api.jquery.com/category/selectors/

• Limitations:
  There is no built-in configuration to enable automatic IDs or data attributes for all nested grid components. Relying on titles or placeholder values is possible, but these can change due to localization or UI updates, so they are less stable.

For now, using custom attributes in templates and combining selector strategies is the most robust solution for UI test automation with the Grid. If you need more control over nested elements, consider submitting a feature request for automatic ID or data-attribute generation in future releases.

 

Kind Regards,
Anton Mironov
Progress Telerik