如何在 CI/CD TeamCity 中设置和运行 Cypress 测试用例

关注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。

在本文中，读者将通过教程学习如何在 CI/CD TeamCity 中设置和运行 Cypress 测试用例，包括代码块和屏幕截图。

本文将介绍如何在 CI/CD TeamCity 中设置和运行 Cypress 测试用例。Cypress 是一个基于 JavaScript 的端到端测试框架，可用于测试 Web 应用程序。要使用 TeamCity 在 CI/CD 管道中执行 Cypress 测试用例，您可以使用 Cypress Test Runner 作为管道中的构建步骤。这可以配置为在无头浏览器中运行测试并生成可用于随时间跟踪测试结果的测试报告。此外，您可以使用 TeamCity 的内置功能（例如通知和分析）来跟踪测试状态并在测试失败时收到警报。

先决条件

1. 用户已登录到 TeamCity。
2. 代码已经推送到GitHub。
3. 对于演示，请使用最新版本 (12.3.0) 的 Cypress。

什么是团队城市？

TeamCity 是由 JetBrains 开发的持续集成和持续交付 (CI/CD) 服务器。它用于自动化软件项目的构建、测试和部署。TeamCity 提供了一个基于 Web 的界面，用于配置和管理构建，以及查看构建结果和统计信息。

TeamCity 支持多种构建技术，包括 Java、.NET、C++ 和许多其他技术。它可以与各种版本控制系统、问题跟踪系统和测试框架集成。它还内置了对运行测试和将代码部署到各种环境的支持。

TeamCity 中的基本 CI 工作流

要了解服务器和代理之间的数据流、传递给代理的内容以及 TeamCity 如何以及何时获取结果，让我们看一下简单的构建生命周期。

资料来源： JetBrains

工作流程指南

1. TeamCity 服务器检测到 VCS 根（存储库）中的更改。
2. 服务器将此更改存储在数据库中。
3. 触发器附加到构建配置，检测数据库中的相关更改并启动构建。
4. 触发的构建进入构建队列。
5. 该构建被分配给一个免费且兼容的构建代理。
6. 代理执行构建配置中描述的构建步骤。在执行这些步骤时，代理会向 TeamCity 服务器报告构建进度。它会即时发送所有日志消息、测试报告和代码覆盖率结果，因此您可以实时监控构建过程。
7. 完成构建后，代理将构建工件发送到服务器。

此外，TeamCity 可以与 GitHub、JIRA 和 Slack 等其他工具集成，以简化 CI 流程并提供项目状态的全面视图。

在集成之前，我们必须使用文件安装和设置 Cypresssome.spec以运行 CI/CD TeamCity。

设置赛普拉斯

要设置 Cypress，您的计算机上必须安装 Node.js 和 npm（节点包管理器）。一旦你有了这些，你可以按照以下步骤操作：

1. 打开终端或命令提示符，然后导航到项目的根目录。
2. 运行命令npm init以在您的项目中初始化一个新的 npm 包。（如果您的项目已有文件，则可以跳过此步骤package.json）。
3. 运行命令npm install cypress --save-dev将 Cypress 安装为项目中的开发依赖项。
4. 安装完成后，运行命令npx cypress open打开 Cypress Test Runner。
5. 在 Cypress Test Runner 中，您可以为您的应用程序编写和运行测试。
6. cypress.json您还可以通过编辑位于项目根目录中的文件来配置 Cypress 。

使用以下命令安装赛普拉斯：

npm install cypress --save-dev

安装 Cypress 后，您可以看到以下文件夹结构：

Cypress的文件夹结构解释如下：

1. cypress/：这是您的 Cypress 测试的主目录。
2. e2e/：此目录包含所有测试文件。建议根据他们正在测试的功能或页面来组织测试文件。
3. fixtures/：此目录包含用于测试应用程序的数据，例如 JSON 或 CSV 文件。
4. plugins/：此目录包含扩展 Cypress 功能的 JavaScript 文件。
5. support/：此目录包含用于配置 Cypress 和设置测试的文件。

