在 GitLab CI 中运行基于 Cypress 的 e2e 测试

1. 先构建 gitlab-runner 的 docker 镜像
   Cypress 的运行需要安装一些依赖，官方提供了一些 docker 镜像：https://github.com/cypress-io/cypress-docker-images/tree/master/base
   我选择的是 CentOS 7 的镜像，但构建过程中，node 装不上需要更新 Yum 源，这里贴一下 Dockerfile。注意 Cypress 的运行最低是 node@8 版本，建议 npm@5.6.0 及以上版本。

   FROM centos:7
   
   RUN curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
   RUN yum install -y \
       nodejs-8.11.3 \
       xorg-x11-server-Xvfb \
       gtk2-2.24* \
       libXtst* \
       libXScrnSaver* \
       GConf2* alsa-lib* \
       epel-release \
       git* \
       rsync \
       openssl \
       which
   
   

2. GitLab 的 CI 配置这里不再赘述，说一下 .gitlab-ci.yml 文件中的 e2e 测试部分。代码如下：

   cache:
       paths:
           - node_modules/
           - /root/.npm
           - /root/.cache/Cypress
   
   # 回归测试
   e2e:
       before_script:
           - npm install
           - npm run cypress -- install
           - npm run cypress -- verify
       tags:
           - docker
       stage: e2e
       script:
           - npm run test:e2e -- --record --key *************************
       when: manual
   

• 首先，根据官方文档，将 ~/.npm 和 ~/.cache/Cypress 两个文件进行缓存。（由于我的 docker 镜像目录是 root 所以这里替换了 ~）
• 在 package.json 文件中的 script 为：

  "test:e2e": "cypress run"
  "cypress": "cypress"
  

• npm run test:e2e 后面的参数是为了方便查看测试记录，在后文中详述

3. 如果访问的网站需要添加 hosts 时，要在 runner 的机器中，修改 /etc/gitlab-runner/cofig.toml 文件，在其中的 [runner.docker] 下增加：extra_hosts = ["hostname:ip"]
   如：extra_hosts = ["localhost:172.17.0.1"]

4. 在 CI 中运行 e2e 测试时，如果测试不通过，想要查看测试的截图和录像。首先，运行 cypress open 打开 Cypress。

将获得的 projectId 写入 cypress.json 中，key 值写入命令中。

在 CI 执行记录中找到 Cypress 测试记录的 URL：

访问 URL 即可查看相关截图和录像。