使用Github Actions 自动运行cypress e2e测试

测试环境

依赖

"cypress": "^11.1.0"

文件结构

红点为要用到的文件

开始

先看一下官方的示例

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/github-action@v4

YAML语言格式

注意缩进，缩进很重要，如果缩进不正确会报错
注意属性名和属性中间需要有一个空格（代码高亮会自动提示）
YAML 文件应放在根目录下的.github/workflows文件夹中
虽说是YAML文件，但文件后缀是.yml

详解各项配置

name: 测试名称，一个yaml文件就会生成一个 workflow，持续集成一次运行的过程，就是一个 workflow
on: 何时触发，比如上述代码的on: [push]的意思就是在push的时候触发，同理还可以使用merge、pull等git常用命令。on下面还可以配置，比如配置push到哪个分支的时候触发，代码如下：

on:
  push:
    branches:    
      - master  
    # 当push到master 分支时触发

jobs ：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务
steps：每个 job 由多个 step 构成，一步步完成
runs-on: 指定虚拟机环境，踩坑：如果指定虚拟机为ubantu-latest(最新环境）, 运行有可能会报错，建议还是使用20.04版本
steps下的name：每个步骤的名称，注意：每个步骤之前必须要加- ，每个步骤必须要配置uses或run命令。
steps下的use ：相当于使用一个插件吧（个人感觉）,详见官方文档 docs.github.com/cn/actions/…，上述代码中的uses: actions/checkout@v2是安装npm环境和相关依赖，uses: cypress-io/github-action@v4就是用了cypress联合Github Actions的一个官方库（以下简称cypress-io)，用来在Github Actions中运行cypress

测试结果

push到github上
额，失败啦！

就是说，use的哪个官方库默认会去找你的根目录下的cypress/support目录下所有的e2e.js/jsx/ts/tsx文件，然而我这个项目的cypress文件放在test文件夹下，那么怎么配置呢？
编辑cypress.config.js文件，加入如下代码

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      
    },
    supportFile: "test/cypress/support/e2e.js", //新增
    specPattern: "test/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}" //新增
  },
});

新增了supportFile 配置项，该配置项用于指定cypress的支持文件，一般在cypress目录下的support文件夹
新增了specPattern 配置项，该配置项用于启用哪些测试文件，一般在cypress目录下的e2e文件夹
让我们重新push一下。。。
。。。。。。。。。。。。
又失败了捏！什么zz示例！
不过好消息是use 的库终于跑起来了，来看看报错信息吧

他可太贴心了，都把这些出错原因都列举出来了。。。服务器都没开。。就比如说在你的电脑上运行项目，你都没有npm run dev启动服务器，你怎么可能访问的到呢？
所以我们修改.yml文件，来启动服务器

name: cypress-test
run-name: cypress-test
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
    - name: Checkout 🛎
      uses: actions/checkout@v2
    - name: Custom tests 🧪
      uses: cypress-io/github-action@v4
			#以下为新增
      with:                   
        build: npm run build
        start: npm start
        browser: chrome
        wait-on: 'http://localhost:3000'

with相当于use的那个库的配置命令吧，build是将项目打包（踩坑：可以关闭eslint再打包。。。)，start是启动项目，browser是指定测试的浏览器，wait-on则是等待服务器启动再进行测试
踩坑：那么能不能直接使用run命令运行npm run dev再使用cypress-io测试库呢？可以感觉应该是可以的，但运行了30min还在运行，卡死在npm run dev那一步上。。一个月好像只免费1000分钟。。。。然后试了一下用run命令运行npm run build 再npm start，又20分钟没了。。。
同时我们也可以在cypress.config.js文件中新增一条baseUrl属性，这样就可以在cypress测试文件里
cy.visit('http://localhost:3000/contents/homePage') 将http://localhost:3000删去了
让我们接着Push...
终于成功啦！！！！

进阶

消除警告

首先我们看到还是有一些warning，第一条是说nodejs12已经弃用了，查看github actions 官方文档，可以在.yml文件中用如下语句切换node版本

 - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16.x'

自定义命令配置

有的时候项目在package.json的script文件夹下自己配置了命令，cypress-io运行的时候也可以配置并使用这些自定义命令，代码如下：

with:
	command: npm run test:e2e:CI

指定cypress配置文件

有的时候cypress有多个配置文件，比如在不同的环境下测试，这样可以指定不同的配置文件来完成需求。代码如下：

with:
	config-file: ./cypress.config.js

并行执行

当项目比较大的时候，一次行运行多个测试文件可能会非常缓慢，那么我们可以通过并行执行的方式来缩短测试的进程。
并行执行需要关联Cypress Dashboard账号。在官网注册一下就行，很简单，然后根据提示并配置，具体代码示例如下（官方文档上的示例）

jobs:
  test:
    name: Cypress run
    runs-on: ubuntu-20.04
    strategy:
      # when one test fails, DO NOT cancel the other
      # containers, because this will kill Cypress processes
      # leaving the Dashboard hanging ...
      # https://github.com/cypress-io/github-action/issues/48
      fail-fast: false
      matrix:
        # run 3 copies of the current job in parallel
        containers: [1, 2, 3]
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      # because of "record" and "parallel" parameters
      # these containers will load balance all found tests among themselves
      - name: Cypress run
        uses: cypress-io/github-action@v4
        with:
          record: true
          parallel: true
          group: 'Actions example'
        env:
          # pass the Dashboard record key as an environment variable
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          # Recommended: pass the GitHub token lets this action correctly
          # determine the unique run id necessary to re-run the checks
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

该实例新增了strategy配置，在cypress-io库的with配置项中增加了record、parallel和group配置项，并设置了环境变量（重要），没有环境变量将无法运行。
注：上述的 CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}需要在cypress cloud上获得，每个用户唯一。还需要在cypress.config.js中配置projectId(在cypress cloud上获得)

总结

.yml代码

name: cypress-test
run-name: cypress-test
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    strategy:
      fail-fast: false
      matrix:
        containers: [1, 2, 3]
    steps:
    - name: Checkout 🛎
      uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16.x'
    - name: Custom tests 🧪
      uses: cypress-io/github-action@v4
      with:
        record: true
        parallel: true
        group: 'Actions example'
        build: npm run build
        start: npm start
        browser: chrome
        wait-on: 'http://localhost:3000'
        config-file: ./cypress.config.js
        command: npm run test:e2e:CI
      env:
          CYPRESS_RECORD_KEY: '2f497a4e-bd95-4c37-8817-deac998d37cf'
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress.config.js代码

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

module.exports = defineConfig({
  projectId: "76xo3p",
  e2e: {
    setupNodeEvents(on, config) {

    },
    baseUrl: "http://localhost:3000",
    supportFile: "test/cypress/support/e2e.{js,jsx,ts,tsx}",
    specPattern: "test/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"
  },
  fixturesFolder: "test/cypress/fixtures",
  videosFolder: "test/cypress/videos",
});

运行结果

总结

该文章讲述了在Github Actions 中自动运行一些简单测试的方法，但未对低版本进行兼容，也有许多较为主观的操作和判断，欢迎交流指正。

附录

cypress官网（Github Actions部分）：docs.cypress.io/guides/cont…
cypress-io/github-action官网 ：github.com/cypress-io/…
Github-Actions官网：docs.github.com/cn/actions