使用cypress在 Git流水线上实现e2e自动化测试

What is E2E?

所谓的E2E就是end-to-end。  
假设我们编写的每个功能程序都是一个黑匣子，最终用户也只会看到这个黑匣子，那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的，我只管知道最终效果是不是我们想要的。  
那么映射到前端这边的话就是：我不管你逻辑使用什么框架什么逻辑写的，我只想知道浏览器上我要的交互效果，ui展示效果是不是正确的，功能使用上是不是正确的，那么这就叫E2E测试。

What is CYPRESS slogan?

The web has evolved.Finally, testing has too.

Fast, easy and reliable testing for anything that runs in a browser.

熟悉后端的同学可以把cypress理解为一个测试框架，类似junit。熟悉爬虫的同学可以理解为是Selenium，其实Selenium也能做web自动化测试。

我们的最终目标就是在git项目中，加入cypress的支持，实现快速自动化测试。

• Git流水线部署cypress

要实现以上目标主要有两个点，第一要找到一个合适的cypress的运行环境（docker镜像）。第二点，我们不仅要测试，用户关心的是测试的结果，有多少通过了，更重要的是哪些失败了，怎么失败了。

1、Cypress镜像选择

在https://github.com/cypress-io/cypress-docker-images中，提供了多种选择。

从上到下分别是：只装了依赖的镜像（cypress/base）；装了依赖和浏览器的镜像（cypress/browsers）；装了依赖、浏览器和cypress的镜像（cypress/included）。

我们选择第三种，最完整的环境，镜像比较大（超1G），但是可以规避很多环境问题。

2、怎么在git流水线里查看测试结果

在桌面环境，cypress提供了在浏览器中的可视化界面。但是在流水线和镜像的环境下，这条路肯定不行。 

好在cypress中，可以配置测试报告。在cypress.json中主要有三种格式的报告，spec 格式报告（主要应用在控制台，打印出结果）、json 格式报告（生成json格式文件的报告）、junit 格式报告（生成xml格式文件的报告）。

流水线的控制台的内容不方便取（有大佬知道怎么拿的，也可以），我们的思路是用json文件或者xml文件，只要有文件，就可以在流水线里通过artifacts获得，再对应解析文件，即可。

• 最终效果

.gitlab-ci.yml

e2eTest1:

  stage: e2eTest1

  image:

    name: dockeropen.paas.x/cypress/included:4.10.0

    # cypress/included images have entrypoint set to "cypress"

    # which conflicts with GitLab CI wrapper shell script

    entrypoint: [""]

  only:

     - /^q1.*$/

  script:

    - pwd

# 在项目里安装http-server，可以在启动静态HTML工程，方便cypress测试

    - npm i -g http-server  --registry $PROXY_REGISTRY

    - http-server . -a 0.0.0.0 -p 3002 &

# 启动cypress chrome浏览器，选择启动的校验文件

    - cypress run --project ./  --browser chrome --spec "cypress/integration/q1*"

  allow_failure: true

  artifacts:

    when: always

    expire_in: 2h

    paths:

        - ./*

cypress.json

{

  "fixturesFolder": false,

  "supportFile": false,

  "pluginsFile": false,

  "video": false,

  "reporter": "junit",

  "reporterOptions": {

    "reporterEnabled": "cypress-sonarqube-reporter, mochawesome",

    "mochawesomeReporterOptions": {},

    "cypressSonarqubeReporterReporterOptions": {},

    "mochaFile": "results/test_report_[hash].xml",

    "toConsole": true

  }

}