[RFC] 关于 qiankun 使用 cypress e2e 的 RFC

[dleged]

背景

描述你希望解决的问题的现状，附上相关的 issue 地址

在 qiankun 项目中，我们需要一种可靠的方式来进行端到端（e2e）测试。Cypress 是一个流行的 JavaScript 测试框架，它提供了丰富的功能和易用性，非常适合我们的需求。

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

1. 安装和配置 Cypress：首先，我们需要在项目中安装 Cypress，并配置它与 qiankun 项目集成。

• 安装 cypress 13.x 的版本
• 配置 cypress.config.js

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  projectId: 'xxxxx',
  e2e: {
    setupNodeEvents(on, config) {
    }
  }
});

• scripts 增加 "test:e2e:open": "cypress open --e2e" 、"test:e2e": "node ./scripts/e2e" 两个命令
  2. 编写测试用例：使用 Cypress 的命令和断言，我们可以编写针对 qiankun 项目的具体测试用例。这些测试用例可以包括对页面功能、用户交互和 API 调用的测试。

1. 根目录下的 crypess 文件夹编写测试用例相关

2. 持续集成 Github Actions：

   • ci.yml 中新增 cypress 的工作流，以下 jobs 中新增

     
     e2e-test:
     runs-on: ubuntu-latest
     strategy:
     matrix:
     node-version: [16.17]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
     uses: actions/setup-node@v2
     with:
       node-version: ${{ matrix.node-version }}
     # Set up GitHub Actions caching for Wireit.
     - uses: google/wireit@setup-github-actions-caching/v1
     - name: Install dependency
     run: yarn
     
     - name: Install examples dependency
     run: yarn examples:install
     
     - name: Run cypress test
     uses: cypress-io/github-action@v6
     with:
       install: false
       start: yarn examples:start
       wait-on: 'http://localhost:7100,http://localhost:7101,http://localhost:7102,http://localhost:7103,http://localhost:7104,http://localhost:7105,http://localhost:7099'
       wait-on-timeout: 6000
       parallel: true
       record: true
       browser: chrome
     env:
       CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

  - cypress clude 中创建项目，会有一个projectId 和 录屏密钥。在 cypress.config.js 配置 projectId，ci.yl 中配置环境变量 CYPRESS_RECORD_KEY（在 github - Code security and analysis - Actions - New repository secret 路径下，新增CYPRESS_RECORD_KEY：录屏密钥）
  -  ci 触发 e2e 通过测试的结果如下
![下载](https://github.com/umijs/qiankun/assets/26102884/ec5a20b6-79a4-4f92-be94-170a53fa2492)

  -  [Cypress Cloud](https://cloud.cypress.io/) 记录的录屏结果如下
![22](https://github.com/umijs/qiankun/assets/26102884/9e31e90a-084a-410f-91bc-90c138df2181)

## 跟进

- [ ] 集成 Github Action。
- [ ] 完善端到端的测试用例。
- [ ] PR URL

[kuitos]

RFC 直接回复到 https://github.com/umijs/qiankun/issues/2681 这个下面吧，方便跟踪。 有跟其他 e2e 框架的对比调研吗？比如 playwright，cypress 有哪些优势？

[dleged]

RFC 直接回复到 #2681 这个下面吧，方便跟踪。 有跟其他 e2e 框架的对比调研吗？比如 playwright，cypress 有哪些优势？

Cypress 相比 Playwright 更适合作为当前的测试框架。在使用成本和生态系统上都有优势。

1. 文档和学习曲线：Cypress 的文档全面且易于理解，适合初学者；Playwright 的文档相对不够全面。
2. 开发效率：如果项目主要在特定浏览器上运行，那么使用 Cypress 可能更加高效，因为它专注于该浏览器，并提供了更直观的调试和测试工具。
3. 易用性：Cypress 的单浏览器限制可以使其在测试环境的设置和配置方面更简单，降低了入门门槛，使其更易于使用。
4. 自动等待和实时执行：Cypress 提供自动等待命令和实时执行功能，简化测试脚本编写和维护。
5. 快照捕获：Cypress 具有内置的快照捕获功能，可在测试执行期间捕获页面快照，提供视觉证据。
6. 社区支持和生态系统：Cypress 拥有庞大的社区支持和活跃的生态系统，提供更多资源和插件。

Cypress 是可以很好的作为我们 E2E 测试框架，如果你觉得没问题，我开始写测试用例了。