1. Install cypress

1.1 official website:
1.2 npm install :
cd /your/project/path

npm install cypress --save-dev  
1.3 Install other dependency packages
npm i -D cypress-selectors  
npm install -D cypress-xpath  
npm install --save-dev cypress-file-upload  
npm install --save-dev cypress-select-tests  

2. Open cypress

2.1 start cypress after installation:
cd /your/project/path

./node_modules/.bin/cypress open
./node_modules/.bin/cypress run
2.2 cypress run [options]:
Option    Description  
--browser, -b    Run Cypress in the browser with the given name. If a filesystem path is supplied, Cypress will attempt to use the browser at that path.
--ci-build-id    Specify a unique identifier for a run to enable grouping or parallelization.
--config, -c    Specify configuration
--config-file, -C    Specify configuration file
--env, -e    Specify environment variables
--group    Group recorded tests together under a single run
--headed    Displays the browser instead of running headlessly
--headless    Hide the browser instead of running headed (default during cypress run)
--help, -h    Output usage information
--key, -k    Specify your secret record key
--no-exit    Keep Cypress Test Runner open after tests in a spec file run
--parallel    Run recorded specs in parallel across multiple machines
--port,-p    Override default port
--project, -P    Path to a specific project
--quiet, -q    If passed, Cypress output will not be printed to stdout. Only output from the configured Mocha reporter will print.
--record    Whether to record the test run
--reporter, -r    Specify a Mocha reporter
--reporter-options, -o    Specify Mocha reporter options
--spec, -s    Specify the spec files to run
--tag, -t    Identify a run with a tag or tags
2.3 cypress 目录结构
- cypress // cypress目录
---- fixtures 测试数据配置文件,可以使用fixture方法读取
---- integration 测试脚本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件

3. Write cypress test cases

3.1 Add a test file
touch {your_project}/cypress/integration/sample_spec.js  

And, open this file by any editor tools. for example: Atom, Visual Studio Code, Sublime Text 3

3.2 Keywords
// describe 声明一个测试用例集
// beforeEach 测试用例前置操作,相当于setup
// it 声明了一个测试用例
3.3 Commands
// cy.get 定位元素,用css selector定位选择器
// cy.contains 通过文本内容来定位并获取元素
// type 输入文本
// should 断言,hava.value 是元素的value属性值,判断是否为‘xxxxxx’
// clear 清空文本
// should 继续断言,文本框内容为空字符串
// cy.visit 访问/posts/new页面
// cy.url() 获取浏览器地址
// cy.pause() 断言,表示case执行到此处时暂停;然后可以点击下一步或者继续执行
// cy.exec() 运行系统指令
// cy.task() 通过pluginsFile在Node里运行代码
// cy.request() 发起HTTP请求
// .blur() - 移开DOM元素上的焦点
// .focus() - 聚焦DOM元素
// .clear() - 清除输入或文本区域的值
// .check() - 选中复选框或者单选框
// .uncheck() - 取消选中复选框
// .select() - 选择一个含有 <option>属性的<select>元素
// .dblclick() - 双击DOM元素

4. Advanced Function

4.1 Continuous Integration
4.1.1 Setting Dockerfile
# use Cypress provided image with all dependencies included
FROM cypress/base:10  
RUN node --version  
RUN npm --version  
# setting the workdir
WORKDIR /home/node/app  
# copy our test application
COPY package.json package-lock.json ./  
# copy Cypress tests
COPY cypress.json cypress ./  
COPY cypress ./cypress  
# Install npm dependencies, can also use "npm ci"
RUN npm install  
# Finally, set entrypoint
ENTRYPOINT ["./node_modules/.bin/cypress", "run"]  
ENTRYPOINT ["npx cypress", "run"]  
4.1.2 Setting Jenkinsfile
    stage('create container') {
      steps {
          sh "docker build -f Dockerfile -t $APPLICATION/$COMPONENT:$TEST_RUNNER ."
          sh "docker run -m 24G --cpus 4 --oom-kill-disable --add-host='' --name $TEST_RUNNER $APPLICATION/$COMPONENT:$TEST_RUNNER --config pageLoadTimeout=120000 --record --key ${key} --env allure=true --spec ${file_path}${file_name}"

备注1: 由于在各个domain的测试过程中,都有各自独立的环境配置,所以在docker run的时候,需要添加各自的host参数--add-host
备注2: --record --key ${key}是需要在cypress官网上进行免费注册,并申请免费测试项目,平台会生成一个类似token的key用于在cypress官网上展示测试结果,此参数是非必填项,可以忽略
备注3: --env allure=ture会自动为cypress run的结果生成allure报告,如果测试人员对于报告生成的目录有要求,可以指定相应目录,如下:--env allure=true,allureResultsPath=someFolder/results

4.2 Show reports
4.2.1 Jenkins platform show Allure report

参数:--env allure=ture可以生成allure report,根据jenkins allure report插件的要求,首先需要docker中安装相应的插件

RUN npm i -D @shelex/cypress-allure-plugin  


script {  
          try {
            sh "docker cp $TEST_RUNNER:$WORK_DIR/allure-results `pwd`/"
            sh "chmod -R o+xw `pwd`/allure-results"
            script {
                includeProperties: false,
                jdk: '',
                properties: [],
                reportBuildPolicy: 'ALWAYS',
                results: [[path: "allure-results"]]
4.2.2 Send Email allure report


# 设置apt-get的源
ADD sources.list /etc/apt/sources.list  
# 更新apt-get并安装jdk
RUN apt-get update  
RUN apt-get -y install apt-transport-https ca-certificates  
RUN apt-get -y install default-jdk  
# 安装相应的软件
RUN npm install -D cypress-xpath  
RUN npm install mocha-allure-reporter  
RUN npm install -g allure-commandline --save-dev  
# Jenkinsfile中追加相应的脚本
    script {
        try {
        sh "docker cp $TEST_RUNNER:$WORK_DIR/allure-results `pwd`/"
        sh "chmod -R o+xw `pwd`/allure-results"
        script {
            includeProperties: false,
            jdk: '',
            properties: [],
            reportBuildPolicy: 'ALWAYS',
            results: [[path: "allure-results"]]
        sh "docker start $TEST_RUNNER"
        sh "docker exec -t $TEST_RUNNER allure generate $WORK_DIR/allure-results --clean -o $WORK_DIR/allure-report"
        sh "docker cp $TEST_RUNNER:$WORK_DIR/allure-report/index.html `pwd`/"
        } catch (err) {
        echo err.getMessage()