Custom attributes such as data-testid?

[YOU54F]

Hey up,

We have started to trial the react-jsonschema-form at work and the devs really like it, but I haven't found a way of setting a custom fixed attribute such as a data-testid for each item defined in the schema.

I along with other testers would benefit from this, as we are able to have concrete selectors on the page, that wont change.

Is is a common convention in automation testing, so I was wondering if you guys support.

I have had a good read of the docs, and played around in the selector playground but haven't been able to come across a solution yet.

Thanks for any help in advance!

[LucianBuzzo]

Hi @YOU54F all form controls have a unique and consistent id that you can use for automated testing. For example, in the demo (https://mozilla-services.github.io/react-jsonschema-form/) the "First name" input has an id of root_firstName and the "Password" input has an id of root_password.

If you need more control over the attribute you could use custom CSS class names (https://github.com/mozilla-services/react-jsonschema-form#custom-css-class-names) to set a unique class for each input.

[YOU54F]

HI, @LucianBuzzo,

Thank you for the quick reply. I am currently using the root_* prefixed inputs in my tests.

I did see the custom CSS class names section, thank you for linking me to that. It may be a suitable workaround, but really having data-testid or other custom attributes would be ideal for Cypress.io's selector playground.

https://user-images.githubusercontent.com/1157043/36675059-ec04b89a-1ad5-11e8-8fec-273600912ce8.gif

It uses the following precedence order for finding and returning selectors to an end user

Default Selector Priority:

• data-cy
• data-test
• data-testid
• id
• class
• tag
• attributes
• nth-child

It would be really valuable to use, for that use case (and for re-usability of selectors throughout our test code)

[glasserc]

Hi, thanks for your interest. The main mechanisms we have for allowing developers to customize the HTML are templates and custom widgets. I hesitate to add other such mechanisms as the project is already pretty complicated. If all you want is a data-testid attribute, you could probably add a FieldTemplate that adds data-testId={props.id}, or a BaseInput that does the same thing. Maybe you have something more complicated in mind, but I think those mechanisms are probably what it will come down to anyhow.

[YOU54F]

Thank you my friend, our UX developer is working with the solution proposed and is seeing how far we can get.

I'll close this issue down now!

Kind regards,