引言
Cypress 是一个现代化的 E2E 测试框架，其可以很方便地做 UI 测试，以及与服务端 API 进行集成测试。与 Selenium 等其他自动化测试工具相比，Cypress 拥有更方便的 API，更快的测试速度，更好的稳定性等优势，因此被越来越多的团队所采用。
然而，Cypress 的 API 很快就可以变得混乱不堪，测试代码难以管理和维护。为此，Page Object 模式应运而生，它推荐将页面的元素和交互封装到外部类中，使测试代码更加简洁易读，更容易扩展和维护。
在本文中，我们将详细介绍如何在 Cypress 中使用 Page Object 模式，并提供相关的示例代码和最佳实践。
什么是 Page Object 模式
Page Object 模式是一个测试设计模式，它推荐将页面的元素和交互封装到外部类中。具体而言，Page Object 模式将 Web 页面分为两个部分：业务逻辑（Page Object）和操作逻辑（Tests）。
Page Object 封装了页面中的所有元素和交互，它们都是可重用的类，类中定义的方法用于执行具体的业务逻辑。这些类不只是封装了 DOM 元素，也可以包含 AJAX 请求，所有在 UI 上的独立业务都可以通过 Page Object 实现。
测试用例的职责就是在执行特定的操作时实例化 Page Object，然后施加特定的操作，并进行随后的断言。由于 Page Object 抽象出了页面的业务逻辑，测试代码会更加简洁易读，更容易扩展和维护。
Cypress 提供了很多便捷的方法来打造 Page Object 模式，但需要注意的是，这里说的 Page Object 并不是一个内置的 Cypress 对象。它确切地讲是一个普通的 class，也就是说，我们需要使用语言特性来定义和管理它，而 Cypress 则用来使用这些 Page Object。
创建一个 Page Object
要创建一个 Page Object，我们需要定义一个类，通常以页面的名字命名。比如：
-- -------------------- ---- -------
------ ------- ----- --------- -
------- -
------------------
-
---------------- -
----------------------------
-
------------------- -
-------------------------------
-
-------- -
-------------------------------------
-
-在这个示例代码中，我们定义了一个名为 LoginPage 的 Page Object，其中 visit、fillEmail、fillPassword 和 submit 都是该页面的具体业务逻辑。这些方法封装了页面中的元素和交互，并提供了易于使用的 API。
使用 Page Object
在 Cypress 中使用 Page Object 非常简单，只需要实例化它，并调用其中的方法即可：
-- -------------------- ---- -------
------ --------- ---- ---------------------------
----------------- -- -- -
----- --------- - --- -----------
------------- -- -
-----------------
--
---------- --- -- ---- ------- ------------- -- -- -
---------------------------------------
----------------------------------
------------------
--------------------- --------------------------------
--
---------- ---- --- -- ---- --------- ------------- -- -- -
---------------------------------------
----------------------------------------
------------------
---------------------------------- -------------
--
--在这个示例代码中，我们使用 import 引入了 LoginPage，并在测试用例中实例化了它。然后，在前置条件 beforeEach 中，我们使用 visit 方法打开了登录页面。
在测试用例中，我们通过 loginPage 实例调用 fillEmail、fillPassword 和 submit 方法，执行登录流程，并进行随后的断言。
Page Object 的更多最佳实践
以下是一些 Page Object 的最佳实践。请确保您遵循这些实践，以获得最佳的测试代码风格和测试代码的可维护性：
- 使用好的名字命名 Page Object：Page Object 的名字应该是短小精干的，具有易懂的表达力，便于理解和管理。
- 分离业务逻辑和操作逻辑：Page Object 应该封装所有业务逻辑，而不是操作逻辑。操作逻辑应该放在测试用例中，并使用 Page Object 的 API 进行调用。
- 合理使用元素的定位器：Page Object 中的方法应该使用合适的定位器来获取 DOM 元素。最好选择 ID、Class 和 data-* 属性等。
- 结合 TypeScript 使用：使用 TypeScript 可以使 Page Object 进一步拥有类型，并产生更安全、更高效的代码。
结论
通过 Page Object 模式，我们可以将测试代码更加简洁易读，更易于扩展和维护。Cypress 提供了便捷的接口，使得使用 Page Object 模式更加容易。在实际使用中，请确保遵循最佳实践，以获得最佳的测试项代码风格和测试代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffa8821b0bf82c71cdcb44