为您的 Amplify 应用程序设置端到端 Cypress 测试 - AWS Amplify 托管

为您的 Amplify 应用程序设置端到端 Cypress 测试

您可以在 Amplify 应用程序的测试阶段运行端到端 (E2E) 测试,以便在将代码推送到生产环境之前捕获回归情况。可以在构建规范 YAML 中配置测试阶段。目前,您只能在构建期间运行 Cypress 测试框架。

Cypress 是一个基于 JavaScript 的测试框架,您可以借此在浏览器上运行 E2E 测试。有关演示如何设置 E2E 测试的教程,请参阅题为为使用 Amplify 的全栈 CI/CD 部署运行端到端的 Cypress 测试的博客文章。

为现有 Amplify 应用程序添加 Cypress 测试

您可以在 Amplify 控制台中更新应用程序的构建设置,从而向现有应用程序添加 Cypress 测试。构建规范 YAML 包含一系列构建命令和相关设置,Amplify 会使用这些命令和设置来运行构建。使用 test 步骤在构建时运行任何测试命令。对于 E2E 测试,Amplify Hosting 提供了与 Cypress 的更深层次集成,允许您为测试生成用户界面报告。

下面的列表介绍了测试设置及其使用方式。

预测试

安装运行 Cypress 测试所需的依赖项。Amplify Hosting 使用 mochawesome 生成报告来查看您的测试结果,然后等待在构建期间设置本地服务器。

测试

运行 cypress 命令,使用 mochawesome 执行测试。

测试后

mochawesome 报告是根据输出 JSON 生成的。请注意,如果您使用的是 Yarn,则必须在静默模式下运行此命令才能生成 mochawesome 报告。对于 Yarn,您可使用以下命令。

yarn run --silent mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
构件>baseDirectory

运行测试的目录。

artifacts>configFilePath

生成的测试报告数据。

artifacts>files

可供下载的生成构件(屏幕截图和视频)。

以下示例摘自构建规范 amplify.yml 文件,其中展示了如何向您的应用程序添加 Cypress 测试。

test: phases: preTest: commands: - npm ci - npm install -g pm2 - npm install -g wait-on - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator - pm2 start npm -- start - wait-on http://localhost:3000 test: commands: - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"' postTest: commands: - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json - pm2 kill artifacts: baseDirectory: cypress configFilePath: '**/mochawesome.json' files: - '**/*.png' - '**/*.mp4'

为 Amplify 应用程序或分支关闭测试

将测试配置添加到您的 amplify.yml 构建设置后,在每个分支上为每个构建运行 test 步骤。如果您想全局禁止测试的运行,或者只对特定分支运行测试,则可以使用 USER_DISABLE_TESTS 环境变量而不修改构建设置。

全局禁用所有分支的测试,请为所有分支添加值为 true 的环境变量 USER_DISABLE_TESTS。以下屏幕截图显示了 Amplify 控制台中的环境变量部分,其中所有分支都禁用了测试。

Amplify 控制台中的环境变量部分。

要禁用特定分支的测试,请为所有分支添加值为 false 的环境变量 USER_DISABLE_TESTS,然后为要禁用的每个分支添加一个值为 true 分支覆盖。在以下屏幕截图中,分支上禁用了测试,而其他所有分支启用了测试。

Amplify 控制台中的环境变量部分。

使用此变量禁用测试将导致在构建期间完全跳过测试步骤。要重新启用测试,请将此值设置为 false 或删除环境变量。