如何无需CI/CD一键运行Cypress测试AWS多环境Web应用？

核心思路 #

既然目标是直接测试已部署的线上/预发布应用，完全不需要关联原应用的代码仓库或构建流程，我们可以单独搭建一个仅包含Cypress测试代码的独立项目，直接指向已部署URL运行测试。

具体步骤 #

1. 创建独立的Cypress测试项目

   • 新建一个空文件夹，初始化npm项目：

     npm init -y
     npm install cypress --save-dev
     

   • 首次运行npx cypress open，Cypress会自动生成默认的项目结构（e2e测试目录、配置文件等）。

2. 配置目标应用URL

   • 打开项目根目录的cypress.config.js（或旧版的cypress.json），设置baseUrl为你的已部署应用地址：

     // cypress.config.js
     const { defineConfig } = require("cypress");
     
     module.exports = defineConfig({
       e2e: {
         baseUrl: "https://your-deployed-app-url.com", // 替换成你的已部署地址
       },
     });
     

   • 这样你的测试用例里可以直接用相对路径，比如cy.visit("/")就会访问baseUrl对应的首页；如果不想统一配置，也可以在测试里直接写完整URL：cy.visit("https://your-deployed-app-url.com/login")。

3. 编写测试用例

   • 在cypress/e2e目录下创建测试文件（比如app.spec.js），编写针对已部署应用的测试逻辑：

     // cypress/e2e/app.spec.js
     describe("已部署应用测试", () => {
       it("首页能正常加载并显示标题", () => {
         cy.visit("/");
         cy.contains("应用标题").should("be.visible");
       });
     
       it("登录功能正常", () => {
         cy.visit("/login");
         cy.get("#username").type("test-user");
         cy.get("#password").type("test-pass");
         cy.get("button[type='submit']").click();
         cy.url().should("include", "/dashboard");
       });
     });
     

4. 配置一键运行命令

   • 打开package.json，在scripts里添加测试命令：

     {
       "scripts": {
         "test:deployed": "cypress run", // 无头模式运行所有测试
         "test:deployed:open": "cypress open" // 打开Cypress可视化界面运行测试
       }
     }
     

   • 现在只需在终端执行npm run test:deployed，就能一键运行所有针对已部署应用的测试；如果想可视化查看测试过程，执行npm run test:deployed:open即可。

5. 可选：多环境切换（如测试/生产环境）

   • 要是需要切换不同环境的已部署地址，不用改配置文件，直接通过环境变量传递：

     # 测试环境
     CYPRESS_BASE_URL=https://test.your-app.com npm run test:deployed
     # 生产环境
     CYPRESS_BASE_URL=https://prod.your-app.com npm run test:deployed
     

注意事项 #

• 确保你的测试用例不依赖本地构建的任何资源（比如本地mock数据），所有测试逻辑都基于已部署应用的真实环境。
• 如果已部署应用需要身份验证，可以在Cypress的support/e2e.js里添加全局登录逻辑，避免每个测试重复写登录步骤。

内容的提问来源于stack exchange，提问作者Sahana