cypress-web-test

1. Install cypress

1.1 official website： https://www.cypress.io/

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
or  
./node_modules/.bin/cypress run

2.2 cypress run [options]:

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"]  
or  
ENTRYPOINT ["npx cypress", "run"]

4.1.2 Setting Jenkinsfile

    stage('create container') {
      steps {
        container('sparrow'){
          sh "docker build -f Dockerfile -t $APPLICATION/$COMPONENT:$TEST_RUNNER ."
          sh "docker run -m 24G --cpus 4 --oom-kill-disable --add-host='www.xxx.cn:88.88.88.88' --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

在Jenkinsfile文件中设置相应的脚本

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

4.2.2 Send Email allure report

为了通过邮件进行allure报告的展示，需要在测试环境下主动生成测试报告的html文件，为此我们需要在Dockerfile文件中以及Jenkinsfile文件中设置相应的参数

# 设置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 {
            allure([
            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()
        }
    }

Menu

Cypress.io