在测试期间在 Web 应用程序的页面上定位组件的最佳做法是什么？
What's the best practice to locate a component on a page in web app during a test?
我看到很多通过 class 甚至 HTML 标签定位元素的例子，我个人觉得不太可靠。
我注意到了一种利用组件的 data- 属性的方法，例如data-test.
将 data-test 属性添加到组件以检查它的存在和与它的交互是否是一个好习惯？还有比这更好的方法吗？
我会这样使用它：
<span data-test="add-descriptors-btn" class="medium-text">Add Descriptors</span>
我尝试四处寻找其他方法，但我发现的都是非常基本的示例，它们看起来不像可以在生产服务中使用的东西。
澄清一下，我问的不是“怎么做”，而是在大项目中如何恰当地完成。
在 Vue 中执行此操作的最常见方法之一是 using the ref attribute
Ref 的功能类似于 ID，但不是全局唯一的，它对组件的给定实例是唯一的。
您可以拥有具有相同 ref 的同一组件的多个副本，甚至可以在不同的组件中拥有多个相同的 ref。
例如：
<input type="text" ref="input">
...
console.log(this.$refs.input.value)
在测试期间，引用也可用于安装的组件。
如果那不合适，我肯定会选择使用您已经提到的 data- 方法。这是一种常见模式，广泛用于向组件添加额外标识或信息。
我看到很多通过 class 甚至 HTML 标签定位元素的例子，我个人觉得不太可靠。
我注意到了一种利用组件的 data- 属性的方法，例如data-test.
将 data-test 属性添加到组件以检查它的存在和与它的交互是否是一个好习惯？还有比这更好的方法吗？
我会这样使用它：
<span data-test="add-descriptors-btn" class="medium-text">Add Descriptors</span>
我尝试四处寻找其他方法，但我发现的都是非常基本的示例，它们看起来不像可以在生产服务中使用的东西。
澄清一下，我问的不是“怎么做”，而是在大项目中如何恰当地完成。
在 Vue 中执行此操作的最常见方法之一是 using the ref attribute
Ref 的功能类似于 ID，但不是全局唯一的，它对组件的给定实例是唯一的。
您可以拥有具有相同 ref 的同一组件的多个副本，甚至可以在不同的组件中拥有多个相同的 ref。
例如：
<input type="text" ref="input">
...
console.log(this.$refs.input.value)
在测试期间，引用也可用于安装的组件。
如果那不合适，我肯定会选择使用您已经提到的 data- 方法。这是一种常见模式，广泛用于向组件添加额外标识或信息。