VSCode 小雞湯 第01期 - REST Client 簡單好用的介面測試輔助工具

RuijunLi發表於2019-02-02
VSCodeRESTclient

介紹

今天給大家介紹一個後端開發輔助的好工具 —— REST Client，外掛如其名這就是一個 REST 的客戶端外掛，把我們的 VSCode 轉化為一個 REST 介面測試的利器

REST Client

我們一般都會用 PostMan 來完成介面測試的工作，因為用起來十分簡單快捷，但是一直以來我也在尋找更好的方案，一個不用切換視窗多開一個 app 的方案 —— 終於在使用 VSCode 一段時版本間，我找到了 REST Client 外掛，初看 REST Client 外掛的時候，會覺得他十分的簡陋，但是在使用一段時間後會發現在 REST Client 外掛中已經有完成介面測試所需的所有東西

  • 優勢

    • 基於 HTTP 語言，HTTP 語言是一門非常簡單的語言，使用 HTTP 語言可以輕鬆的描述請求
    • 純文字記錄，不同於 PostMan 儲存在雲端，或是 Paw 那樣儲存二進位制檔案，並且純文字可以使用 git 追蹤內容的變化
    • 無需切換視窗，測試，除錯，程式碼編輯都在一個 VSCode 中完成

  • 劣勢

    • 操作和使用不像 PostMan 之類的圖形化工具那麼直觀
    • 不支援請求前後對資料進行操作的指令碼，不過這個已經在作者的開發計劃中

很多時候我們只是需要寫完程式碼後手邊有一個小工具可以輕鬆愉快的看一眼介面是否正常，那麼 REST Client 就是我們的首選了

使用介紹

安裝和入門

外掛的安裝非常簡單，搜尋 restclient 即可安裝

install

安裝完成後，可以在命令選單中找到 REST Client 相關的功能

選單

簡單請求

我們先從傳送最簡單的請求開始

首先需要新建一個 http 檔案，建立檔案時字尾為 http 即可，例如 test.http

之後輸入下面的內容：

GET http://localhost:8000/api/v1/public/echo?msg=1345asdf HTTP/1.1
複製程式碼

echo 是一個測試服務，他會返回你傳入的 msg 的內容，輸入完上面的

這時候請求上面會顯示一個 “Send Request” 按鈕，點選即可傳送請求，請求完成後，外掛會分割當前視窗將新的結果開啟在右側的視窗中，下圖中顯示了請求的所有相關資訊

Send Request

HTTP 語言基礎

語言入門

HTTP 是一個非常簡單的語言，入門僅需幾分鐘

HTTP 語言入門

最基本的 HTTP 語言語法入門可以參看上面的內容，配合 VSCode 的自動提示功能，用起來簡直不要太快

也不用擔心是否記得 header 裡面那些選項，想不起來的時候 Ctrl + 空格 調出自動提示即可

要注意的地方

  1. 請求文字最後面需要有一個空行，或者一個 # 開頭的行，建議空行，這樣多個請求看起來會非常好看
  2. 如果需要把 form 型別的引數拆分為多行，那麼第二個引數開始必須以 & 開始（如圖）
  3. GET 請求也可以將引數拆分多行，每行開頭必須以 ? 或者 & 開始

傳送檔案

一般來說，我們使用 multipart/form-data 請求方式來完成

multipart/form-data

如圖配置，REST Client 就會將檔案內容填充到相應的區域完成傳送

儲存請求結果

對於返回圖片的介面在 VSCode 中是可以直接預覽的，如果是 Excel 之類的二進位制檔案，那麼這裡可能會顯示亂碼（二進位制檔案）

返回圖片的介面

選中相應結果頁，右上角提供了儲存結果的按鈕

儲存結果

檢視請求歷史

使用 Ctrl + Alt + H（macOS 使用 Cmd + option + H）檢視請求歷史

請求歷史

使用變數

變數的好處，在開發過程中我們都知道，在 HTTP 語言中同樣可以使用變數來幫助我們組織請求程式碼

自定義變數

我們可以在 http 檔案中直接定義變數，使用 @ 符號開頭，以 {{variable name}} 的格式來使用

@host = http://localhost:8000
@token = adsfasdfasdfadsfasdfasdfas

### test
GET {{host}}/api/v1/public/echo HTTP/1.1
    ?msg=1345asdf
    &bundle_id=demo
    &test=1
    &token={{token}}

### test request
POST {{host}}/api/v1/public/echo HTTP/1.1
Content-Type: application/x-www-form-urlencoded
User-Agent: iPhone

test=1
&bundle_id=demo
&msg=123123
&token={{token}}
複製程式碼

這樣在測試驗證不同環境介面正確性的場合，我們可以很方便的在不同伺服器之間切換，或是所有介面都使用同一個引數的時候非常方便例如上面的 token 應該是大部分介面都會使用到的

環境變數

除了使用自定義變數以外還可以對當前的專案或是建立編輯器全域性的環境變數

