I see many examples of locating an element via a class or even HTML tag, which personally I don't find too reliable.
I've noticed an approach to leverage data- attribute for components, e.g. data-test.
Is it a good practice to add data-test attribute to a component to check for its presence and interaction with it? Is there a better approach than that?
I would use it like so:
<span data-test="add-descriptors-btn" class="medium-text">Add Descriptors</span>
I've tried to look around for other approaches, but all I find is very basic examples, which don't look like something that could used in a production service.
Just to make it clear, I'm asking not "how to", but how it is done appropriately in big projects.
One of the most common ways of doing this in Vue is by using the ref attribute
Ref functions similar to an ID but instead of being globally unique, it is unique to a given instance of a component.
You can have multiple copies of the same component with the same ref, or even multiple of the same ref across different components.
For example:
<input type="text" ref="input">
...
console.log(this.$refs.input.value)
Refs are also available to mounted components during tests.
If that isn't suitable, I'd definitely opt for using a data- approach like you already touched on. It's a common pattern and very widely used for adding extra identification or info to a component.