<th id="uz6zr"><table id="uz6zr"><sub id="uz6zr"></sub></table></th> <tbody id="uz6zr"></tbody>
  • <menuitem id="uz6zr"><dfn id="uz6zr"></dfn></menuitem><menuitem id="uz6zr"><strong id="uz6zr"></strong></menuitem>
      1. 如何判斷一個bug歸屬于前臺還是后臺?

        發表于:2020-10-21 10:40  作者:阿竺   來源:CSDN

        字體: | 上一篇 | 下一篇 |我要投稿 | 推薦標簽: Bug bug 缺陷管理

          最近在測試的產品是一個類似于途牛的旅游網站,公司只有本人一個菜鳥測試,之前從未接觸過測試相關。最近在提bug的時候,發現自己越來越容易糾結于一個bug到底是該分給前端還是后臺。之前測試其他產品的時候,由于業務邏輯相對簡單,bug也不多,也就很少留意到這個問題,但是現在手頭的項目讓我對于bug定位的問題再也無法忽略。遂查了一些資料,再加上自己的理解,輸出了這篇文章,謹以記錄以及相互的交流學習,如有不當之處,歡迎指出。
          首先,搞不清一個bug到底歸屬前端還是后臺的根本原因就是對于這二者的概念模糊。綜合網上的資料來看,個人歸納為:
          前端是用戶看得見摸得著的東西,主要體現在頁面的視覺效果以及交互設計上。比如說一個網站的頁面風格、頁面跳轉等,最簡單的例子就是一個注冊界面:前端設計界面風格,約束輸入的字符類型、長度以及合法性校驗等,不涉及到與數據庫之間的信息交流。
          后臺,則側重于更深層面的東西,關于邏輯,關于數據,關于平臺的穩定性與性能。后臺主要負責實現具體的功能,舉個例子,還是那個注冊界面,前端寫好了界面,規定了你能輸入哪些數據,不能輸入哪些數據,而后臺則會把你輸入的信息與數據庫進行比對,如果是新用戶,則順勢在數據庫中插入一條信息。
          當然,關于數據的校驗,不同項目情況不同,有些是由前端進行校驗,有些是后臺,有些是前后臺都需要校驗。
          知道了前后臺的區別,就大致能夠進行bug的判斷了。
          case1:文本框輸入不合法的內容,點擊提交按鈕, 如果不合法的內容提交成功, 那應該是前后臺沒有做校驗, 前后臺都有這個bug
          case2:文本框輸入合法的內容,點擊提交按鈕, 查看數據庫中的數據和輸入的內容不一致, 這個時候需要看前臺傳的數據是否正確,使用fiddler抓包, 查看請求頭里面的數據是否和輸入一致,如果一致就是后臺的問題, 如果不一致,就是前臺的bug
          case3:界面展示不友好, 重復提交 這些都是前臺的bug
          下面引用一篇文章的內容:
          首先必備工具Firefox debug工具(fiddler也是一個相當好用的工具)
          可以考慮檢查標簽的排查工具 idea.exe
          如何區分頁面的bug問題歸屬:前端or后端
          前端bug主要分為3個類別:HTML,CSS,Javascript三類問題
          給個最大的區別方式方法:
          出現樣式的問題基本都是CSS的bug
          出現文本的問題基本都是html的bug
          出現交互類的問題基本都是Javascript的bug
          現在以淘寶的前端人員工作為例進行相關bug定位的剖析
          判斷前后臺問題的區分方法:
          FF, 打開錯誤控制臺
          區分前后臺交互:查看網絡請求
          a) Html中如果有鏈接,有相應的情況下,基本可以定位到是屬于前端的問題
          b) 如果為空,或者有出現error錯誤信息,我們就可以定位到屬于后臺開發的問題
          TMS對應的VM模板,出現的一些截斷控制,轉換功能都屬于前端的問題
          一、HTML
          最常見的HTML的問題—就是標簽的問題了,最常見的排查和解決辦法就是查看頁面源代碼,然后通過檢查標簽的工具,現在暫時提供idea.exe進行檢查,有其他更好的工具再進行推薦。
          常見問題類別:
          標簽閉合—表象,頁面中出現大范圍的混亂,就是少了標簽的情況,導致標簽未閉合
          標簽浮出—例如鼠標移動到文本位置,浮出全名的這種浮出形式都屬于標簽浮出的問題
          標簽在不同的瀏覽器的一種解析方式的不同導致的前端bug例如如下結構
          該部分可以看做為一個大的框即是標簽<a> 內嵌標題的標簽<p>,里面再有這些個內容<ing>,那么在不同的瀏覽器中,可能ie和FF的解析會產生不同,假設IE解析為<a><p><img></img></a></p>的一種形式,但在FF下可能解析為
          <a><img></img></a>
          <p></p>
          的兩行的形式從而導致前端在復古鞋/板鞋這塊ing里面的格式產生混亂
          結構可看為:
          頁面定點的問題:最明顯的前端功能,在于點擊某個鏈接將頁面位置定位到對應的位置
          a) 我們可以通過右鍵,查看元素的工具進行定位到毛點所定位到的位置,如果出現問題這種問題很直觀,并且能通過這種方法直接定位到問題
          頁面的跳轉,也屬于html的問題,大家在出現點擊未跳轉或者跳轉方式不正確的問題,直接可以定位到跳轉屬性的問題,找到對應的跳轉對應的塊提供給開發人員即可
          二、CSS,產生樣式問題。例如:排版,布局,顏色,背景等
          css的bug主要分為:兼容型bug 、業務性bug 和 內容型bug
          兼容型bug
          a) 表現:僅在少數幾個瀏覽器上出現
          b) 原因:瀏覽器的解析不一致
          c) 解決:根據實際情況進行前端代碼的通用性
          d) 類別:
          腳本兼容型問題:在出現對應交互的問題就基本可以定位到腳本兼容型bug,例如DIV的顯示和層結構。實際可以參考聚劃算的幾個商品鼠標移動到小圖的時候,對應大圖展示的功能。
          頁面樣式兼容型問題:直接表象在樣式上,都是基于框架的頁面展示錯誤,很容易定位
          業務性bug
          a) 表現:在所有瀏覽器下都有該問題
          b) 原因:對業務不熟悉
          c) 解決:根據需求進行修改達到業務要求
          該類型的定位,主要在和實現的要求不一致,最直接表現在頁面的友好型,用戶的可用性的bug,可以定位為該類型
          內容型bug
          a) 表現: 前端自測正確,但在填入內容后,出現的錯誤,內容消失等
          b) 原因: 擴展性未考慮周全
          c) 解決: 進行overflow test
          輸入內容的長度限制等功能可定位為內容型bug
          三、Javascript
          最直接的判斷方法,刷新頁面,出現滯后顯示的一些模塊基本都為腳本的輸出塊。該部分的一些問題可以參照兼容型bug中類別的腳本兼容型bug。
          有產生交互類的問題,大多數都可以定位到是屬于javascript產生的問題,該部分大多不會報錯
          有錯誤提示類的。頁面左下方有出現javascript的錯誤提示;有彈出錯誤信息提示的bug;瀏覽器返回的一些錯誤彈出框都屬于javascript的bug。
          肉眼在網頁上見到的問題實際并不一定就是前端造成的,也有可能是后端人員未傳值或者傳值不恰當導致。具體應該怎么判斷呢?目前我使用的方式是看network傳值的情況。例子如下:
          1.這里我在電腦端測試是有正確的提示信息的,并且在相應條件下可以出現該提示。但是,使用手機進行測試時,卻發現在同樣情況下手機端給出的提示是“提交失敗!”,顯然,這種情況就屬于前端的疏漏了。
          2.再有一種情況,就是后端未傳值導致了前端無法顯示相應數據。具體例子就不說了,查看方法和上面同樣的,這種情況就是屬于后端的bug了。
          以上,如有錯誤,歡迎指出。

          本文內容不用于商業目的,如涉及知識產權問題,請權利人聯系51Testing小編(021-64471599-8017),我們將立即處理

        評 論

        論壇新帖

        頂部 底部


        建議使用IE 6.0以上瀏覽器,800×600以上分辨率,法律顧問:上海瀛東律師事務所 張楠律師
        版權所有 上海博為峰軟件技術股份有限公司 Copyright©51testing.com 2003-2020, 滬ICP備05003035號
        投訴及意見反饋:webmaster@51testing.com; 業務聯系:service@51testing.com 021-64471599-8017

        滬公網安備 31010102002173號

        51Testing官方微信

        51Testing官方微博

        掃一掃 測試知識全知道

        在线看黄AV免费悠久