在测试期间在 Web 应用程序的页面上定位组件的最佳实践是啥？

Posted 2023-02-22

【中文标题】在测试期间在 Web 应用程序的页面上定位组件的最佳实践是啥？

【英文标题】：What's the best practice to locate a component on a page in web app during a test?在测试期间在 Web 应用程序的页面上定位组件的最佳实践是什么？

【发布时间】：2021-07-14 15:34:29

【问题描述】：

我看到很多通过类甚至 html 标签定位元素的例子，我个人觉得不太可靠。

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

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

我会这样使用它：

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

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

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

【问题讨论】：

可能想查看@testing-library/vue。我没有将它用于 Vue，但我已经将它用于 React。它采用与其他一些测试框架不同的方法，可能更接近您正在寻找的东西。

data-testid 几乎是一个标准。只要有约定，就可以从生产代码中删除额外的属性。

【参考方案1】：

在 Vue 中执行此操作的最常见方法之一是 using the ref attribute

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

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

例如：

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

在测试期间，已安装的组件也可以使用参考。

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