Cypress testing tools

Reference blog: https://testerhome.com/articles/19035

The most recent period studied cypress testing tool, she is an end to end web testing tools.

Preparing the Environment

1. Tools: vs code; environment: node.js.

According to online tutorial to install.

2. Install cypress

cd /your/project/path
npm install cypress --save-dev

3. Install the plug-in:

npm install eslint-plugin-cypress --save-dev
npm install --save-dev eslint-plugin-chai-friendly

## 4 Configuration:
Creating package.json in the root directory:

{
  "scripts": {
    "cypress:open": "cypress open"
 },
 "devDependencies": {
 "eslint-plugin-chai-friendly": "^0.4.1",
 "eslint-plugin-cypress": "^2.2.1"
 }
}

Creating .eslintrc.json under // my-project / cypress / directory:

{
    "plugins": [
      "cypress",
 "chai-friendly"
 ],
 "rules": {
 "no-unused-expressions": 0,
 "chai-friendly/no-unused-expressions": 2
 },
 "env": {
 "cypress/globals": true
 },

 "extends": [
 "plugin:cypress/recommended"
 ]

 }

5. Start command:

npm run cypress:open

helloworld：

New sample-spec.js the your-project / cypress / intgration directory

describe('My first test case for cypress',function(){
 it('Does not match!',function(){
 expect(true).to.equal(true)
 })
})

Click on the current use cases executed cypress window:

Note that in the preparation of use cases, each time you save will automatically trigger tests for debugging is more convenient.

The first use case

Home and access Baidu search testerhome:

describe('My first test case for cypress',function(){
 it('visit baidu home page and search for testerhome:',function(){
 cy.visit('http://www.baidu.com') //访问url
 cy.title().should('contain','百度一下，你就知道') //验证页面 title 是否正确
 cy.get('#kw') //根据 css 定位搜索输入框
 .type('testerhome') //输入关键字
 .should('have.value','testerhome') //验证关键字自动是否展示正确
 cy.get('#su').click() //根据 css 定位搜索按钮并点击
 cy.url().should('include','wd=testerhome') //验证目标url 是否正确包含关键字
 cy.title().should('contain','testerhome_百度搜索') //验证页面 title 是否正确
 cy.get('[id="1"]') 
 .should('contain','TesterHome') // 验证第一个结果中是否包含TesterHome
 cy.screenshot()
 })
})

Screenshot generated:

There is a rather special snapshot features, you can record each step of the process under execution, and then you can view pages (real pages, not pictures)

Targeting elements

get: css manner attribute or element specific targeting elements
contains: positioning elements in a particular character string

Use request request login

cypress recommended steps to log in each use case, do not call the UI, directly request login. Below is an example:

describe('My first test case for cypress',function(){
 it('login as admin without UI:',function(){
 const accountTypes = { // 设置账号类型
 admin:{
 account:'admin',
 password:'123456'
 }
 }

 cy.request({
 url:'http://yourhost/login',
 method:'POST',
 form:true,
 body:accountTypes['admin'] // 使用 admin 账号登录（跳过 UI 的登录）
 })
 cy.visit('/profile')
 cy.url().should('include','profile') //验证目标url 是否正确
 cy.get('#headerTitle')
 .should('have.text','个人信息') // 验证是否包含标题 个人信息， 
 })
})

Log extraction method as a public method

Cypress.Commands.add('login', (userType, options = {}) => {
 const accountTypes = { // 设置账号类型
 admin:{
 account:'admin',
 password:'123456'
 }
 }

 cy.request({
 url:'http://yourhost/login',
 method:'POST',
 form:true,
 body:accountTypes[userType] // 使用 admin 账号登录
 })
 })

describe('login with different account',function(){
 beforeEach(function() {
 cy.login('admin')
 cy.visit('/')
 })

 it('进入商品列表页面',function(){

 cy.contains('商品列表').click()
 cy.get('#headerTitle')
 .should('have.text','商品列表') // 验证是否包含标题 商品列表
 })

 it('进入订单列表页面',function(){
 cy.contains('订单列表').click()
 cy.get('#headerTitle')
 .should('have.text','订单列表') // 验证是否包含标题 订单列表
 })
})

All use cases command line

npm run cypress:run

Specific operating parameters can be arranged at package.json:

"scripts": {
   "cypress:run": "cypress run --browser chrome"
 }

Solve the problem of cross-domain chrome under:

In cypress.json added:

"chromeWebSecurity": false

Reports generated Junit-allure

In cypress.json add-dependent:

"reporter": "junit",
"reporterOptions": {
 "mochaFile": "results/my-test-output[hash].xml", // 通过hash 标签区分不同文件的用例结果
 "toConsole": true
}

When executed cypress run automatically generates xml file
using the allure generate the corresponding report:

// 生成allure 报告
allure generate results --clean

// 打开报告
allure open allure-report

Generate reports mocha awsome

安装对应模块：
注意： mocha 必须指定 5.2.0，否则会报错

npm install --save-dev mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator

配置cypress 对应报告信息 cypress.json：

"reporter": "mochawesome",
"reporterOptions": {
 "overwrite": false,
 "html": false,
 "json": true
},

编写执行测试和生成报告的脚本：
scripts\cypress.js

const cypress = require('cypress')
const fse = require('fs-extra')
const { merge } = require('mochawesome-merge')
const generator = require('mochawesome-report-generator')

async function runTests() {
 await fse.remove('mochawesome-report')
 const { totalFailed } = await cypress.run()
 const jsonReport = await merge()
 await generator.create(jsonReport)
 process.exit(totalFailed)
}

runTests()

在 package.json 文件添加对应启动脚本：

"scripts": {
   "cypress:open": "cypress open",
 "cy:run": "node scripts/cypress.js"
 }

启动执行：

npm run cy:run

查看报告：
mochawesome-report\mochawesome.html