前言
当我们需要进行前端页面自动化测试时，一种常见的方式是使用 Page Object 模式。该模式可以将页面的各个元素（如文本、按钮等）抽象成对象，从而实现更加简洁、易读的测试代码。
在 Ember.js 中，我们可以使用 npm 包 ember-page-object 来快速自定义 Page Object。本文将针对此 npm 包进行详细介绍，并提供相关示例代码，供读者学习参考。
安装与基本使用
在项目中使用 ember-page-object，需先通过 npm 安装该依赖包：
npm install --save ember-page-object
接着，我们可以在测试文件中引入并声明需要测试的页面对象：
-- -------------------- ---- -------
------ - ------- ----- - ---- --------------------
----- ---------- - --------
------ -----------
-------- -
----- -----------
--
------------ -
------ ---------
------ ------------
--
------------- -
------ -----------
------ ------------
--
---上述代码声明了一个名为 PageObject 的页面对象，其中包含了一个 visit 方法和三个元素对象 heading、loginButton 和 signUpButton。visit 方法用于打开该页面，heading 对象中包含了一个 text 属性，用于获取 <h1> 元素中的文本内容，而 loginButton 和 signUpButton 对象分别包含了 scope 和 click 方法，分别用于选择相应的元素和模拟点击事件。
值得注意的是，我们在声明元素对象时使用了 create 函数，并根据实际需求添加了相应的方法。比如在 loginButton 对象中，我们使用了 clickable() 方法来指示该元素为可点击的，可以用于进行按钮点击操作。
在完成页面对象的声明后，我们可以在测试用例中使用该对象中的方法和属性，如下所示：
-- -------------------- ---- ------- ------ - ---- - ---- -------- ------ ------------------- ---- --------------------------------------------- ------ ---------- ---- ------------------- ------------------------------- - -- ------- -------------- -- ------ ---------------- - ------------------- ------------------------------------- -------- -- -- -------- --- -------------- ----- -------- ---------------- - ------------------- ------------------------------- -------------------------- ---------- --- -------------- ---- -- -------- ---------------- - ------------------- -------------------------------- -------------------------- ------------ ---
上述测试用例中，我们首先在 my-page.js 文件中声明了一个名为 PageObject 的页面对象，接着在测试用例中引入该对象，并使用该对象中的属性和方法进行相应的测试操作。
元素对象的高级用法
除了上述基本用法外，我们还可以使用 ember-page-object 提供的其他方法和属性来实现更加复杂的页面自动化测试逻辑。下面分别对常用的一些方法进行说明。
hasClass
hasClass 方法用于判断指定元素是否包含某个 class，如下所示：
{
// ...
loginButton: {
scope: '.login',
isDisabled: hasClass('btn-disabled'),
},
}上述代码中，我们使用 hasClass 方法判断了 .login 元素是否包含 btn-disabled 样式，从而判断该按钮是否被禁用。
value
value 属性用于获取表单元素的值，如下所示：
-- -------------------- ---- -------
-
-- ---
------------ -
------ ------------- --------------------
------ --------
------------------ -
------ ----------------------------- ------------
--
--
-上述代码声明了一个名为 searchInput 的表单输入框，并定义了一个 fillIn 方法以方便后续测试代码的编写。
triggerable
triggerable 方法用于模拟自定义事件的触发。比如，我们可以自定义一个 drag 事件，并在测试用例中触发该事件，如下所示：
-- -------------------- ---- -------
-
-- ---
----------- -
------ -------------
-------------- ----------------------
----------- -
------ ---------------------------------------------
--
----------- -
------ ---------------------------------------------
--
------ -
------ ----------------------------------------
--
--
-结语
本文基于 ember-page-object 包，针对前端页面自动化测试相关内容进行了讲解，并配以详细示例代码。读者可以通过学习本文，快速掌握 ember-page-object 的使用方法，并实现更加灵活、高效的前端自动化测试方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca43