前后端开发分离时如何进行测试（Mockjs，Postman）

前后端开发分离时如何进行测试

一、前后端开发分离的困境

• 首先不得不承认的是，前后端分离开发带来的优势是巨大的，它使得团队协作变得更有效率。双方的工程师都能专注于各自擅长的工作。
• 后端开发者集中精力在实现各种功能接口，对数据库进行 CURD 等操作实现数据的交互，他们对服务器性能及数据负责
• 而前端开发者则专注于怎么设计页面，对用户体验负责
• 然而问题在于，在还没合并之前，前端没有来自后端的数据无法显示页面，而后端没有前端设计的页面也无法得知自己的数据能否被正确展示

  于是就需要在前后端分离开发时，能够代替对方进行模拟测试的工具，通常前端使用 Mockjs，后端使用 Postman。

  双方讨论设计好 API 后（比如 RESTful API），都根据 API 文档的规范进行 API 实现以及调用。在做好 API 文档后，前端和后端就可以老死不相往来，各自调试各自的代码了

二、Mockjs

1. Mockjs 是什么

• Mock.js 是一款前端开发中拦截 Ajax 请求再生成随机数据响应的工具，可以用来模拟服务器响应。参考文档：http://mockjs.com/examples.html
• Mock 的作用是在测试过程中，创建一个 mock 对象来模拟对象的行为。Mock 能帮助前端独立于后端进行开发，进行 API 模拟并返回一些假数据
• 前端使用 mockjs 实现 mock 数据，针对要测试的 API 及其 API 文档规定的返回内容编写相应的假数据即可
  

2. 为什么用 Mockjs

  如果后端 API 接口还未开发完成，前端需要模拟后端接口返回随机数据，来完成数据交互

• 如果采用 json 数据模拟，生成数据比较繁琐，且没办法做到增删查看
• 采用 Mockjs 进行模拟数据，可以模拟各种场景生成接口，并且随机生成所需数据，还可以对数据进行增删改查
  
  

3. 安装 Mockjs

① 在项目中安装 mock

• 使用 npm 安装：npm install mockjs
• 在通过 vue-cli 创建的基本前端项目中新建 mock 文件夹，在其中创建 mock.js，内容如下

//引入mock模块
import Mock from 'mockjs';
Mock.mock('https://www.test.com',{
          ……
    })

• 在 main.js 中导入该文件

import Vue from 'vue'
import App from './App.vue'
import './mock/mock.js'

new Vue({
  render: h => h(App),
}).$mount('#app')

② 在项目中安装 axios

• 如果说 mock 用于生成随机数据，那么 axios 就是拦截 Ajax 请求
• 使用 npm 安装：npm install axios
• 在 main.js 文件引入

import axios from 'axios'

• 在 mock 文件夹的 mock.js 文件中写 mock 语法

# 定义 Post 请求
Mock.mock('/api/post/user','post',()=>{
    return {
        status: 200,
        message: '添加新闻列表数据成功'
    }
})

• 在 App.vue 文件发送请求

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  created() {
        axios.post('/api/post/user')
          .then(res => console.log(res)),
    }
}
</script>

<style lang="less" scoped>

</style>

4. 使用 Mockjs

① 数据模板格式

• mockjs 遵循以下数据格式

'name | rule' : value
属性名|生成规则:属性值

• 比如属性值是字符串 String，要生成带有一定范围内次数字符的字符串

# 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
'name|min-max': string

Mock.mock({
  "string|1-10": "★"
})

② 发请求

1）Get 请求

• 发起 Get 请求

$.ajax({
url: 'http : / /test.com',type: 'get' ,
dataType: 'json'
}).done(function(data，status， xhr) {
console.log( SOw.stringify(data，null，4) );});

• Mock js 响应

Mock.mock( ' http: //test.com', 'get ', function() {
return Mock.mock({
"user|1-3":[{
'name ': '@cname ' ,'id ': 88
}
]});});

• 获得结果

{
    'user" : [
          {
             "name" :“许超","id": 88
          }
      ]
}

2）Post 请求

• 步骤和 Get 请求类似，先发起 Post 请求，Mock js 响应，最后得到结果
  
  

③ 数据集

Mock.Random是一个工具类，用于生成各种格式随机数据.

• 它提供的部分数据种类如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image,dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region

④ 使用技巧

1）自定义响应时间

• 可以自定义响应时间为值或区间

