Cypress系列(69)- route() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
作用
管理控制整个网络请求
重要注意事项
Cypress 目前仅支持拦截 XMLHttpRequest(XHR)
可在开发者工具(network 一栏)看到请求的 type 是 xhr,或者直接点击 xhr 进行筛选
同样是 login 请求,有些是 xhr,有些却是 document,对于 type=document 的请求, .route() 默认是不会拦截到的
非 XHR 请求
使用 Fetch API 的请求以及其他类型的网络请求(例如页面加载和 <script> 标记)将不会在命令日志中被拦截或看到
实验性功能
实验性 route2() 命令,该命令支持使用 Fetch API 的请求以及其他类型的网络请求,例如页面加载;该命令将在后面wenz展开讲解
语法格式
cy.route(url)
cy.route(url, response)
cy.route(method, url)
cy.route(method, url, response)
cy.route(callbackFn)
cy.route(options)
参数说明
url
需要监听的 URL,遵循 minimatch 模式
response
为匹配上的 URL 提供自定义响应体
method
待匹配监听 URL 的请求方法
callbackFn
回调函数
options
通俗理解的总结
- 当发出请求的 url + method 匹配上路由的 url + method,就会被该路由监听到
- 简单理解:response 是自定义响应体,status 是自定义响应状态码,headers 是自定义响应头
- 如果设置了 response、status、headers 参数,则被监听到的请求会获取到这三个参数
命令执行结果
- 执行结果是 null
- 且后续不能再链接其他命令
URL minimatch 的栗子
前言
可以通过 *、** 来匹配动态的路由,咱们直接看栗子就好了
栗子一
cy.server()
cy.route('**/users/*/comments')
// https://localhost:7777/users/123/comments <-- 匹配
// https://localhost:7777/users/123/comments/465 <-- 不匹配
栗子二
cy.server()
cy.route('**/posts/**')
// https://localhost:7777/posts/1 <-- 匹配
// https://localhost:7777/posts/foo/bar/baz <-- 匹配
// https://localhost:7777/posts/quuz?a=b&1=2 <-- 匹配
// https://localhost:7777/posts <-- 不匹配
栗子三
cy.route('**/users/*')
// 下面的都匹配
/users/1
http://localhost:2020/users/2
https://google.com/users/3
// 下面的都不匹配
/users/4/foo
http://localhost:2020/users/5/foo
实际栗子
进入演示项目目录下
注:演示项目是 cypress 提供的,如何下载可看 Cypress 系列文章的一开始几篇都有写
cd C:UsersuserDesktoppycypress-example-recipesexampleslogging-in__xhr-web-forms
启动演示项目
npm start
浏览器访问项目
http://localhost:7079/
测试代码
const username = 'jane.lane'
const password = 'password123'
before(function () {
cy.visit('http://localhost:7079/')
})
it('正常登录,修改登录请求的status、response', function () {
cy.server()
cy.route({
url: '**/login',
method: 'POST',
status: 503,
delay: 1000,
response: {
success: false,
data: 'Not success'
},
}).as("login")
cy.get("input[name=username]").type(username)
cy.get("input[name=password]").type(`${password}{enter}`)
cy.wait('@login').then((res) => {
cy.log(res)
expect(res.status).to.eq(503)
expect(res.responseBody.data).to.eq('Not success')
})
});
测试结果
查看 route 路由的日志
- 每当启动服务器( )并添加路由( cy.route() )时,Cypress 都会显示一个名为 ROUTES(n) 的新模块日志
cy.server()
- 它将在日志中列出路由表,包括方法,URL,是否Stubbed,别名和成功匹配请求的数量
可以看到成功匹配一个请求
查看 XHR 命令日志
- 当发出 XHR 请求后,Cypress 会记录此请求是否匹配到某个路由的别名
- 这里的 请求就匹配到了 @login
/login
console 查看响应结果
如果要对响应体做断言,可以从这对象里面拿到对应的值
重点一
Cypress 通过 cy.route().as() 和 cy.wait() ,可以自动等到接口返回以后再执行后续操作,增强了测试用例的健壮性
// 简单的代码结构(仅演示)
// 启动 Mock 服务器
cy.server({
// 添加 options...
})
// 添加多个 route 路由
cy.route({
// 添加 options...
}).as("route1")
cy.route({
// 添加 options...
}).as("route2")
....
// UI 界面的操作...
// 某些操作发出请求
// 等待请求的完成
cy.wait('route1').then((res)=>{
// 对接口的响应做后续操作或断言
expect(res.status).to.eq(200)
})
重点二
指定了 status 参数之后,也必须指定 response 参数
强制返回 404 的栗子
不匹配路由的请求,强制返回 404 状态和空 response
测试代码
cy.server({ force404: true })
cy.route({
url: '**/logins',
method: 'POST',
status: 503,
delay: 1000,
response: {
success: false,
data: 'Not success'
},
}).as("login")
// 伪代码
// 发出 /login 请求的操作
测试结果
当 /login 没有匹配到任意路由的时候,会返回 404
查看 route 路由的日志
可以看到没有请求匹配成功此路由
官方的栗子
it('cy.route() - route responses to matching requests', () => {
// https://on.cypress.io/route
// 访问
cy.visit('https://example.cypress.io/commands/network-requests')
// 预置变量
let message = 'whoa, this comment does not exist'
// 启动 Mock 服务器
cy.server()
// 路由1:监听 url 是 comments/* 且 请求方法是 GET 的请求
cy.route('GET', 'comments/*').as('getComment')
// 点击按钮触发请求
cy.get('.network-btn').click()
// 等待请求响应成功后获取 status 进行断言
cy.wait('@getComment').its('status').should('eq', 200)
// 路由2:监听 url 是 /commets 且 请求方法是 POST 的请求
cy.route('POST', '/comments').as('postComment')
// 点击按钮触发请求
cy.get('.network-post').click()
// 等待请求响应成功后进行断言
cy.wait('@postComment').should((xhr) => {
expect(xhr.requestBody).to.include('email')
expect(xhr.requestHeaders).to.have.property('Content-Type')
expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()')
})
/*
路由3:监听 url 是 comments/* 且 请求方法是 POST 的请求
自定义 status、response、delay 并返回给监听到的请求
*/
cy.route({
method: 'PUT',
url: 'comments/*',
status: 503,
response: {error: message},
delay: 500,
}).as('putComment')
// // 等待请求响应成功后进行断言
cy.get('.network-put').click()
cy.wait('@putComment')
// 出现 404 之后断言文案
cy.get('.network-put-comment').should('contain', message)
})
注意事项
了解存根与常规XHR
Cypress 会在命令日志中显示 XHR 是发送给服务器还是 stub
在命令日志中显示(XHR STUB)的XHR就是发送到 stub的,并且它们的 response,status,headers,delay 已由匹配的 cy.route() 控制
- 单击命令日志中的命令时,在开发者工具 Console 中 Cypress 还会显示 XHR是 否存根到控制台、匹配到的 URL
- Initiator 是启动器,里面是发送 XHR 的堆栈跟踪
无法使用 cy.request() 调试 cy.route()
- 会将请求直接发送到服务器,直接绕开 .route() 路由
cy.request()
- 目的是用于检查实际云心的服务器,而无须启动前端应用程序
cy.request()
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android进阶:Binder那么弱怎么面大厂?
- Mybatis源码学习第七天(PageHelper分析)
- 【小程序】728- 小程序如何生成海报分享朋友圈
- Mybatis源码学习第七天(插件源码分析)
- Mybatis源码学习第七天(插件开发原理)
- Mybatis源码学习第六天(核心流程分析)之Executor分析(补充)
- 无法用排他锁锁定该数据库,以执行该操作。 (Microsoft SQL Server,错误: 5030)
- Spring security OAuth2.0认证授权学习第四天(SpringBoot集成)
- php hash算法类
- Spring security OAuth2.0认证授权学习第三天(认证流程)
- uni-app搜索历史记录功能实现
- [903]linux文件删除后磁盘空间没有释放
- Spring如何实现AOP,请不要再说cglib了!
- Redis安装问题解决方案
- 高效的5个pandas函数,你都用过吗?