[Chernobog]

For e2e testing I have seen various patterns, and the article mentions data-test-id for instance. In my own tests, I have opted for something similar, that has given a bit more flexibility.

Singular elements: data-test-save-button, data-test-name-input

Elements that are a part of a list: data-test-user={user.id}, data-test-listing={listing.id}

This allows us to name our elements with data test attributes, but also provide values to them where applicable.

I have also created a testSelector function that takes id and value, and spits out either [data-test-${id}="${value}"] or [data-test-${id}].

We have also experimented with letting shared components popuplate their own data-test-* attribute automatically based on other props. Like in our modal component, which sets data-test-modal={title}. data-test-delete-user-modal vs. data-test-modal="Delete user". But in the latter case, the dev does not need to provide the data-test-* attribute manually, since the component takes care of it.