Cypress系列（69）- route() 命令详解

若是想从头学起Cypress，能够看下面的系列文章哦

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

 

前言

• Cypress 6.0.0 开始不推荐使用 cy.server() 和 cy.route() 
• 在未来的版本中，对 cy.server() 和 cy.route() 的支持将移至插件
• 如今优先考虑使用 cy.intercept() 

 

做用

管理控制整个网络请求

 

重要注意事项

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)
})

 

重点二

指定了 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() 

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