如果想从头学起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

作用

使用该命令在网络层管理 HTTP 请求的行为

包含以下功能

  • 对任何类型的 HTTP 请求进行 stub 或 spy
  • 在 HTTP 请求发送到目标服务器前,可以修改 HTTP 请求 body、headers、URL(类似抓包工具对请求进行打断点然后修改)
  • 动态或静态地对 HTTP 请求的响应进行 stub
  • 接收 HTTP 响应后可对 HTTP 响应 body、headers、status、code 进行修改(类似抓包工具对响应进行打断点然后修改)
  • 在所有阶段都可以完全访问所有 HTTP 请求

相较于 cy.route() 的不同

cy.route() 命令详解:https://www.cnblogs.com/poloyy/p/13852941.html

  • 可以拦截所有类型的网络请求,包括 Fetch API,页面加载,XMLHttpRequest,资源加载等
  • 不需要在使用前调用 cy.server() ,实际上 cy.server() 根本不影响 cy.intercept()
  • 默认情况下没有将请求方法设置为 GET

语法格式

cy.intercept(url, routeHandler?)
cy.intercept(method, url, routeHandler?)
cy.intercept(routeMatcher, routeHandler?)

url

要匹配的请求 URL ,可以是字符串也可以是正则表达式

cy.intercept('http://example.com/widgets')
cy.intercept('http://example.com/widgets', { fixture: 'widgets.json' })

没有指定请求方法的话,可以匹配任意类型的请求方法

method

请求方法

cy.intercept('POST', 'http://example.com/widgets', {
statusCode: 200,
body: 'it worked!'
})

routeMatcher

  • 它是一个对象
  • 用于匹配此路由将处理哪些传入的 HTTP 请求
  • 所有对象属性都是可选的,不是必填的
  • 设置的所有属性必须与路由匹配才能处理请求
  • 如果将字符串传递给任何属性,则将使用 minimatch 将与请求进行全局匹配

它有以下属性

{
/**
* 与 HTTP Basic身份验证中使用的用户名和密码匹配
*/
auth?: { username: string | RegExp, password: string | RegExp } /**
* 与请求上的 HTTP Headers 匹配
*/
headers?: {
[name: string]: string | RegExp
} /**
* 与请求上的 hostname 匹配
*/
hostname?: string | RegExp /**
* If 'true', 只有 https 的请求会被匹配
* If 'false', 只有 http 的请求会被匹配
*/
https?: boolean /**
* 与请求上的 method 请求方法匹配
* 默认 '*', 匹配全部类型的 method
*/
method?: string | RegExp /**
* 主机名后的路径, 包括了 ? 后面的查询参数
* www.baidu.com/s?wd=2
*/
path?: string | RegExp /**
* 和 path 一样, 不过不管 ? 后面的查询参数
* www.baidu.com/s
*/
pathname?: string | RegExp /**
* 与指定的端口匹配, 或者传递多个端口组成的数组, 其中一个匹配上就行了
*/
port?: number | number[] /**
* 与请求路径 ? 后面跟的查询参数匹配上
* wd=2
*/
query?: {
[key: string]: string | RegExp
} /**
* 完整的请求 url
* http://www.baidu.com/s?wd=2
*/
url?: string | RegExp
}

  

routeHandler

  • routeHandler 定义了如果请求和 routeMatcher 匹配将对请求进行的指定的处理
  • 可接受的数据类型:string、object、Function、StaticResponse

StaticResponse

  • 相当于一个自定义响应体对象
  • 可以自定义 Response headers、HTTP 状态码、Response body 等
  • 详细栗子将在后面展开讲解

StaticResponse 对象的属性

{
/**
* 将 fixture 文件作为响应主体, 以 cypress/fixtures 为根目录
*/
fixture?: string
/**
* 将字符串或 JSON 对象作为响应主体
*/
body?: string | object | object[]
/**
* 响应 headers
* @default {}
*/
headers?: { [key: string]: string }
/**
* 响应状态码
* @default 200
*/
statusCode?: number
/**
* 如果 true, Cypress 将破坏网络连接, 并且不发送任何响应
* 主要用于模拟无法访问的服务器
* 请勿与其他选项结合使用
*/
forceNetworkError?: boolean
/**
* 发送响应前要延迟的毫秒数
*/
delayMs?: number
/**
* 以多少 kbps 发送响应体
*/
throttleKbps?: number
}

string

  • 如果传递一个字符串,这个值相当于响应 body 的值
  • 等价于 StaticResponse 对象 { body: "foo" }

object

  • 如果传递了没有 StaticResponse 密钥的对象,则它将作为 JSON 响应 Body 发送
  • 例如, {foo:'bar'} 等价于 StaticResponse 对象 {body:{foo:'bar'}}

function

  • 如果传递了一个回调函数,当一个请求匹配上了该路由将会自动调用这个函数
  • 函数第一个参数是请求对象
  • 在回调函数内部,可以修改外发请求、发送响应、访问实际响应
  • 详细栗子将在后面展开讲解

