Cypress系列（68）- request() 命令詳解

小菠蘿測試筆記發表於2020-10-20

如果想從頭學起Cypress，可以看下面的系列文章哦

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

 

作用

發起一個 HTTP 請求

 

語法格式

cy.request(url)
cy.request(url, body)
cy.request(method, url)
cy.request(method, url, body)
cy.request(options)

 

引數說明

url

請求 URL

 

 cy.request() 在 cy.visit() 後面

// 先訪問某個 url
cy.visit('http://localhost:8080/app')

// 請求 url 是 http://localhost:8080/users/1.json
cy.request('users/1.json')

 

設定了 baseUrl，且 cy.request() 在 cy.visit() 前面

cypress.json

// cypress.json
{
 "baseUrl": "http://localhost:1234"
}

 

測試程式碼

// url 是 http://localhost:1234/seed/admin
cy.request('seed/admin')

 

備註

如果 cypress 無法確定 host，它將丟擲錯誤

 

body

  • 請求正文，不同介面內容，body 會有不同的形式
  • Cypress 設定了 Accepts 請求頭，並通過 encoding 選項序列化響應體

 

method

請求方法，沒啥好說的，預設是 GET

 

options

 

GET 請求的栗子

context('get請求', function () {
    it('預設訪問方式', function () {
        cy.request('http://www.helloqa.com')
    });

    it('使用 options', function () {
        cy.request({
            method: 'get',
            url: 'http://www.helloqa.com'
        })
    });

    // .request() 常常和別名 .as() 一起使用，用來進行介面返回值的斷言
    it('真實測試', function () {
        cy.request({
            method: 'get',
            url: 'https://www.helloqa.com'
        }).as('comments')
        cy.get('@comments')
        .then((response) => {
            expect(response.status).to.be.eq(200)
        })
    });
})

 

測試結果

 

.request() 返回值

包含以下屬性

  • status
  • body
  • headers
  • duration

 

.request() 別名後通過 .get() 的返回值

 包含以下屬性

  • status
  • body
  • headers
  • duration
  • statusText
  • allRequestResponses
  • requestHeaders
  • redirects
  • isOkStatusCode

 

使用 .request() 代替 .visit() 的栗子

官方有那麼一句話

有時候，cy.request() 測試頁面的內容要比 cy.visit() 更快，然後等待整個頁面載入所有資源

 

通過 .visit() 測試需要登入才能訪問的頁面

const username = 'jane.lane'
const password = 'password123'

it('使用 visit', function () {
    // 相當於 UI 介面操作
    cy.visit('')

　　// 登入操作
    cy.get("input[name=username]").type(username)
    cy.get("input[name=password]").type(password)
    cy.get("form").submit()

    // 會跳轉至需要登入才能訪問的頁面
    cy.get("h1").should("contain", "jane.lane") });

 

測試結果

 

通過 .request() 測試需要登入才能訪問的頁面

it('request代替visit', function () {
    // 通過介面層面去訪問頁面
    // 請求頁面
    cy.request('/login')
    .its('body')
    .should('include', '<p>In this recipe we:</p>')

    // 登入請求
    cy.request({
        method: 'post',
        url: '/login',
        // 表單格式的請求
        form: true,
        body: {
            username: 'jane.lane',
            password: 'password123'
        }
    })

    // 訪問需要登入之後才能訪問的頁面
    cy.request('/dashboard')
    .its('body')
    .should('include', 'jane.lane')
});

 

測試結果

 

官方重點

通常，一旦對登入進行了適當的e2e測試，就沒有理由繼續使用 cy.visit() 登入並等待整個頁面載入所有關聯的資源，然後再執行其他命令，這樣做可能會減慢我們整個測試套件的速度

 

輪詢發出請求的栗子

背景

  • 當輪詢伺服器以獲取可能需要一段時間才能完成的響應時，此功能很有用
  • 如何做：建立一個遞迴函式

 

測試程式碼

function req() {
    cy
    .request('/')
    .then((resp) => {
        if (resp.status === 200)
            // 請求成功則退出輪詢
            return

        // 遞迴
        req()
    })
}

context('輪詢request', function () {

    it('預設訪問方式', function () {
        cy.visit('http://localhost:7077/')
        // 輪詢前的操作
        cy.get("form").click()
        // 輪詢請求
        .then(() => {
            req()
        })
    });
})

 

關於 .request() 的注意事項

Debugging

  • 通過 .request() 發出的請求不會出現在開發者工具（F12）網路一欄中
  • Cypress 實際上並未從瀏覽器發出XHR請求
  • 實際上是從 Cypress Test Runner（在Node中）發出HTTP請求
  • 因此，不會在開發人員工具中看到該請求

 

Cookie

  • 通過 .request()  發出的請求，Cypress 會自動傳送和接收 Cookie
  • 在傳送 HTTP 請求之前，如果請求來自瀏覽器，Cypress 會自動附加本應附加的 Cookie
  • 此外，如果響應具有 Set-Cookie 標頭，則這些標頭將自動在瀏覽器 Cookie 上重新設定
  • 換句話說，cy.request() 透明地執行所有基礎功能，就好像它來自瀏覽器一樣

 

相關文章