Why is the data-test element for Username on the div instead of the input element?

[FrankAmsterdam]

I'm having a lot of fun playing around with the Cypress RWA. Searching for the data-test attributes for username and password on the login page I expected them to be on the input element but found them on a div parent element. I noticed in my tests that it was possible to use these div to type in the text which suprises me a little bit.

[robertguss]

Hi @FrankAmsterdam this is because we are using Material UI components to render these inputs. You can see how they are being used here:

cypress-realworld-app/src/components/SignUpForm.tsx

Line 129 in 86bc319

<TextField

cypress-realworld-app/src/components/SignUpForm.tsx

Line 137 in 86bc319

data-test="signup-username"

Hopefully that helps clarify things.

[FrankAmsterdam]

Does this mean that it is not possible to put the attribute on the input field in this way. Or does it just not matter to cypress that the attribute is on the div instead of the input field?

[robertguss]

Because we are using a 3rd party component library, there is only so much we have access to. As long as you can select the element you need with Cypress, there shouldn't be any issue.