//设置4秒后再响应
Mock.setup({ timeout: 4000 });
//设置1秒至4秒间响应
Mock.setup({ timeout : '1000-4000’});

2）校验

• Mock.valid(template，data):用来校验真实数据 data 是否与数据模板 template 匹配

var tempobj = { "user|1-3": [{ 'name ' : '@cname ' , 'id|18-28': 88 }]};
var realData = { "user": [{ 'name ' : '张三', 'id': 90 } ]};
console.log(Mock.valid(tempobj, realData) ) ;

3）JSON

• Mock.toJSONSchema(template):用来把 Mock.js 风格的数据模板 template 转换成 JsoN Schema

var tempobj = { "user|1-3": [{ 'name ' : '@cname ' , 'id|18-28': 88 } ]};
console.log(Mock.toJsoNschema(tempobj)) ;

三、Postman

1. Postman 是什么

• 程序员在开发或者调试网络程序的时候需要一些方法来跟踪网页请求的，用户可以使用一些网络的监视工具，Postman 不仅可以调试简单的 css、html、脚本等简单的网页基本信息，还可以发送几乎所有类型的 HTTP 请求
• POSTMAN 其实就是一款用于模拟 HTTP 请求，帮助后端人员进行单元的工具

2. 为什么用 Postman

• 使用简单，无需搭建环境，直接使用，可以快速构建请求。
• 可以将请求结果保存以供以后回放使用。
• Postman有响应结果的断言功能，可以用来写测试用例。
• 可以把测试用例放在同一个目录下批量运行管理，可以设置迭代次数。
• 可以设置环境变量，方便测试环境和生产环境使用同一套测试用例。
• 调试结果方便查看。

3. 安装 Postman

① Centos7

• 进入官网下载：https://www.postman.com/downloads/
• 直接安装：tar zxvf ***.tar.gz
• 建立软连接：sudo ln -s /home/XXX(下载目录)/Postman/Postman /usr/bin/postman
• 通过命令 postman 打开

② Windows

• 直接下载安装文件，运行安装程序
  
  
  

4. 使用 Postman

• 主要界面功能介绍

New: 新建，可以创建 request（请求），collection（请求集），environment（环境变量）等。
Inport：导入，可以导入 postman 请求集，curl 等一些请求文件。
Runner: 执行请求，可以选择执行请求的 collection，并且添加执行参数，例如执行时间，执行次数等等。
Workspace: 工作台，可以选择使用个人工作台或团队工作台，可以创建 team 并且邀请成员加入一起编辑使用请求集。
History: 历史请求，所有调试的历史请求数据
Collection: 请求集，可以创建保存，将某些请求放到一起形成请求集
Environment: 环境变量，管理设置的环境变量，可以设置全局环境变量，也可新建环境，添加环境变量

① 输入数据类型

• HTTP 请求的4部分包括 Url、请求的 Method，Headers，Body。

• body 也有不同的类型

1.form-data
网页表单用来传输数据的默认格式，可以模拟填写表单，并且提交表单。既可以上传键值，也可以上传文件，作为 key 的 value 提交。
2.x-www-form-urlencoded
即 application/x-www-from-urlencoded，会将表单内的数据转换为键值
3.raw
可以上传任意格式的文本，如 text、json、xml、html 等
4.binary
相当于Content-Type – application/octet-stream，只可以上传二进制数据，通常用来上传文件

② 发送请求

• 打开 Postman，将 API 地址拷贝到 URL 栏中，方法选 Get，Authorization 选择 NoAuth，不做任何鉴权。
• 点击 Send，结果以 json 的方式展现出来，Pretty 是高亮展示，若想看原始内容，则选择Raw，Preview 为接口返回的字符串模式。

• pretty：格式化 json 或 xml 形式的内容
• raw：响应体的一个大文本
• preview：在一个沙盒的 frame 中渲染响应的内容

1）GET 请求

• 点击 Params，输入参数及 value，可输入多个
  
• 响应： 有请求的响应状态码，响应时间，以及响应大小
  
• 响应体： 响应的格式可以有多种
  

2）POST 请求

• 和 GET 请求类似

POST 参数格式	Content-Type	参数示例
表单提交	application/x-www-form-urlencoded	name=MOSAD&&password=2020
JSON 提交	application/json	{“name”:“MOSAD”,“pwd”:“2020”}
xml 提交	text/xml	<?xml version="1.0" encoding="utf-8"?>现代操作系统

• form-data 提交
  

• json 提交
  

• binary 文件提交
  
  

③ 使用技巧

1）Collections

• Collections 可以将多个接口请求可以放在一起，并管理起来
• 一个工程项目一个Collection，方便查找及统一处理数据

• 创建 Collections，点击上图中的 “+New Collection”，输入 Name 和 Description，点击 Create 按钮即创建成功一个 Collections.

• 点击 save 按钮
  
• 保存好之后就可以在 Collections 看到，之后要再次调用时可以点击这里
  

2）Authentication 验证

1、Basic Auth
基础的验证，直接把用户名、密码的信息放在请求的 Header 中
2、Digest Auth
使用当前填写的值生成 authorization header
3、OAuth 1.0
postman 的 OAuth helper 让你签署支持 OAuth 1.0基于身份验证的请求。OAuth 不用获取 access token。OAuth 1.0 可以在 header 或者查询参数中设置 value
4、OAuth 2.0
postman 支持获得 OAuth 2.0 token 并添加到 request 中

3）设置环境变量

• 可以设置全局变量，添加 Globals
  
• 设置变量名和 value 值
• variable: 变量名；initial value: 分享出去给 team 中的人用时的变量值；current value： 当前自己使用该变量时变量的值
  
• 在请求中使用全局变量 格式：{{ 变量名 }}
  
  

4）生成 API 文档

• 查看自己写的接口的在线文档
  
• 生成的 API 文档
  

四、参考文章

• Mockjs 使用
• Mockjs 参考文档
• Mockjs 基础用法
• 基于 Postman 的 API 自动化测试
• Postman Docs
• API 自动化测试利器 —— Postman