命令返回结果

  • 返回 null
  • 可以链接 as() 进行别名,但不可链接其他命令
  • 可以使用 cy.wait() 等待 cy.intercept() 路由匹配上请求,这将会产生一个对象,包含匹配上的请求/响应相关信息

实际栗子的前置准备

Cypress 官方项目的下载地址:https://github.com/cypress-io/cypress-example-kitchensink

下载好后进入下图项目文件夹

启动项目

npm start

通过 URL 路由匹配请求的栗子

测试代码

等价于 route() 的测试代码

注:  route()  未来将会被弃用

运行结果

登录请求匹配上了路由

Console 查看 cy.wait() 返回的对象

最重要的当然是 request 和 response 两个属性

通过 RouteMatcher 路由匹配请求的栗子

测试代码

断言请求体和响应状态码

运行结果

Console 查看 cy.wait() 返回的对象

另一种断言方式

// 断言匹配此路由的请求接收到包含【username】的请求 body
cy.wait('@login3').its('request.body').should('have.property', 'username') // 断言匹配此路由的请求接收到 HTTP 状态码为 500
cy.wait('@login3').its('response.statusCode').should('eq', 200) // 断言匹配此路由的请求接收到包含【redirect】的请求 body
cy.wait('@login3').its('response.body').should('have.property', 'redirect')

不过这样的话只能每次写一条不能同时三条都写,所以还是建议像代码图一样,先 .then() 再进行断言

自定义不同类型的响应体的各种栗子

自定义一个纯字符串的响应体

测试代码

运行结果

接口响应

自定义一个 JSON 的响应体

测试代码

会从cypress安装目录/fixtures 下读取对应的数据文件,它会变成响应 body 的数据

test.json 数据文件

运行结果

接口响应

自定义一个 StaticResponse 的响应体

测试代码

自定义了响应body、statusCode,还有返回响应的延时时间

运行结果

延时生效了

body 和 statusCode 变成自定义的数据了

拦截请求的栗子

前置操作

beforeEach(() => {
cy.visit('http://localhost:7079/login')
})

断言请求的栗子

测试代码

运行结果

Console 查看打印结果

可以看到回调函数只有一个参数,就是 request 参数

重点

回调函数内不能包含 cy.**() 的命令,如果包含会报错

简单来说就是

cy.type() 命令执行完后会返回一个 promise 对象,同时又会调用回调函数,而回调函数内又调用了 cy.get() 返回了一个 promise 对象,Cypress 会将这种情况当做测试失败处理

将请求传递给下一个路由处理程序

前言

意思就是一个请求可以同时匹配上多个路由

测试代码

运行结果

一个登录请求匹配成功了两个路由,且回调函数会按匹配的顺序执行

总结

回调函数的参数就是一个请求对象,它其实可以调用以下方法

{
/**
* 销毁该请求并返回网络错误的响应
*/
destroy(): void /**
* 控制请求的响应
* 如果传入的是一个函数, 则它是回调函数, 当响应时会调用
* 如果传入的是一个 StaticResponse 对象, 将不会发出请求, 而是直接将这个对象当做响应返回
*/
reply(interceptor?: StaticResponse | HttpResponseInterceptor): void /**
* 使用 response body(必填) 和 response header(可选) 响应请求
*/
reply(body: string | object, headers?: { [key: string]: string }): void /**
* 使用 HTTP 状态码(必填)、 response body(可选)、response header(可选) 响应请求
*/
reply(status: number, body?: string | object, headers?: { [key: string]: string }): void /**
* 重定向到新的 location 来响应请求,
* @param statusCode 用来重定向的 HTTP 状态代码, Default: 302
*/
redirect(location: string, statusCode?: number): void
}

拦截响应的栗子

req.reply() 函数详解

前言

可以使用 req.reply() 函数来动态控制对请求的响应

使用讲解

cy.intercept('/login', (req) => {
// functions on 'req' can be used to dynamically respond to a request here // 将请求发送到目标服务器
req.reply() // 将这个 JSON 对象响应请求
req.reply({plan: 'starter'}) // 将请求发送到目标服务器, 并且拦截服务器返回的实际响应, 然后进行后续操作(类似抓包工具对响应打断点)
req.reply((res) => {
// res 就是实际的响应对象
})
})

.reply() 直接修改响应的栗子

测试代码

接口响应内容

拦截响应的小栗子

测试代码

运行结果

Console 查看打印结果

一个是 request 对象,一个是 response 对象

自定义响应内容

前言

  • 可以使用 resp.send() 函数动态控制传入的响应
  • 另外,当响应发送到浏览器时,对 resp 的任何修改都将保留
  • 如果尚未调用 resp.send() ,则它会在 req.reply() 回调函数完成后隐式调用

使用讲解

