在使用 Ember.js 开发 Web 应用时，我们需要对应的测试来确保代码质量。其中，针对前端组件的测试是非常重要的一环。很多时候，我们需要测试前端组件的各个元素是否能够被正确的渲染和交互。在这个方面，npm 包 ember-test-selectors 可以帮助我们实现组件选择和定位。在这篇文章里，我们将详细介绍如何使用这个 npm 包，并提供有深度和学习以及指导意义内容。
简介
ember-test-selectors 是一个 Ember.js 加载器模块，旨在简化测试过程的前端元素选择。它使用标记（data-test-*）作为其核心功能来标记页面上的 HTML 元素，并帮助测试人员快速、易于阅读、无需查找未来可能更改的 CSS、JS、元素结构等。如果你使用过其它的前端自动化测试工具，你会发现 ember-test-selectors 能够非常方便地使用 CSS 选择器定位到测试需要用到的元素上。这是因为选择器已经明确用于标识元素或元素的属性（例如类）。
安装
在使用 ember-test-selectors 之前，我们首先需要确保 Ember.js 项目中已经安装和配置好了 Ember.js 测试环境。之后，我们就可以通过运行以下命令来安装 ember-test-selectors：
npm install ember-test-selectors --save-dev
示例代码
下面的代码展示了如何使用 ember-test-selectors 选择器来在测试代码中正确定位到组件元素中。
-- -------------------- ---- -------
------ - ----- ------ - ---- --------
------ - --------- - ---- --------------
------ - ------ ----- ------- - ---- ----------------------
------ ----- ---- --------
------ --- ---- ----------------
------ ---- ---- -------
------ - ----- - ---- ---------------------------
------ ------------ ---- -----------------------
---------------------- --------------- -
-----------------
-------- ------ ------- --- ------- ------- ---------------- -
-----------------
------ -- -
--------------------- -----------
------------------------------ ------------------------
-------------
----------------------------------------------------------------
----------
--- ------ ------- --- ------- ------
--
---
---
-------- ------ ------ - ---- ------- ---------------- -
-----------------
------ -- -
--------------------- -----------
------------------------------ ------------------------
------------------------------------------------- -- -
-------------
----------------------------------------------------------
-------- ---------
--- ------ ------ --- ----- ----- --- ----- -- --------
--
---
---
---
---在此示例代码中，我们首先导入了 Ember.js 测试所需的运行环境和一些 npm 包。然后，使用 module 和 setupTest 设置了组件的测试环境。最后，我们定义了两个测试用例，来测试组件的数据展示和用户交互行为。在测试用例中，使用 ember-test-selectors 所提供的 TestSelector 函数来定位到组件中需要测试的元素上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59804