痛點(diǎn)
前端測(cè)試
在進(jìn)行前端頁(yè)面開(kāi)發(fā)或者測(cè)試的時(shí)候，我們會(huì)遇到這一類場(chǎng)景：
- 在開(kāi)發(fā)階段，前端想通過(guò)調(diào)用真實(shí)的接口返回響應(yīng)
- 在開(kāi)發(fā)或者生產(chǎn)階段需要驗(yàn)證前端頁(yè)面的一些 異常場(chǎng)景 或者 臨界值 時(shí)
- 在測(cè)試階段，想直接通過(guò)修改接口響應(yīng)來(lái)驗(yàn)證前端頁(yè)面是否正常
- 想驗(yàn)證后端服務(wù)響應(yīng)比較慢的情況下，驗(yàn)證前端頁(yè)面是否正常（模擬接口超時(shí)或者模擬接口響應(yīng)的時(shí)間的場(chǎng)景）
- 想更新請(qǐng)求頭，請(qǐng)求體或者請(qǐng)求參數(shù)達(dá)到測(cè)試的目的
后端測(cè)試
在后端開(kāi)發(fā)或者測(cè)試的過(guò)程中，我們可能會(huì)遇到這些場(chǎng)景：
- 依賴方接口不穩(wěn)定或者造數(shù)困難
曾使用的應(yīng)對(duì)措施
根據(jù)以上的痛點(diǎn)，我也做過(guò)一些探索。
Charles
在驗(yàn)證前端頁(yè)面的時(shí)候，我曾使用抓包軟件Charles在捕捉流量的時(shí)候，設(shè)置斷點(diǎn)（類似debug功能），并手動(dòng)去調(diào)整接口的請(qǐng)求體或者響應(yīng)體。
工作原理：
Charles 斷點(diǎn)的實(shí)現(xiàn)原理是在客戶端和服務(wù)器之間插入一個(gè)代理服務(wù)器，攔截并監(jiān)視網(wǎng)絡(luò)流量。當(dāng)我們?cè)O(shè)置斷點(diǎn)時(shí)，Charles 會(huì)在代理服務(wù)器上暫停請(qǐng)求或響應(yīng)，直到我們決定繼續(xù)或取消請(qǐng)求或響應(yīng)。
- 具體來(lái)說(shuō)，Charles 會(huì)在代理服務(wù)器上攔截請(qǐng)求或響應(yīng)，并根據(jù)用戶設(shè)置的規(guī)則進(jìn)行處理。當(dāng) Charles 檢測(cè)到一個(gè)請(qǐng)求或響應(yīng)匹配了一個(gè)斷點(diǎn)規(guī)則時(shí)，它會(huì)暫停請(qǐng)求或響應(yīng)，并在 Charles 的 UI 中彈出一個(gè)對(duì)話框，讓用戶選擇是否繼續(xù)執(zhí)行請(qǐng)求或響應(yīng)。
- 在實(shí)現(xiàn)過(guò)程中，Charles 使用了代理服務(wù)器、Socket 和線程等技術(shù)。當(dāng)我們啟動(dòng) Charles 時(shí)，它會(huì)在本地計(jì)算機(jī)上開(kāi)啟一個(gè)代理服務(wù)器，并將其配置為系統(tǒng)默認(rèn)的代理服務(wù)器。然后，當(dāng)我們發(fā)送一個(gè)請(qǐng)求時(shí)，Charles 會(huì)將該請(qǐng)求發(fā)送到代理服務(wù)器上，并在代理服務(wù)器上等待響應(yīng)。當(dāng)代理服務(wù)器收到響應(yīng)后，Charles 會(huì)在 UI 中顯示響應(yīng)，并等待用戶決定是否繼續(xù)執(zhí)行請(qǐng)求或響應(yīng)。
- 需要注意的是，由于 Charles 會(huì)攔截網(wǎng)絡(luò)流量并在代理服務(wù)器上處理請(qǐng)求和響應(yīng)，因此它可能會(huì)對(duì)網(wǎng)絡(luò)速度和性能造成一定的影響。此外，在設(shè)置斷點(diǎn)時(shí)，我們應(yīng)該仔細(xì)考慮斷點(diǎn)規(guī)則的范圍和條件，避免無(wú)意中影響其他請(qǐng)求和響應(yīng)。
Chrome 插件
通過(guò)使用Chrome插件（一般使用Chrome瀏覽器：如g0ngjie/ajax-proxy）,設(shè)定一些規(guī)則來(lái)攔截接口，更改接口的響應(yīng)?；蛘邔?duì)請(qǐng)求進(jìn)行重定向。但此方法僅局限在Chrome瀏覽器中使用。
工作原理：
這個(gè)工具是一個(gè)基于 Node.js 和 Express 框架的 AJAX 代理服務(wù)器，可以將 AJAX 請(qǐng)求發(fā)送到其他域名下的 API 接口，并將響應(yīng)返回給客戶端。其實(shí)現(xiàn)原理如下：
- 客戶端向 AJAX 代理服務(wù)器發(fā)送 AJAX 請(qǐng)求，請(qǐng)求包含目標(biāo) API 的 URL 以及其他參數(shù)。
- 代理服務(wù)器接收到請(qǐng)求后，解析出目標(biāo) API 的 URL 和參數(shù)，并將其轉(zhuǎn)發(fā)到目標(biāo) API 的服務(wù)器。
- 目標(biāo) API 服務(wù)器接收到請(qǐng)求后，處理請(qǐng)求并返回響應(yīng)。
- 代理服務(wù)器接收到響應(yīng)后，將響應(yīng)轉(zhuǎn)發(fā)給客戶端。
在這個(gè)過(guò)程中，代理服務(wù)器可以對(duì)請(qǐng)求和響應(yīng)進(jìn)行一些處理，例如修改請(qǐng)求頭、添加身份認(rèn)證信息、對(duì)響應(yīng)結(jié)果進(jìn)行過(guò)濾等。這些處理可以在服務(wù)器端通過(guò)編寫中間件來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)mock工具
實(shí)現(xiàn)一款mock工具，設(shè)計(jì)方案大致如下：
- 對(duì)于后端而言
- 代碼層面的域名改為mock服務(wù)器，不能指定請(qǐng)求，會(huì)將所有的請(qǐng)求都轉(zhuǎn)發(fā)到mock server(若沒(méi)有匹配的規(guī)則，mock server無(wú)法進(jìn)行處理)。
- 代碼層面的域名不變，在服務(wù)器中配置代理，將請(qǐng)求轉(zhuǎn)發(fā)至mock server，在mock server設(shè)置攔截規(guī)則，未匹配規(guī)則的請(qǐng)求返回自定義的靜態(tài)響應(yīng)或者動(dòng)態(tài)響應(yīng)。未命中規(guī)則的請(qǐng)求，將轉(zhuǎn)發(fā)至真實(shí)的服務(wù)器。
- 對(duì)于前端而言
- 在網(wǎng)關(guān)層面，將指定的請(qǐng)求轉(zhuǎn)發(fā)至mock server，但這個(gè)無(wú)法通過(guò)mock server平臺(tái)控制。
- 本地代理：本地啟動(dòng)代理，將請(qǐng)求轉(zhuǎn)發(fā)到mock server，在mock server設(shè)置攔截規(guī)則，未匹配規(guī)則的請(qǐng)求返回自定義的靜態(tài)響應(yīng)或者動(dòng)態(tài)響應(yīng)。未命中規(guī)則的請(qǐng)求，將轉(zhuǎn)發(fā)至真實(shí)的服務(wù)器。
Requestly
其實(shí)Requestly的工作原理和ajax-proxy 瀏覽器插件的原理差不多。
Requestly 是一個(gè)請(qǐng)求修改工具，可以幫助用戶在瀏覽器中修改網(wǎng)絡(luò)請(qǐng)求，從而達(dá)到一些調(diào)試、測(cè)試、模擬等目的。其工作原理如下：
- 用戶在 Requestly 中創(chuàng)建規(guī)則，規(guī)則包含了要修改的請(qǐng)求 URL、請(qǐng)求頭、請(qǐng)求參數(shù)等信息，以及要執(zhí)行的操作，如重定向、修改響應(yīng)等。
- 當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，Requestly 會(huì)攔截瀏覽器發(fā)出的請(qǐng)求，并根據(jù)規(guī)則對(duì)請(qǐng)求進(jìn)行修改。修改后的請(qǐng)求會(huì)被發(fā)送到服務(wù)器。
- 服務(wù)器處理修改后的請(qǐng)求，并將響應(yīng)返回給瀏覽器。
- Requestly 接收到響應(yīng)后，根據(jù)規(guī)則對(duì)響應(yīng)進(jìn)行修改，然后將修改后的響應(yīng)返回給瀏覽器。
在這個(gè)過(guò)程中，Requestly 可以對(duì)請(qǐng)求和響應(yīng)進(jìn)行多種類型的修改，包括重定向、添加請(qǐng)求頭、修改請(qǐng)求參數(shù)、模擬網(wǎng)絡(luò)請(qǐng)求等。這些修改可以幫助用戶快速定位和解決問(wèn)題，加速開(kāi)發(fā)和測(cè)試過(guò)程。
除了使用瀏覽器插件的方式抓緊請(qǐng)求外，還可以通過(guò)啟動(dòng)本地代理的方式來(lái)攔截任何請(qǐng)求。
這款工具大大提升了我的工作效率，在前端頁(yè)面的開(kāi)發(fā)以及測(cè)試來(lái)說(shuō)，就是一款網(wǎng)絡(luò)調(diào)試神器！
Requestly的功能
requestly主要有以下的功能：
- 網(wǎng)絡(luò)請(qǐng)求與響應(yīng)的攔截
- 網(wǎng)絡(luò)請(qǐng)求與響應(yīng)的修改
- api Mock and file mock
- Android Debugger
流量捕捉方式
1.瀏覽器插件
2.本地代理：通過(guò)啟動(dòng)本地代理來(lái)捕獲各個(gè)端的流量（與Charles類似）
- 捕捉瀏覽器的網(wǎng)絡(luò)請(qǐng)求
- 捕捉app的網(wǎng)絡(luò)請(qǐng)求
- 捕捉模擬器的網(wǎng)路請(qǐng)求
- 捕捉終端的網(wǎng)絡(luò)請(qǐng)求
- 捕捉其他地方的網(wǎng)絡(luò)請(qǐng)求
請(qǐng)求的修改
Cancel Request
可以選擇要取消的特定網(wǎng)絡(luò)請(qǐng)求，以便在進(jìn)行調(diào)試和測(cè)試時(shí)排除干擾。
Redirect Request
將特定的網(wǎng)絡(luò)請(qǐng)求重定向到其他url。
- 重定向到mock。可以在mock server進(jìn)行配置。
- 重定向到其他url。如下規(guī)則：訪問(wèn)www.baidu.com時(shí)，會(huì)被重定向到www.qq.com
Delay network requests
模擬接口延時(shí)。通過(guò)使用URL匹配或者h(yuǎn)ost匹配或者path匹配來(lái)設(shè)置規(guī)則（支持正則匹配），命中規(guī)則的接口將會(huì)被requestly捕捉，并在延遲的時(shí)間后返回響應(yīng)
Modify Request Url(Replace string)
- 更新請(qǐng)求路徑： 比如說(shuō)，我們將v1接口升級(jí)到v2，想在上線前對(duì)v2接口做下驗(yàn)證。我們可以選擇使用流量回放功能進(jìn)行驗(yàn)證，也可以使用該功能進(jìn)行驗(yàn)證。將v1請(qǐng)求的接口更新為v2接口，并做相關(guān)的驗(yàn)證。
Query Params
修改或者刪除請(qǐng)求的查詢參數(shù)
Modify Headers
- 支持添加自定義的請(qǐng)求頭
- 修改或者刪除原有的請(qǐng)求頭
- 支持添加自定義的響應(yīng)頭
- 支持修改或者刪除原有的響應(yīng)頭
Modify User Agent
- 更改請(qǐng)求頭的用戶代理
用戶代理在網(wǎng)絡(luò)通信中起著非常重要的作用，它能夠告訴服務(wù)器請(qǐng)求的來(lái)源和請(qǐng)求的方式。這些信息可以幫助服務(wù)器更好地處理請(qǐng)求，提供更好的服務(wù)和用戶體驗(yàn)。
我們使用chrome瀏覽器驗(yàn)證功能的時(shí)候，可以匹配的域名的用戶代理改成對(duì)應(yīng)的代理。
Modify Api Request
- static data（靜態(tài)數(shù)據(jù)）
提供json格式的數(shù)據(jù)，并直接替換請(qǐng)求的請(qǐng)求體
- Dynamic (JavaScript)
通過(guò)JS修改請(qǐng)求中的請(qǐng)求體，并替換原有的請(qǐng)求體。使用頻率最高的功能是：通過(guò)對(duì)bodyJson進(jìn)行調(diào)整，并重新返回bodyAsJson，達(dá)到修改請(qǐng)求體的目的。
function modifyRequestBody(args) {
const { method, url, body, bodyAsJson } = args;
// Change request body below depending upon request attributes received in args
//可以對(duì)bodyJson進(jìn)行調(diào)整，并重新返回bodyAsJson
return body;
}
響應(yīng)的修改
Modify Headers
- 支持添加自定義的請(qǐng)求頭
- 修改或者刪除原有的請(qǐng)求頭
- 支持添加自定義的響應(yīng)頭
- 支持修改或者刪除原有的響應(yīng)頭
Modify Api Response
支持api類型：REST API與GraphQL API
- static data（靜態(tài)數(shù)據(jù)）
提供json格式的數(shù)據(jù)，并直接將該數(shù)據(jù)返回給前端
- Dynamic (JavaScript)
修改真實(shí)服務(wù)器返回的響應(yīng)并返回給前端
function modifyResponse(args) {
const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
// Change response below depending upon request attributes received in args
const mock_res = JSON.parse(response)
console.log('mock_res itemList:',mock_res.data.itemList)
itemList = mock_res.data.itemList
if (itemList!==undefined && itemList.length !== 0){
for(var i=0; i<itemList.length;i++){
itemList[i].productName = itemList[i].itemId
itemList[i].status = 1
itemList[i].statusName = Math.random() < 0.5 ? "DELETE" : "BANNED";
itemList[i].timeFormatted = new Date().toLocaleString().replaceAll('/','-');
itemList[i].time = Date.now().toString();
}
}
// mock_res.data.itemList = itemList
return mock_res;
}
請(qǐng)求響應(yīng)錄制
Requestly Sessions 是一種可用于捕獲和共享網(wǎng)絡(luò)請(qǐng)求的功能。這個(gè)功能可以記錄和存儲(chǔ)瀏覽器請(qǐng)求以及對(duì)應(yīng)的響應(yīng)，并在需要時(shí)重新發(fā)送這些請(qǐng)求。這意味著我們可以跨不同瀏覽器會(huì)話和不同設(shè)備之間以及與其他用戶共享這些請(qǐng)求。這個(gè)功能特別適用于需要經(jīng)常復(fù)制和粘貼相同請(qǐng)求的開(kāi)發(fā)人員、測(cè)試人員和網(wǎng)絡(luò)爬蟲(chóng)等。
- 比如說(shuō)，我們?cè)陂_(kāi)發(fā)聯(lián)調(diào)或者測(cè)試的過(guò)程中，發(fā)現(xiàn)某些問(wèn)題，可以通過(guò)錄制請(qǐng)求并共享給其他開(kāi)發(fā)人員，方便他們排查問(wèn)題。
我對(duì)Requestly的應(yīng)用
1.驗(yàn)證前端在各種狀態(tài)的展示：通過(guò)修改接口的返回響應(yīng)來(lái)模擬各個(gè)場(chǎng)景。（當(dāng)時(shí)，你也可以通過(guò)在db層面造數(shù)來(lái)實(shí)現(xiàn)接口響應(yīng)的正確放回：如直接改db或者寫造數(shù)腳本，這個(gè)不在我們今天討論的范圍內(nèi)。）
我們可以使用Dynamic (JavaScript)來(lái)調(diào)整響應(yīng)?？梢葬槍?duì)不同的場(chǎng)景自定義不同的json字符串，也可以在原有的響應(yīng)的基礎(chǔ)來(lái)進(jìn)行調(diào)整。
- 如果該場(chǎng)景的驗(yàn)證只涉及單個(gè)接口，我們可以套用一下代碼模板：我們定義一個(gè)status變量，在驗(yàn)證某個(gè)場(chǎng)景的時(shí)候，就將status設(shè)置為某個(gè)場(chǎng)景的值，然后在if..else中設(shè)置對(duì)應(yīng)的響應(yīng)。
function modifyResponse(args) {
const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
// Change response below depending upon request attributes received in args
var status=0
if(status === 0 ){
console.log("json更新為status=0場(chǎng)景")
}else if(status ===1 ){
console.log("json更新為status=1場(chǎng)景")
}
return response;
}
- 如果該場(chǎng)景的驗(yàn)證涉及多個(gè)接口，我們可以結(jié)合Modify Header Request 與 Dynamic (JavaScript)進(jìn)行調(diào)整。思路如下：為相關(guān)接口的請(qǐng)求頭新增一個(gè)自定義的請(qǐng)求頭參數(shù)，如statusHeader。然后在處理接口響應(yīng)的時(shí)候，先讀取statusHeader的值，再根據(jù)statusHeader的值返回相關(guān)的響應(yīng)
2.模擬接口延遲，驗(yàn)證前端頁(yè)面的處理
3.捕捉各個(gè)端的網(wǎng)絡(luò)請(qǐng)求
- 捕捉瀏覽器的網(wǎng)絡(luò)請(qǐng)求
- 捕捉模擬器的網(wǎng)路請(qǐng)求
- 捕捉終端的網(wǎng)絡(luò)請(qǐng)求
總結(jié)
總結(jié)一下Requestlty常用的功能：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-435844.html
- 修改網(wǎng)絡(luò)請(qǐng)求：Requestly 可以幫助您修改 HTTP 請(qǐng)求和響應(yīng)。例如，您可以使用 Requestly 修改請(qǐng)求參數(shù)、請(qǐng)求頭、請(qǐng)求體或響應(yīng)頭、響應(yīng)體，以便更好地測(cè)試和調(diào)試應(yīng)用程序。
- 模擬網(wǎng)絡(luò)請(qǐng)求：Requestly 可以幫助您模擬網(wǎng)絡(luò)請(qǐng)求。例如，您可以使用 Requestly 模擬 AJAX 請(qǐng)求、模擬響應(yīng)超時(shí)或模擬 HTTP 狀態(tài)碼，以便測(cè)試應(yīng)用程序的穩(wěn)定性和性能。
- 代理服務(wù)器：Requestly 可以幫助您配置代理服務(wù)器，以便更好地控制網(wǎng)絡(luò)請(qǐng)求。例如，您可以使用 Requestly 配置代理服務(wù)器以攔截和修改網(wǎng)絡(luò)請(qǐng)求，以便更好地測(cè)試和調(diào)試應(yīng)用程序。
總之，Requestly 是一款非常強(qiáng)大和有用的調(diào)試和測(cè)試工具，可以幫助開(kāi)發(fā)人員和測(cè)試人員更好地測(cè)試和調(diào)試應(yīng)用程序。它具有豐富的功能和靈活的配置選項(xiàng)，可以滿足不同的測(cè)試需求。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-435844.html
到了這里，關(guān)于如何利用Requestly提升前端開(kāi)發(fā)與測(cè)試的效率，讓你事半功倍?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
