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:\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 路由的日志

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

官方的栗子

    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() 目的是用于检查实际云心的服务器，而无须启动前端应用程序