Cypress 如何作为持续集成工具进行自动化测试

阅读时长 5 分钟读完

简介

Cypress 是一个先进的前端测试工具,可以轻松地进行自动化测试。它提供了许多特性,例如内置断言、易于调试、实时重载等等。而且,它还可以作为持续集成工具来运行自动化测试,确保您的应用程序在不同环境下的稳定性。

配置

Cypress 可以在任何持续集成环境中运行,但是为了使其在不同环境下的运行更加可控和可重复,最好设置 Cypress 的一些配置选项。以下是几个您必须配置的选项:

  • baseUrl:您要测试的应用程序的基本 URL。设置此选项后,您可以在测试用例中使用相对 URL。
  • browser:指定 Cypress 使用的浏览器。默认情况下,它使用 Electron 浏览器,但是您可以指定其他浏览器。

您可以通过以下方式将选项传递给 Cypress:

  • 通过 cypress.json 文件。
  • 通过环境变量。

以下是一个简单的 cypress.json 示例:

编写测试用例

在 Cypress 中编写测试用例非常简单。您只需要创建一个 JavaScript 文件,并使用 Cypress 的 API 编写测试用例。以下是一个测试登录表单的例子:

-- -------------------- ---- -------
--------------- ------ -- -- -
  ---------- ------- ----- ------- ---- ------- ------------- -- -- -
    ------------------
    ----------------------------------------------------
    ----------------------------------------------------
    -----------------------
    -------------------------------------
  --

  ---------- --- -- ------------ ---- ----- ------------- -- -- -
    ------------------
    --------------------------------------------------
    --------------------------------------------------
    -----------------------
    --------------------- ----------------------------------
  --
--
展开代码

在此示例中,我们创建了一个名为 "Login form" 的测试套件,其中包含两个测试用例:一个测试无效凭据(应该显示错误消息),另一个测试有效凭据(应该成功登录)。

断言

Cypress 内置了许多断言,可以轻松地对页面元素进行测试。以下是一些常用的断言:

  • should('be.visible'):检查元素是否可见。
  • should('exist'):检查元素是否存在。
  • should('have.class', className):检查元素是否拥有指定的 CSS 类。
  • should('have.value', value):检查表单元素的值是否与指定值匹配。
  • should('have.attr', attributeName, attributeValue):检查元素是否拥有指定属性及其值。

您还可以编写自己的自定义断言,以应对特殊情况。

调试

在 Cypress 中调试测试用例非常简单。您可以使用 Chrome 开发者工具的所有功能,例如断点、控制台、捕获异常等等。您甚至可以在测试用例中使用 cy.pause(),以使测试停留在某个点,以便您检查元素的状态。

运行测试用例

在本地运行 Cypress 测试很容易,只需运行以下命令:

这会启动 Cypress Test Runner,其中包含可视化的测试运行器和您编写的测试套件列表。您可以通过单击套件名称来运行测试套件,也可以通过单击测试用例来仅运行特定测试用例。

要将 Cypress 用作持续集成工具,您可以使用以下命令来在终端中运行测试:

此命令将在终端中运行测试,并在测试完成后显示运行结果。

示例

以下是一个完整的示例,展示了 Cypress 如何在持续集成环境中作为自动化测试工具运行:

-- -------------------- ---- -------
----- --

--- ------

-----
  ------

    -------- -------------

    ------
    - ----- -------------------

    - ----- --- ------- ----
      ----- ---------------------
      -----
        ------------- ------

    - ----- ------- ------------
      ---- --- -------

    - ----- --- -----
      ---- --- --- -----------
展开代码

此示例使用 GitHub Actions,在代码推送到主分支时运行测试套件。它包含以下步骤:

  1. 检出代码。
  2. 安装 Node.js。
  3. 安装依赖项。
  4. 运行 Cypress 测试。

结论

Cypress 是一个功能强大的前端测试工具,可以轻松地进行自动化测试,并作为持续集成工具来确保您的应用程序在不同环境下的稳定性。通过使用 Cypress,您可以编写高质量的测试用例,并快速获得反馈,以便您可以快速识别和解决问题。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671e03812e7021665ef51979

纠错
反馈

纠错反馈