如果想从头学起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:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-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.server() )并添加路由( cy.route() )时,Cypress 都会显示一个名为 ROUTES(n) 的新模块日志
  • 它将在日志中列出路由表,包括方法,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)
})

强制返回 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 路由的日志

可以看到没有请求匹配成功此路由

注意事项

了解存根与常规XHR

Cypress 会在命令日志中显示 XHR 是发送给服务器还是 stub

在命令日志中显示(XHR STUB)的XHR就是发送到 stub的,并且它们的 response,status,headers,delay 已由匹配的 cy.route() 控制

  • 单击命令日志中的命令时,在开发者工具 Console 中 Cypress 还会显示 XHR是 否存根到控制台、匹配到的 URL
  • Initiator 是启动器,里面是发送 XHR 的堆栈跟踪

无法使用  cy.request() 调试 cy.route()

  • cy.request() 会将请求直接发送到服务器,直接绕开 .route() 路由
  • cy.request() 目的是用于检查实际云心的服务器,而无须启动前端应用程序

Cypress系列(69)- route() 命令详解的更多相关文章

  1. route命令详解与使用实例 ,同时访问内外网

    route命令详解与使用实例     2011-10-18 12:19:41|  分类: 其他 |  标签:route   |字号 订阅   1.   使用背景 需要接入两个网络,一个是部署环境所在内 ...

  2. (转)linux route命令详解

    linux route命令详解 原文:https://www.cnblogs.com/lpfuture/p/5857738.html   &&   http://blog.csdn.n ...

  3. Hexo系列(三) 常用命令详解

    Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...

  4. windows下route命令详解(转载)

    1.具体功能        该命令用于在本地IP路由表中显示和修改条目.使用不带参数的ROUTE可以显示帮助.            2.语法详解        route [-f] [-p] [co ...

  5. route命令详解与使用实例

    1.   使用背景 需要接入两个网络,一个是部署环境所在内网环境,这个环境是上不了外网, 外网环境很可能是一个无线网络.如果两者都连接上,很可能导致有一方不能起作用,即外网或内网上不了,常常需要使用繁 ...

  6. route命令详解

    1.   使用背景:需要接入两个网络,一个是部署环境所在内网环境,这个环境是上不了外网, 外网环境很可能是一个无线网络.如果两者都连接上,很可能导致有一方不能起作用,即外网或内网上不了,常常需要使用繁 ...

  7. Linux route命令详解和使用示例(查看和操作IP路由表)

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...

  8. linux route命令详解

    考试题一:linux下如何添加路由(百度面试题) 以上是原题,老男孩老师翻译成如下3道题. a.如何用命令行方式给linux机器添加一个默认网关,假设网关地址为10.0.0.254? b. 192.1 ...

  9. CentOS里route命令详解

    Route 功能简述:linux系统中的route命令能够用于IP路由表的显示和操作.它的主要作用是创建一个静态路由让指定一个主机或者一个网络通过一个网络接口,如eth0.当使用"add&q ...

随机推荐

  1. Java体系结构介绍

    Java技术的核心就是Java虚拟机——所有Java程序都在其上运行,需要Java虚拟机.Java API和Java,class文件的配合,Java程序才能够运行   为什么使用Java 通过网络连接 ...

  2. 360 Atlas生产环境使用心得

    一.Atlas介绍 Atlas是360开源的一个Mysql Proxy,以下是官方介绍: Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目 ...

  3. RXJAVA之Subject

    RxJava中常见的Subject有4种,分别是 AsyncSubject. BehaviorSubject.PublishSubject. ReplaySubject. AsyncSubject 使 ...

  4. 阿里云恶意软件检测比赛-第三周-TextCNN

    LSTM初试遇到障碍,使用较熟悉的TextCNN. 1.基础知识: Embedding:将词的十进制表示做向量化 起到降维增维的作用 嵌入维度数量(New Embedding维度)的一般经验法则: e ...

  5. Android Studio 自定义字体显示英文音标

    android:fontFamily="serif" 网上查了很多自定义字体的方式,或多或少都有些麻烦,最后还是尝试着认为内置字体不应该实现不了英文音标问题,就一个一个字体试了一下 ...

  6. ThinkPHP 5 生命周期

    前段时间用TP5开发了一个小程序,就熟悉了一下TP5.TP5是TP框架最新的一个版本,与以前的3还是有很大的区别,有人说和laravel比较靠近,其实也还好,每个人都有自己不同的看法,只要是选择一个自 ...

  7. 【Python】数字与运算符

    数据类型与运算符 数字 / 浮点除 // 整数除 ** 乘方 多种混合类型运算数的运算会把整数转换为浮点数 除了 int 和 float,Python也支持其他类型的数字,例如 Decimal 或者 ...

  8. 基础篇:深入解析JAVA泛型和Type类型体系

    目录 1 JAVA的Type类型体系 2 泛型的概念 3 泛型类和泛型方法的示例 4 类型擦除 5 参数化类型ParameterizedType 6 泛型的继承 7 泛型变量TypeVariable ...

  9. 040 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 02 while循环的执行流程

    040 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 02 while循环的执行流程 本文知识点:while循环的执行流程 三种循环结构中的第一种--wh ...

  10. 024 01 Android 零基础入门 01 Java基础语法 03 Java运算符 04 关系运算符

    024 01 Android 零基础入门 01 Java基础语法 03 Java运算符 04 关系运算符 本文知识点:Java中的关系运算符 关系运算符