时光轴工具集前端技术

前端自动化测试框架 Cypress 试用（E2E测试框架）

2021-01-15  本文已影响0人  侯工

一、简介

Cypress 是为现代网络打造的下一代前端测试工具，解决了 开发人员 和 QA 工程师 在测试现代应用程序时面临的关键难点问题。

Cypress 包含免费的、开源的、可本地安装的 Test Runner 和 能够记录你测试的控制面板服务。

二、安装

1、通过 npm 来安装 Cypress：

①、那么首先安装 node（npm是一个node包管理和分发工具）
②、打开 CMD 命令行，利用 mkdir 新建目录，利用 cd 命令切换到指定目录（也可以手动先新建好）
③、使用 npm install cypress --save-dev 安装 Cypress（如果有 WARN 可忽略，不影响）

④、使用 node_modules\.bin\cypress open 启动 Cypress，或修改 package.json

"scripts": {
    "cypress:open": "node_modules/.bin/cypress open"
}

运行命令：npm run cypress:open

2、直接下载 Cypress 压缩包

①、官网下载地址：https://download.cypress.io
②、解压到指定目录，然后进入目录，执行 Cypress.exe

③、选择你的项目路径

④、Cypress 的目录结构

三、使用

1、默认已经为我们准备了一些丰富的例子 ，可以直接点击运行。
2、我们也可以自己新建一个测试文件：
①、首先切换至目录 ~\continue-dashboard\web\cypress\integration（任意编辑器都可以，我使用的时 VScode）
②、然后新建一个测试文件 sample_spec.js，代码如下：

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

③、最后打开 Cypress 运行此文件即可，你会发现运行速度很快，这就是Cypress的优势所在。

④、更多API详解参考：https://docs.cypress.io/zh-cn/guides/guides/module-api.html#cypress-run

注意：在编写用例时，每次保存会自动触发测试，对于调试来说是比较方便的。

四、设置

1、运行情况：从左向右分别显示成功数、失败数、未运行、耗时，以及自动滚屏和重新运行按钮

2、控件定位：1.点击选择器-->2.点击定位元素-->3.复制生成代码

3、窗口设置：
①　默认情况下，除非由cy.viewport命令指定，否则视口将为1000*660px
②　我们可以通过在cypress.json中指定这些值来覆盖默认视口维度

{
   “viewportWidth”：1200，
   “viewportHeight”：800
}

4、解决chrome 下的跨域问题：

在 cypress.json 中添加：

"chromeWebSecurity": false

四、第一个真实的测试

1、一个测试用例通常包含三个方面

（1）设置应用程序状态
（2）采取行动
（3）对结果应用程序状态进行断言

2、我们来对这些步骤进行详细介绍，并将它们清晰地映射到 Cypress 命令

（1）访问一个网页
（2）查询元素
（3）与元素交互
（4）断言页面上的内容

3、实现访问百度首页并搜索 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()  //截屏
    })
})

五、元素定位方式

六、使用 request 请求进行登录

cypress 推荐在每个用例的登录步骤，不调用 UI ，直接使用 request 登录。下面是一个例子：

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

提取登录方法为公共方法

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

    cy.request({
        url:'http://***',
        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','订单列表')   // 验证是否包含标题 订单列表
    })
})

七、生成 Junit-allure 报表

在 cypress.json 中添加依赖：

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

执行 cypress run 的时候会自动生成xml文件
使用 allure 生成对应报告：

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

// 打开报告
allure open allure-report

八、生成 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"
}

总结

上一篇 下一篇

猜你喜欢

热点阅读