最近在使用 Cypress 作为前端项目的 E2E 测试,发布到 CI 环境时自动运行。
运行时发现在 Pipeline 测试报告中有生成 mp4 格式的视频,这才想起来 Cypress 自带生成视频快照的功能,结合 Jenkins 收集报告产物,不就可以拿到视频快照了吗?
哈哈,talk is cheap, show my code!
下面是 jenkins 配置
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
中增加以下内容
{ "reporter": "junit", "reporterOptions": { "mochaFile": "reporter/output.xml", "toConsole": true } }