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() 目的是用於檢查實際雲心的服務器，而無須啓動前端應用程序