cypress 前端自动化测试实践三（Jenkins持续集成）

一、使用浏览器隐藏模式启动cypress命令

在项目中的packasge.json中配置启动命令启动

"scripts": {
    "cypress": "cypress run --headless",
}

使用命令npm run cypress 运行测试

输出如图所示报告

二、安装 start-server-and-test

使用命令 npm install --save-dev start-server-and-test

安装完成后添加如下语句

"test": "start-server-and-test serve http://localhost:8080 cypress"

这个命令的意思是等待 http://localhost:8080启动了才会运行cypress

然后使用命令

npm run test

成功启动项目并运行cypress

三、持续集成

如图所示，创建一个pipline工程

配置如下

点击add添加你的github账号和密码凭据

这里的Jenkinsfile文件需创建在项目根目录下

代码如下

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                println "Build"
            }
        }
        stage('Test') {
            steps {
                println "Test"
            }
        }
        stage('Deploy') {
            steps {
                println "Deploy"
            }
        }
    }
}

上传Jenkinsfile文件后点击bulid，拉取github代码成功

下面来编写我们的Jenkinsfile文件，在test下加入命令

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                bat 'npm install'
            }
        }
        stage('Test') {
            steps {
                bat 'npm run test'
            }
        }
        stage('Deploy') {
            steps {
                println "Deploy"
            }
        }
    }
}

由于我是在本地windows上搭建的Jenkins 所以这里是bat

如果是Linux环境应将bat改为sh

     }
        stage('Test') {
            steps {
                sh 'npm run test'
            }
        }

提交代码后再次build

如图所示bulid成功

集成allure测试报告

首先下载插件到Jenkins上

在这里搜索然后点install without restart，安装成功后去全局配置里配置

配置如下点击保存名字随便取

保存成功后来到我们的项目配置页面，点击下图所示区域

出现这个图这里可以帮我们生成Jenkinsfile里的语句，点击按钮

输入cypress在项目中生成报告的路劲如我这里写的是cypress/reports

另附生成报告的cypress.json配置

{ "baseUrl": "http://localhost:8080",
  "integrationFolder": "cypress/integration",
  "testFiles": "**/*.spec.js",
  "video": false,
  "viewportHeight": 800,
  "viewportWidth": 1024,
  "chromeWebSecurity": false,
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "cypress/reports/my-test-output[hash].xml",
    "toConsole": true
  },
  "env": {
    "userLogin": {
      "username": "zzz",
      "password": "zzz"
    }
  }
}

点击按钮生成语句

然后把语句粘贴到Jenkinsfile文件里，提交到远程

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                bat 'npm install'
            }
        }
        stage('Test') {
            steps {
                bat 'npm run test'
            script{
             allure([
             includeProperties: false, jdk: '', results: [[path: 'cypress/reports']]
             ])
             }
            }
        }
        stage('Deploy') {
            steps {
                println "Deploy"
            }
        }
    }
}

看不明白的参考这个文档 https://docs.qameta.io/allure/#_jenkins

最后在Jenkins点击build，报告就自动生成了

点进去是这样的项目源码地址

https://github.com/testzhpzz/onevue