Cypress 是一个流行的前端自动化测试工具。它提供了一套简单易用的 API，可以用于编写 UI 自动化测试。在使用 Cypress 进行 UI 自动化测试时，我们需要遵循一定的编写规范，以保证测试代码的可靠性和可维护性。本文将介绍 Cypress 自动化测试的编写规范，包括测试架构、测试用例编写、元素定位、断言编写、测试数据管理等方面。
测试架构
Cypress 可以用于编写单元测试、组件测试和端到端测试。对于 UI 自动化测试而言，通常采用端到端测试的方式。在编写端到端测试时，我们需要将测试代码分为三个部分：准备、操作和断言。其中，准备部分主要包括对测试环境的设置、测试数据的准备和页面的加载。操作部分主要包括对页面元素的操作，例如点击、输入等。断言部分主要用于对页面的状态进行断言，例如页面是否显示了某个元素等。以下是一个简单的测试架构示例：
-- -------------------- ---- -------
------------------ -- -- -
--------- -- -
-- ------
-------------------------------
--
------------- -- -
-- ------
-------------------------------------------
--
-------- --- -- -- -
-- ------
-------------------------------------
-----------------------------------------
----------------------------
-- ------
---------------------------------------- --- -----------
--
-------- --- -- -- -
-- ------
------------------------------------------
-----------------------------
-- ------
---------------------------------------------- ---
--
--测试用例编写
在编写测试用例时，我们需要注意以下几点：
1. 测试用例描述
每个测试用例都应该有一个描述，用于说明测试的目的和预期结果。这样可以使测试用例更易读和易理解。
2. 操作步骤
在编写测试用例时，应该清晰地列出测试用例的操作步骤。每个操作步骤应该包含对页面元素的定位和操作。
3. 断言方式
在进行断言时，应该选择合适的断言方式。Cypress 提供了多种断言方式，包括 should、expect 等。应该根据测试的目的和断言对象选择适合的断言方式。
4. 测试数据
在进行测试时，应该使用真实的测试数据。可以通过 Cyppress 自带的 Fixture 功能来管理测试数据。测试数据应该尽可能地与真实环境相同，以确保测试的准确性。
元素定位
在编写 UI 自动化测试时，元素定位是非常重要的。Cypress 提供了多种元素定位方式，包括 CSS 选择器、XPath 等，在选择元素定位方式时，我们需要注意以下几点：
1. 独一无二的定位方式
在选择元素定位方式时，应该选择独一无二的定位方式。例如，使用 id 定位元素比使用 class 定位元素更可靠。
2. 不要使用绝对路径
使用绝对路径定位元素容易受到页面布局的影响，应该尽可能选择更加简单和可靠的定位方式。
3. 复杂元素的定位
对于复杂的元素，可以使用组合选择器进行定位。例如，对于一个包含多个子元素的表格，可以使用 tr:nth-child(x) td:nth-child(y) 来定位表格中的某个单元格。
以下是一些常用的元素定位方式：
| 定位方式 | 描述 |
|---|---|
cy.get('#element-id') |
根据 id 定位元素 |
cy.get('.element-class') |
根据 class 定位元素 |
cy.get('element-type') |
根据元素类型定位元素 |
cy.contains('text') |
根据元素文本内容定位元素 |
cy.get('[attribute="value"]') |
根据元素属性定位元素 |
断言编写
在进行断言时，应该选择合适的断言方式。以下列举了一些常用的断言方式：
1. should
should 断言方式用于对元素内容进行断言，例如元素是否包含了某个文本或某个值。以下是一些常用的 should 断言方式：
| 断言方式 | 描述 |
|---|---|
.should('exist') |
断言元素是否存在 |
.should('be.visible') |
断言元素是否可见 |
.should('not.be.disabled') |
断言元素不是禁用状态 |
.should('contain', 'text') |
断言元素包含了指定文本 |
.should('have.value', 'value') |
断言元素具有指定值 |
.should('have.length', length) |
断言元素数量 |
2. expect
expect 断言方式用于对元素属性进行断言，例如元素的宽度、高度等。以下是一些常用的 expect 断言方式：
| 断言方式 | 描述 |
|---|---|
.invoke('width') |
获取元素宽度 |
.invoke('height') |
获取元素高度 |
.invoke('attr', 'attribute') |
获取元素属性 |
.invoke('css', 'property') |
获取元素 CSS 属性 |
测试数据管理
在进行 UI 自动化测试时，测试数据是非常关键的。我们可以使用 Cypress 提供的 Fixture 功能来管理测试数据。以下是一个测试数据管理示例：
-- -------------------- ---- -------
-
-------- -
-
----------- --------------
----------- -----------------
--
-
----------- --------------
----------- -----------------
-
--
---------- -
---------------
--------------
-
-在测试用例中，可以通过以下方式使用测试数据：
-- -------------------- ---- ------- ------------- -- - ------------------------------------------- -- ---------- -- -- - ----- ---- - ---------------------- ----- ----- - ------------------------ --------------------------------------- --------------------------------------- ----------------------------------- --
总结
Cypress 是一个强大的前端自动化测试工具。在编写 UI 自动化测试时，需要遵循一定的编写规范，并合理使用元素定位、断言方式和测试数据管理功能。通过遵循规范编写测试用例，可以有效提高测试代码的可靠性和可维护性，从而提高测试效率和测试质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3415248841e9894f81a56