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

本文轉載自查看原文 2020-10-21 16:12 1806 Cypress/ 測試高級進階技能系列 - Cypress

如果想從頭學起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> 標記）將不會在命令日志中被攔截或看到

語法格式

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。