README

简介

Cypress 是一个端到端（E2E）测试框架，允许您测试实时网站。

架构

使用的技术
- Javascript
- Cypress
- Bash 脚本
- Github Actions
- Platform.sh 活动脚本
用户工作流程图

项目设置

安装 Cypress
- 确保您的根目录中的 .gitignore 文件包含 node_modules
- 在您的项目根目录下运行： npm install cypress --save-dev

设置初始运行

在根目录下，在 package.json 文件中添加以下代码

"scripts": {

    "cypress:open": "cypress open"

    }

确保您的 package.json 文件格式正确，如果您有其他依赖项，它应该看起来像这样

{
    "devDependencies": {
        "cypress": "^8.2.0"
    },
        "scripts": {
        "cypress:open": "cypress open"
        }
    
}

运行 npm run cypress:open 以打开 Cypress

设置测试运行的录制
- 登录到右上角的 UBC Web Services Cypress 账户
- 在任务栏中选择“运行”，然后单击“连接到仪表板”以按照提示为项目设置录制
- 确保在 cypress.json 文件中存在项目ID，此外，将 Cypress 记录密钥（它应该类似于此：541add07-daee-47c1-851b-73d056ac9963）记录下来
将 Cypress 记录密钥作为秘密添加到项目仓库
- 导航到 https://github.com/ubc-web-services/{reponame}/settings/secrets/actions
- 选择“新建仓库秘密”
- 将名称设置为： CYPRESS_RECORD_KEY
- 将值设置为 Cypress 记录密钥
- 点击添加秘密以保存
设置 Platform.sh
- 使用以下设置将 Github 令牌添加到您项目的环境变量中
  - 名称: GITHUB_AUTH
  - 构建期间可见
  - 运行时可见
- 编辑活动脚本
  - 在您的编辑器中打开 trigger_cypress_testing.js 文件
  - 将 const ghRepo 字段更新为您的项目 Github 仓库的名称，例如： example.ubc.ca
- 将活动脚本添加到 Platform.sh
  - 转到项目的页面，选择集成然后选择 添加集成
  - 滚动到页面底部，然后在活动脚本下选择 添加
  - 将 trigger_cypress_testing.js 中的 JavaScript 代码复制并粘贴到 JavaScript 代码字段
  - 在“要报告的事件”字段中插入 environment.push,environment.redeploy
  - 在“要报告的状态”字段中插入 complete
  - 在“包含的环境”字段中插入 *
  - 点击保存
- 注意：您还可以通过命令行添加活动脚本，有关更多信息，请参阅文档 https://docs.platform.sh/integrations/activity.html
运行测试
- 本地
  - 确保您正在使用 Lando 本地运行项目，因为该脚本仅与 Lando 一起使用
  - 在您的项目目录下 CD 并在终端中运行 ./runlandotest.sh
- 远程
  - 确保在设置步骤中将文件提交到 master。因为直到将其推送到 master 分支，否则 Github Action 脚本不会运行
  - Cypress 测试将在 Platform.sh 项目构建或重新部署时运行
  - 运行可以手动触发，请参考https://github.com/ubc-web-services/{YourProjectRepo}/actions/workflows/cypress.yml

编写 Cypress 测试

在本地编写测试时，您可以将每个测试文件中的 cy.visit('/') 中的域名替换为您想要的域名，但请确保不要将其推送到远程仓库。
Cypress 会自动在您保存任何测试文件更改时重新运行测试。

示例

```
 cy.get('[id="ubc7-footer"]').should('exist');})
```
- 上述测试是一个断言，用于检查 ubc 页脚是否存在于 DOM 中。
- 我们可以使用 cy.get 函数获取 DOM 元素，并使用 should() 检查元素是否存在。

 cy.get('[id="ubc7-header"]').should('have.css', 'border-top', '3px');
 cy.get('[id="ubc7-header"]').should('have.css', 'border-top', 'rgb(0, 33, 69)'); })

第二个测试断言网站是否有带有正确边框的 ubc 标题。
您还可以在 should() 函数中测试 DOM 元素的 CSS 类及其包含的内容。

 cy.get('[data-target="#ubc7-global-menu"]').click();
 cy.get('[id="ubc7-global-header"] > .row-fluid > .offset2 > .reverse').should('exist');
 cy.get('[id="ubc7-global-header"] > .row-fluid > .offset2 > .reverse >').should('have.length', 8);
 })

第三个测试断言 UBC 搜索头中的链接数量。
您可以使用 CSS 选择器来定位查找 DOM 元素时的类。

您可以查看此存储库 tests 文件夹中的 spec.js 文件以获取更多 Cypress 测试示例。
您还可以在此处查看更多示例 https://docs.cypress.io/guides/getting-started/writing-your-first-test#Write-your-first-test

用自定义测试替换默认测试

导航到您项目的 cypress/integration 文件夹。
将文件替换为在此存储库 tests 文件夹中找到的 spec.js 文件。
您还可以编写自己的测试并将其添加到文件夹中，文件必须以 spec.js 结尾，否则 Cypress 不会执行测试。

常见问题解答 & 故障排除

如何为不同的 Cypress 账户运行测试？
- 使用不同的 Cypress 账户遵循设置过程的第 3 步和第 4 步。
如何将测试迁移到不同的 Cypress 账户？
- 您可以将 cypress/integration 文件夹中的文件替换为您自己的 spec.js 文件。
当测试失败时，我的 Platform.sh 项目会停止构建吗？
- 不会，Cypress 测试独立于 Platform.sh 运行，这意味着无论测试失败多少，网站都会构建。

资源

Platform.sh 活动脚本文档
- https://docs.platform.sh/integrations/activity.html
Cypress 测试文档
- https://docs.cypress.io/api/table-of-contents

ubc-web-services / cypress-drupal-10-e2e

维护者

详情

README

目录

简介

架构

项目设置

编写 Cypress 测试

用自定义测试替换默认测试

常见问题解答 & 故障排除

资源