前言
在进行 UI 自动化测试时，元素抽离是一个非常重要的步骤。它可以帮助我们更好地维护测试代码，提高测试效率。在 Cypress 中，我们可以通过多种方式来进行元素抽离。本文将介绍其中两种常用的方式。
方式一：使用 fixtures 文件
我们可以将页面上的元素信息存储在一个 JSON 文件中，然后在测试代码中引用这个文件。这样做的好处是，我们可以将元素信息与测试代码分离，使测试代码更加简洁和易于维护。
步骤一：创建 fixtures 文件
在 Cypress 的 fixtures 目录下创建一个 JSON 文件，例如 elements.json，并在其中存储页面上的元素信息，例如：
{
"loginButton": "button[id='login']",
"usernameInput": "input[name='username']",
"passwordInput": "input[name='password']"
}步骤二：在测试代码中引用 fixtures 文件
在测试代码中使用 cy.fixture() 方法引用 fixtures 文件，并将元素信息保存在变量中，例如：
-- -------------------- ---- -------
----------------- -- -- -
---------- --- -- -------------- -- -- -
------------------------------------------- -- -
-------------------
------------------------------------------------
------------------------------------------------
-------------------------------------
-------------------------- --------------
---
---
---方式二：使用 Page Object 模式
Page Object 模式是一种常用的元素抽离方式，它将页面抽象为一个对象，每个页面都对应一个 Page Object 类。在 Page Object 类中定义页面上的元素和方法，并将它们封装起来。这样做的好处是，我们可以更好地组织测试代码，使测试代码更加清晰和易于维护。
步骤一：创建 Page Object 类
在 Cypress 的 support 目录下创建一个 Page Object 类，例如 LoginPage.js，并在其中定义页面上的元素和方法，例如：
-- -------------------- ---- -------
----- --------- -
------- -
-------------------
-
--- --------------- -
------ ---------------------------------
-
--- --------------- -
------ ---------------------------------
-
--- ------------- -
------ -----------------------------
-
--------------- --------- -
----------------------------------
----------------------------------
-------------------------
-
-
------ ------- --- ------------步骤二：在测试代码中引用 Page Object 类
在测试代码中使用 import 语句引用 Page Object 类，并使用 Page Object 类中定义的方法和元素，例如：
-- -------------------- ---- -------
------ --------- ---- -----------------------
----------------- -- -- -
---------- --- -- -------------- -- -- -
------------------
--------------------------- ------------
-------------------------- --------------
---
---总结
在 Cypress 中进行 UI 自动化测试时，元素抽离是一个非常重要的步骤。我们可以使用 fixtures 文件或 Page Object 模式来进行元素抽离。使用这些方法可以使测试代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653bdecf7d4982a6eb622739