如何區(qū)分前后端BUG？[軟件測(cè)試培訓(xùn)]

軟件測(cè)試工程師的職責(zé)是發(fā)現(xiàn)BUG，此外，如何體現(xiàn)個(gè)人價(jià)值?那么我們?cè)囅耄惶岢鰡栴}而不去解決，問題就永遠(yuǎn)得不到閉環(huán)。所以，一個(gè)資深的測(cè)試人員的基本功應(yīng)該是這樣的：深挖業(yè)務(wù)和功能需求，找出BUG，定位BUG，提出解決方案。這里我們就來說說，當(dāng)我們找到了BUG，應(yīng)該把BUG提交給誰去解決，這屬于BUG定位的問題。

試想:

1. 根據(jù)需求，用戶頭像應(yīng)是圓形，但結(jié)果是方形，是誰的BUG?

2. 保存用戶信息時(shí)，無法保存成功，也沒有錯(cuò)誤提示，最可能是誰的BUG?

顯然，工作過程中，我們不可能把這些BUG提交給同一個(gè)人去解決。我們應(yīng)該至少區(qū)分出是前端還是后端BUG，就好像時(shí)下流行的詞“垃圾分類”，經(jīng)過BUG分類處理，整個(gè)團(tuán)隊(duì)的效率都會(huì)有所提高。

一、什么是前端/后端?

目前多數(shù)互聯(lián)網(wǎng)項(xiàng)目都是前后端分離開發(fā)的，那么什么是前端?什么是后端?簡言之，前端側(cè)重于頁面設(shè)計(jì)，后端側(cè)重于服務(wù)開發(fā)。

比如要保存一個(gè)用戶信息，前端把界面顯示給用戶，讓用戶按需填寫，當(dāng)用戶點(diǎn)擊“保存”按鈕時(shí)，數(shù)據(jù)會(huì)通過網(wǎng)絡(luò)被提交給后端服務(wù)，由后端服務(wù)處理是否需要進(jìn)一步運(yùn)算，并且把數(shù)據(jù)保存在哪一個(gè)數(shù)據(jù)庫的哪一張表里。

二、為什么要區(qū)分前端/后端BUG?

目前多數(shù)項(xiàng)目都是多人協(xié)作開發(fā)的，如果不能明確這個(gè)BUG是誰造成的，容易提交給錯(cuò)誤的開發(fā)人員，會(huì)大大降低BUG的解決效率。

另外，如果團(tuán)隊(duì)規(guī)模較大，或者由各地的項(xiàng)目組拼湊而成，勢(shì)必會(huì)增加溝通成本，這更需要我們?cè)陬愃贫U道或者Jira等項(xiàng)目管理軟件中提交BUG時(shí)，先指明是誰的BUG，避免互相踢皮球的現(xiàn)象。

所以，為了提高團(tuán)隊(duì)效率，測(cè)試人員尤其要做好BUG分類。

三、如何定位前端/后端BUG?

對(duì)于一個(gè)優(yōu)秀的軟件測(cè)試工程師來說，區(qū)分BUG屬于前端還是后端是尤為重要的。

頁面請(qǐng)求過程

弄清楚如何定位和分類BUG之前，需要了解一下頁面請(qǐng)求的過程，以 http 請(qǐng)求為例，請(qǐng)求過程如下：

1. 用戶在前端頁面操作，如點(diǎn)擊某個(gè)功能

2. 頁面攜帶數(shù)據(jù)進(jìn)行請(qǐng)求，訪問具體功能接口

3. 由后端服務(wù)執(zhí)行該接口相應(yīng)的業(yè)務(wù)邏輯，如涉及數(shù)據(jù)，再去請(qǐng)求并組裝數(shù)據(jù)返回給前端

4. 前端頁面進(jìn)行渲染和展示對(duì)應(yīng)的頁面和數(shù)據(jù)

前后端BUG各有什么樣的特點(diǎn)?

• 前端BUG

– 界面相關(guān)

– 布局相關(guān)

– 兼容性相關(guān)

• 后端BUG

– 業(yè)務(wù)邏輯相關(guān)

– 性能相關(guān)

– 數(shù)據(jù)相關(guān)

– 安全性相關(guān)

定位BUG屬于前端還是后端，有什么方法?

這里提供了幾個(gè)方法，可以給大家一個(gè)思路，讓大家能在學(xué)習(xí)和工作中了解如何去區(qū)分BUG屬于前端還是后端。

1. 經(jīng)驗(yàn)法

軟件測(cè)試人員應(yīng)不斷精進(jìn)自己的技能，負(fù)責(zé)的項(xiàng)目多了，自然對(duì)功能的實(shí)現(xiàn)過程有了解，也就明白如何分類BUG了。

例如：

網(wǎng)頁上的某個(gè)圖片的分辨率不對(duì)，如果我們了解實(shí)現(xiàn)過程，可以想到一般情況下，是根據(jù)某個(gè)地址去服務(wù)器取圖片的，數(shù)據(jù)庫一般只保存地址，那么圖片能正確顯示，就說明后端的基本功能是滿足需求的。如果具體圖片分辨率有誤，最可能的原因是前端顯示過程出了差錯(cuò)。

2. 日志查看法

當(dāng)我們發(fā)現(xiàn)一個(gè)BUG，并不確定這個(gè)BUG屬于前端還是后端，可以查看后端服務(wù)的日志，復(fù)現(xiàn)BUG時(shí)，查看日志中有沒有相關(guān)信息?；究梢哉J(rèn)為，如果日志沒有輸出，很可能這個(gè)功能并沒有與后端交互，也就不存在后端的問題。反之，如果日志有輸出，可以進(jìn)一步查看有無錯(cuò)誤日志信息，進(jìn)一步分析。

3. 接口查看法

這種方法常用于查看是后端返回給前端的數(shù)據(jù)有誤，還是前端顯示有誤。

大多數(shù)瀏覽器都有自帶的接口查看工具，如Chrome，F(xiàn)ireFox等都可以通過F12開啟抓包，在NetWork中可以看到當(dāng)前頁面發(fā)送的每個(gè)http請(qǐng)求。

通過Chrome看到的接口情況如下

可以在Response中查看響應(yīng)數(shù)據(jù)

我們需要對(duì)比通過后端接口拿到的數(shù)據(jù)和前端顯示的數(shù)據(jù)，來確認(rèn)問題出在哪里。如果數(shù)據(jù)錯(cuò)了，頁面顯示是錯(cuò)的，也是正常的，先從后端入手去解決。如果數(shù)據(jù)對(duì)了，但是顯示錯(cuò)了，就需要問問前端的開發(fā)人員了。

四.經(jīng)驗(yàn)和總結(jié)

1.溝通很重要

我們?cè)诙ㄎ籅UG的過程中，最不能忽略的一個(gè)問題是和開發(fā)人員的溝通，有時(shí)候忙活半天，不如一問一答。經(jīng)驗(yàn)和技術(shù)的成長也都離不開合理高效的溝通。

2.經(jīng)驗(yàn)和小結(jié)

• 出現(xiàn)樣式的問題基本都是CSS的BUG

• 出現(xiàn)文本的問題基本上都是html的BUG

• 出現(xiàn)交互類的問題基本上都是Javascript的BUG

• 其他問題先溝通，再定位

本文來自：傳智播客 軟件測(cè)試學(xué)院 test.itcast.cn