NPM 包 @cypress/github-action 使用教程

阅读时长 4 分钟读完

NPM 包 @cypress/github-action 是一个 GitHub Actions,用于在 Cypress 中运行测试并将结果发送回 GitHub。本文将详细介绍如何使用该包来完成 GitHub Actions 的自动化测试。

步骤 1:安装 @cypress/github-action

在项目的根目录下,使用以下命令来安装 @cypress/github-action:

步骤 2:创建一个 Cypress 测试

在项目中创建一个 Cypress 测试,例如测试文件名为 example.spec.js,并在测试文件中添加以下代码:

步骤 3:创建一个 GitHub Actions 工作流程

在项目的 .github/workflows 目录中创建一个新文件,例如 cypress.yml,并添加以下代码:

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

--- ------

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

该文件指定了一个名为 Cypress 的工作流程,它将在 GitHub 上的 push 事件触发。该工作流程有一个作业 cypress,它在 ubuntu-latest 上运行,并执行以下步骤:

  • 运行 actions/checkout 动作,对代码进行检出。
  • 运行 actions/cache 动作,缓存项目的 node_modules。
  • 运行 @cypress/github-action 动作,安装并运行 Cypress 测试,并将结果记录下来。

步骤 4:提交并推送代码

将代码提交并推送到 GitHub 上,GitHub Actions 将自动开始运行。在工作流程完成后,可以在其日志中查看测试结果。如果有失败的测试用例,将可以查看其失败原因。

指导意义

使用 @cypress/github-action 包可以为您的项目建立一个自动化测试工作流程,确保每次提交的代码质量。此外,它还可以将测试结果记录到 Cypress Dashboard 上,以方便跟踪问题。

示例代码

在本示例代码中,我们将测试 example.spec.js 的文件,并使用 GitHub Actions 在 Ubuntu 上执行测试:

  • example.spec.js 文件内容
  • .github/workflows/cypress.yml 文件内容
-- -------------------- ---- -------
----- -------

--- ------

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

以上就是使用 @cypress/github-action 包进行 GitHub Actions 自动化测试的详细介绍。

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