演示示例

出于演示目的，我以这个网站为例。

用户界面示例

/// describe("QAAutomationLabs.com", { testIsolation: false }, () => { it("Open URL", () => { cy.visit("https://qaautomationlabs.com/"); }); it("Click on Read More ", () => { cy.get(".staticslider-button").click(); }); it("Verify Particular Blog ", () => { cy.contains( "Running End-to-End Cypress Test cases In Google Cloud Build Pipeline" ); }); it("Click on Blogs", () => { cy.contains("Blog").scrollIntoView().click({ force: true }); }); it("Search the datas", () => { cy.get('[id="wp-block-search__input-2"]').scrollIntoView(); cy.get('[id="wp-block-search__input-2"]') .click({ force: true }) .type("cypress"); cy.get('[id="search-icon"]').click({ force: true }); cy.contains("Search Results for: cypress"); }); });

API范例

API 以本站为例：

it("GET API testing Using Cypress API Plugin", () => { cy.request("GET", "https://reqres.in/api/users?page=2").should((response) => { expect(response.status).to.eq(200); }); }); it("POST API testing Using Cypress API Plugin", () => { cy.request("POST", "https://reqres.in/api/users", { name: "morpheus", job: "leader", }).should((response) => { expect(response.status).to.eq(201); }); }); it("PUT API testing Using Flip Plugin", () => { cy.request("PUT", "https://reqres.in/api/users/2", { name: "morpheus", job: "zion resident", }).should((response) => { expect(response.status).to.eq(200); }); }); it("DELETE API testing Using Cypress API Plugin", () => { cy.request("DELETE", "https://reqres.in/api/users/2").should((response) => { expect(response.status).to.eq(204); }); });

Package.json 文件

{ "name": "cypress_headless", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "yarn cypress run" }, "author": "Kailash Pathak", "license": "ISC", "dependencies": { "cypress": "^12.3.0" }, }

将 TeamCity 与 Cypress 集成

将 Cypress 与 TeamCity 集成后，您可以将 Cypress 端到端测试作为持续集成 (CI) 工作流程的一部分运行。

要将 Cypress 与 TeamCity 集成，您需要创建一个构建配置，在构建过程中运行 Cypress 测试。这可以通过配置构建步骤来运行 Cypress 测试命令来完成，例如“ npx cypress run ”或“ yarn cypress run ”，具体取决于项目的设置。此外，您需要配置构建以向 TeamCity 报告测试结果，以便在 TeamCity Web 界面中分析和显示结果

以下是 Cypress 与 TeamCity 集成的一些步骤：

步骤1

使用现有的 Google 帐户注册：

登录后，您将看到以下屏幕：

第2步

点击“ Create Project ”，新建一个项目：

步骤 3

单击“创建项目”后，将打开以下屏幕。在下面的屏幕中，我们可以看到所有存储库都在显示：

步骤4

选择项目。在我的例子中，我将选择“ Cypress_12.3.0 (https://github.com/cypress1980/Cypress_12.3.0) : ”

步骤 5

当用户选择项目时，将打开以下屏幕。已验证与 VCS 存储库的连接并且存储库已链接：

步骤 6

单击上面屏幕中的“继续”按钮。当用户单击“继续”按钮时，会显示：通过扫描 VCS 存储库自动检测构建步骤及其设置：

步骤 7

从下面的屏幕中选择“ Node.js (Shell Script :npm run test) ”：

步骤 8

在上面的屏幕中单击“添加构建步骤”。选择“命令行”作为构建步骤：

步骤 9

在“ Shell Script :”中输入以下信息

yarn cypress install yarn run test

选择 Docket 容器“ cypress/base:16.18.1 ”，然后单击“ Save ”按钮：

步骤 10

现在，通过单击“运行”按钮来“运行”构建：

报告