木头的博客

我是木头 有些想法 有点精力

0%

在 Jenkins 中产出由 Cypress 生成的测试视频

最近在使用 Cypress 作为前端项目的 E2E 测试,发布到 CI 环境时自动运行。

运行时发现在 Pipeline 测试报告中有生成 mp4 格式的视频,这才想起来 Cypress 自带生成视频快照的功能,结合 Jenkins 收集报告产物,不就可以拿到视频快照了吗?

哈哈,talk is cheap, show my code!

下面是 jenkins 配置

Jenkinsfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
pipeline {
agent any

environment {
CHROME_BIN = '/bin/google-chrome'
}

stages {
stage('Environment') {
steps {
sh 'uname -a'
sh 'apt-get update'
sh 'apt-get install -y xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 ttf-wqy-zenhei'
sh 'fc-cache -v'
sh 'yarn install'
}
}
stage('Test') {
steps {
sh 'yarn test:e2e --headless'
junit 'reporter/output.xml'
archiveArtifacts 'tests/e2e/videos/*.mp4'
}
}
}
}

其中 ttf-wqy-zenhei 是用来解决 Ubuntu 系统中没有中文字体等问题,否则生成的视频报告中的中文都为方框乱码。

如果是在 CentOS 中,执行 yum -y groupinstall chinese-support 解决中文问题

如果不知道 Jenkins 所属运行环境,使用 uname -a 查看系统信息

archiveArtifacts 用来收集报告产物

junit 用来收集测试报告,但 Cypress 默认是不生成报告的,需要在 cypress.json 中增加以下内容

cypress.json
1
2
3
4
5
6
7
{
"reporter": "junit",
"reporterOptions": {
"mochaFile": "reporter/output.xml",
"toConsole": true
}
}

效果图

output

参考资料