前言
在前端自动化测试中，我们经常会使用 Cypress 这个工具。Cypress 是一个现代化的 JavaScript 测试框架，它提供了一个完整的端到端测试解决方案。Cypress 还提供了一种称为 Page Objects 模式的设计模式，用于更好地组织测试代码和提高可维护性。本文将介绍如何在 Cypress 中使用 Page Objects 模式。
什么是 Page Objects 模式？
Page Objects 模式是一种软件设计模式，它用于将页面的逻辑和测试代码分离。在 Page Objects 模式中，每个页面都有一个对应的 Page Object，它封装了页面的行为和属性。测试代码只需要调用 Page Object 中的方法和属性，而不需要了解页面的具体实现细节。
为什么使用 Page Objects 模式？
使用 Page Objects 模式可以带来以下好处：
- 提高测试代码的可维护性：将页面的逻辑和测试代码分离，可以使测试代码更加清晰和易于维护。
- 提高测试代码的可重用性：Page Objects 可以在多个测试用例中重复使用，从而减少代码重复。
- 提高测试代码的可读性：使用 Page Objects 可以使测试代码更加易于阅读和理解。
在 Cypress 中使用 Page Objects 模式需要遵循以下步骤：
1. 创建 Page Object
创建一个 Page Object，用于封装页面的行为和属性。可以在 cypress/support 目录下创建一个名为 pageObjects 的文件夹，然后在该文件夹下创建一个名为 examplePage.js 的文件，如下所示：
-- -------------------- ---- -------
----- ----------- -
------- -
--------------------
-
---------- -
------ ------------
-
----------- -
------ ----------------
-
------------- -
------------------------
-
-
------ ------- --- -------------在上面的代码中，我们创建了一个名为 ExamplePage 的 Page Object，它封装了页面的行为和属性。visit 方法用于访问页面，getTitle 方法用于获取页面的标题，getButton 方法用于获取页面上的按钮，clickButton 方法用于点击按钮。
2. 在测试代码中使用 Page Object
在测试代码中使用 Page Object 非常简单，只需要导入 Page Object，然后调用其方法和属性即可。例如，我们可以编写一个测试用例来测试页面的标题和按钮是否正确，如下所示：
-- -------------------- ---- -------
------ ----------- ---- ------------------------------------
----------------- ------ -- -- -
------------- -- -
-------------------
--
---------- ---- ------- ------- -- -- -
------------------------------------------ -------- ------
--
---------- ---- -------- -- -- -
---------------------------------------
--
---------- -- ---- -- ----- -------- -- -- -
-------------------------
-- ---
--
--在上面的测试代码中，我们导入了 ExamplePage，然后在 beforeEach 钩子中调用了 ExamplePage.visit() 方法来访问页面。在三个测试用例中，我们分别调用了 ExamplePage.getTitle()、ExamplePage.getButton() 和 ExamplePage.clickButton() 方法来测试页面的标题、按钮是否存在以及按钮是否可点击。
总结
Page Objects 模式是一种用于将页面的逻辑和测试代码分离的设计模式。在 Cypress 中使用 Page Objects 模式可以提高测试代码的可维护性、可重用性和可读性。我们可以在 cypress/support 目录下创建一个名为 pageObjects 的文件夹，然后在该文件夹下创建一个 Page Object 文件，封装页面的行为和属性。在测试代码中，我们可以导入 Page Object，然后调用其方法和属性即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fcfe60d10417a22285a30e