"rest-client.environmentVariables": {
    "$shared": {
        "version": "v1"
    },
    "local": {
        "version": "v2",
        "host": "http://localhost:8000",
        "token": "tokentokentokentoken1"
    },
    "prod": {
        "host": "http://api.xxxxxx.com",
        "token": "tokentokentoken2"
    }
}
複製程式碼

上面 $shared 中的變數表示在所有環境設定中都可以使用的

設定後可通過 Ctrl + Alt + E（Cmd + option + E）切換環境

環境變數切換

系統變數

REST Client 提供了一些自帶的系統變數，方便我們直接使用（這裡由於我沒有使用過 Azure 所以跳過了 Azure 相關的變數，大家可以參考文件使用）

  • {{$guid}}: 生成一個 UUID

  • {{$randomInt min max}}: 生成隨機整數

  • {{$timestamp [offset option]}}: 生成時間戳，可以使用類似 {{$timestamp -3 d}} 生成3天前的時間戳，或是使用 {{$timestamp 2 h}} 這樣的形式生成2小時後的時間戳

  • {{$datetime rfc1123|iso8601 [offset option]}}: 生成日期字串

VSCode 提供的輔助功能

VSCode 對我們使用 HTTP 語言提供了包括自動提示，Outline 程式碼導航功能，方便我們編寫介面測試程式碼

自動提示

自動提示

Outline 以及程式碼導航

Outline 和程式碼導航

驗證和證照

Basic Auth

Basic Auth 可以使用已經 Base64 後的 username:password，也可以直接填入 username 和 password，也就是下面兩種形式都是可以的

使用 Base64 的結果

POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
複製程式碼

使用 username 和 password

POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Basic username password
複製程式碼

Digest Auth

Digest Auth 直接填入 username 和 password 即可

POST {{host}}/api/v1/public/echo HTTP/1.1
Authorization: Digest username password
複製程式碼

SSL 證照

ssl 證照在設定檔案中對特定域名指定證照路徑後，就可以自動生效了

"rest-client.certificates": {
    "localhost:8081": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    },
    "example.com": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    }
}
複製程式碼

每個 host 我們可以設定下面的內容：

  • cert: x509 證照路徑
  • key: 私鑰路徑
  • pfx: PKCS #12 或者 PFX 證照路徑
  • passphrase: 證照密碼（需要時設定）

程式碼生成

曾經使用 Postman 的時候，Postman 的程式碼生成功能為我提供了非常多的方便，REST Client 中提供了同樣的功能

選中一個請求後，點選右鍵選擇 Copy Request As cURL 可以把當前的請求複製成 curl 的命令，也可以使用 Ctrl + Alt + C（macOS 下Cmd + Option + C）撥出程式碼生成選單，選擇需要生成的語言

選擇程式碼生成語言

選擇語言後選擇具體程式碼呼叫的方式，比如 python 可以使用 http.client 庫或者 Requests 庫來傳送請求

Python 請求方式

命名請求

之前我們傳送的所有請求都是匿名請求，匿名請求和命名請求的區別就是在一個 http 檔案內，可以引用命名請求的請求資訊和響應資訊，在請求之間有依賴關係時這個功能非常有用，例如每次登入成功後其他請求都需要更新登入返回的 token，命名請求可以用過 JSONPath 或者 XPath 獲取響應資料

命名請求

在響應中也會顯示使用到當前命名請求的變數值的更新

請求響應

一些有用的設定

設定響應顯示內容

在 REST Client 設定中的 “Preview Option” 可以設定請求響應顯示什麼內容，總共有四種，full，body，header，exchang

設定選項

我們分別來看下四種結果顯示什麼內容

  • full：Header + Body

full

  • body：只顯示 Body

body

  • header：只顯示 Header

header

  • exchange：顯示請求 + Header + Body

exchange

其他常用的設定選項

  • rest-client.timeoutinmilliseconds: 設定請求超時，單位毫秒
  • rest-client.showResponseInDifferentTab: 每個響應請求建立一個新的 tab，為 false 時，每次請求會覆蓋上一次的請求結果，設定為 true 時每次請求都會開啟一個新的 tab，方便對比多次請求結果
  • rest-client.previewColumn: 請求結果顯示，current 表示顯示在當前的編輯器分組 beside 表示顯示在側面編輯器分組（這個側面根據編輯器的 workbench.editor.openSideBySideDirection 選項會顯示在右面或是下面
  • 代理：使用http.proxy 和 http.proxyStrictSSL

最後

其實 Postman 和 Paw 都提供更為強力的輔助工具，這裡使用 REST Client 單純覺得 Postman 和 Paw 大部分功能我其實都用不到，因為僅僅驗證介面是否正常，業務是否能跑通，所以一直在尋找一個簡單的工具，REST Client 剛好滿足了我所有的需求

這裡附上 REST Client 專案地址，裡面也有對應的文件 github.com/Huachao/vsc…

最後歡迎大家訂閱我的微信公眾號 Little Code

Little Code

  • 公眾號主要發一些開發相關的技術文章
  • 談談自己對技術的理解，經驗
  • 也許會談談人生的感悟
  • 本人不是很高產，但是力求保證質量和原創

相關文章