vue.js - 在测试期间在 Web 应用程序的页面上定位组件的最佳实践是什么？

我看到很多通过类甚至 HTML 标记定位元素的示例，我个人认为这些示例不太可靠。

我注意到一种利用data-组件属性的方法，例如data-test.

data-test向组件添加属性以检查它的存在和与它的交互是否是一种好习惯？还有比这更好的方法吗？

我会这样使用它：

<span data-test="add-descriptors-btn" class="medium-text">Add Descriptors</span>

我试图四处寻找其他方法，但我发现的只是非常基本的示例，它们看起来不像可以在生产服务中使用的东西。

为了清楚起见，我问的不是“如何”，而是如何在大型项目中适当地完成。

标签： vue.jsunit-testingtestingweb-applicationsjestjs

在 Vue 中执行此操作的最常见方法之一是使用ref属性

Ref 的功能类似于 ID，但它不是全局唯一的，它对于给定的组件实例是唯一的。

您可以拥有具有相同 ref 的同一组件的多个副本，甚至可以跨不同组件拥有多个相同 ref。

例如：

<input type="text" ref="input">
...
console.log(this.$refs.input.value)

Refs 也可用于在测试期间安装的组件。

如果这不合适，我肯定会选择使用data-您已经提到的方法。这是一种常见的模式，并且非常广泛地用于向组件添加额外的标识或信息。