cy.intercept('/notification', (req) => {
req.reply((resp) => {
// Success 将作为 response body 返回到浏览器
resp.send('Success') // 将 success.json 里面的数据作为 response body 返回到浏览器
resp.send({fixture: 'success.json'}) // 将响应延迟 1000ms
resp.delay(1000) // 将响应限制为 64kbps
resp.throttle(64)
})
})

传递字符串作为响应内容

测试代码

接口响应内容

传递 JSON 对象作为响应内容

测试代码

接口响应内容

传递 StaticResponse 对象作为响应内容

测试代码

接口响应内容

resp 可调用的函数总结

{
/**
* 可以自定义 response statusCode、response body、response header
* 也可以直接传 StaticResponse 对象
*/
send(status: number, body?: string | number | object, headers?: { [key: string]: string }): void
send(body: string | object, headers?: { [key: string]: string }): void
send(staticResponse: StaticResponse): void
/**
* 继续返回响应
*/
send(): void
/**
* 等待 delayMs 毫秒,然后再将响应发送给客户端
*/
delay: (delayMs: number) => IncomingHttpResponse
/**
* 以多少 kbps 的速度发送响应
*/
throttle: (throttleKbps: number) => IncomingHttpResponse
}

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

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

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

  2. Android Studio系列教程五--Gradle命令详解与导入第三方包

    Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...

  3. Python操作redis系列以 哈希(Hash)命令详解(四)

    # -*- coding: utf-8 -*- import redis #这个redis不能用,请根据自己的需要修改 r =redis.Redis(host=") 1. Hset 命令用于 ...

  4. Linux Shell系列教程之(八)Shell printf命令详解

    本文是Linux Shell系列教程的第(八)篇,更多shell教程请看:Linux Shell系列教程 在上一篇:Linux Shell系列教程之(七)Shell输出这篇文章中,已经对Shell p ...

  5. pssh系列命令详解

    安装 pssh提供OpenSSH和相关工具的并行版本.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括psshlib,可以在自定义应用程序中使用.pssh是python写的可 ...

  6. Linux上的free命令详解、swap机制

    Linux上的free命令详解   解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free ...

  7. Linux netstat命令详解

    Linux netstat命令详解 一  简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多 ...

  8. linux sort,uniq,cut,wc命令详解

    linux sort,uniq,cut,wc命令详解 sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些 ...

  9. Linux下的压缩zip,解压缩unzip命令详解及实例

    实例:压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip ====================== ...

随机推荐

  1. 测试php

    /** * 测试guzzle * * @return void */ public function index() { $client = new GuzzleHttp\Client(); //12 ...

  2. GROUP BY 分组后得到最新即时间最大的一条数据(需添加limit才可生效)

    当使用GROUP BY 分组,默认返回的数据是组中最小的记录即id最小的数据, 当开发中经常会需要分组后将最新的数据放在前面, 为了实现需求,使用了嵌套查询,分别使用order by来排序 SELEC ...

  3. MySql索引使用策略

    MySql索引 索引优点 1.可以通过建立唯一索引或者主键索引,保证数据的唯一性.2.提高检索的数据性能3.在表连接的连接条件 可以加速表与表直接的相连 4.建立索引,在查询中使用索引 可以提高性能 ...

  4. Python爬取B站耗子尾汁、不讲武德出处的视频弹幕

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 前言 耗子喂汁是什么意思什么梗呢?可能很多人不知道,这个梗是出自马保国,经常上网的人可能听说过这个 ...

  5. ngx accept_mutex

    尝试获取锁,如果获取了锁,那么还要将当前监听端口全部注册到当前worker进程的epoll当中去  获取失败就需要确保此时ls-fd 没有被 epoll 监听 ngx_int_t ngx_tryloc ...

  6. 多项目部署在同一个GitHub Pages

    由于GitHub 的约定,一个账户只能拥有一个GitHub Pages,那么,如果你有多个想部署的静态网站(博客和文档等),它们是互相隔离的,如何用同一个GitHub账户进行部署呢? 从之前如何搭建G ...

  7. 基于 Nebula Operator 的 K8s 自动化部署运维

    摘要:Nebula Operator 是 Nebula Graph 在 Kubernetes 系统上的自动化部署运维插件.在本文,你将了解到 Nebula Operator 的特性及它的工作原理. 从 ...

  8. python + appium 执行报错整理

    1.driver.find_element_by_id("com.taobao.taobao:id/searchEdit").send_keys("adidas" ...

  9. python 《numpy》

    import numpy as np 创建一个矩阵 array = np.array([[1, 2, 3], [3, 2, 1]]) print(array) # [[1 2 3] # [3 2 1] ...

  10. linux中使用head,tail,grep, sed,awk三种方法显示文档中间若干行(指定任意行)

    需要显示文本中间20-25行. 创建一个30行的文档,命名为30.txt并显示在屏幕 [root@v2-ui data]# seq 30 > 30.txt && cat 30.t ...