測試人員如何玩轉前端

      隨着工做年限的增長，發現之前根本不關注的事情反而變成了瓶頸，好比說前端相關的知識。在寫接口自動化，頁面自動化或是服務自動化的時候，根本不會涉及太多前端的東西，後來在開發測試平臺的時候，一個簡單的前端交互就會折騰上半天。這使我不得不靜下心來，好好補充一下前端知識了。那麼測試人員如何玩轉前端呢？

一，  測試人員與前端淵源

       其實在咱們工做過程當中，一直在於前端相關的內容在打交道，只是咱們沒有深刻了解涉及到的相關知識。主要表如今如下幾個方面：

• 功能測試以前端驗證。

　　　在進行功能測試的時候，咱們從用戶角度出發，結合需求文檔，驗證開發作的功能是否符合要求，樣式與交互是否友好。

•  腳本，接口自動化，頁面自動化，ATF自動化之終端輸出。

　　　若是遇到繁複的工做，經過會藉助於腳本語言來完成，此時的終端輸出的內容，也算是前端交互的部分。

• 接口，頁面，ATF自動化之測試報告 。

　　  在開發接口自動化，Web自動化或是服務自動化測試用例的時候，不論咱們是使用的是java,或是python最終都會輸出一下詳細的執行報告。此時會藉助於TestNG，HtmlTestRunner輸出一個頁面的報告，就會涉及Html，CSS，JS相關的內容。

• 測試工具的操做界面-----簡單的軟件界面 。

        在開發工具的時代，不論你的工具是要完成什麼功能，必須有相應的用戶交互，不然就不能稱之爲工具。此時的如登陸界面，菜單，按鈕，輸入框等元素就須要進行詳情的設計與精準的佈局，沒有相關的適應是很是痛苦的事情。

• 測試平臺以前端展現-----複雜的用戶交互界面。

        在開發測試平臺的時候，咱們是把一個完整的系統給整合起來，彼此相互通訊和交互。同時咱們的用戶羣體也變得更加龐大，因此考慮的事情必須全面，用戶體驗也比較好，兼容性，健壯性等等也要跟得上，此時單獨的考慮問題是不行的，必須先後端結合。

二，  測試開發前端技術探討

從咱們工做中的瞭解，對前端的知識也有相關的認識也是一個遞進的過程。下面咱們就探討一下：

（1）基本的前端知識

      一說到前端知識，咱們首先想到的是頁面組成的相關內容，如HTML，CSS，JS，XML等等吧！經過相關的設置，達到咱們想要的效果。此時感受設計出一個咱們想要的頁面或是交互，仍是比較麻煩的，畢竟咱們測試人員不是專業的前端同窗，沒有專業的素養。我是深有體會的，想作出滿意的效果，差很少要花費上一兩天的時間。

（2）開源的框架的應用

     隨着對前端知識的深刻學習，認識到了前端也有不少開源的框架可讓咱們節省不少精力，從面輕鬆實現佈局與交互。如：

• Bootstrap或是相應的二次開發框架，Bootstrap Cosmo，jQuery UI Bootstrap，bootstrap-datetimepicker，android-bootstrap等等！ 推薦 10 款基於 Bootstrap 框架的擴展:

http://www.oschina.net/news/41627/10-bootstrap-extensions

 

• jQuery及JS相關的開源框架：angular.js，backbone，ember.js，KISSY等等！ 八款你不得不知的開源前端JS框架:http://www.cnblogs.com/liangxiaofeng/p/5936284.html

 

• 前端開發模式，在node.js，vue.js等出現以後，又出現了很多針對前端的開發模式，前端也有MVC開發模式。不過在這方面我還了解的不太多，感興趣的同窗能夠自行去查閱相關的資料。

三，  前端設計建議

     咱們在開發一個測試平臺的時候，須要用到不少前端相關的資源，此時須要對前端資源作一個總體的設計：

• 設計主題顏色方案：

     一個測試平臺需求有一個主題顏色，此顏色包含圖標，菜單等主要元素的顏色搭配。如：

（1）業內一般的四色原則

（2）科技類網站：藍色系居多——權威、理性、嚴肅

（3）購物類網站：紅橙色系居多——喜慶、熱情、衝動

（4）社區類網站：綠色系、藍紫系偏重——輕鬆、安靜、朝氣蓬勃

      網站主題色設計常規步驟以下：

首先，擬定網站理想的色彩形象。先調研，瞭解用戶的價值觀、色彩流行動態及使用狀況，競爭對手的顏色運用等，這是第一步做業；

其次，色彩設計。選好主題色、基礎色、輔助色、重點色的組合，考慮好色彩的耀目性與美感；

再次，選好的色彩精緻規範化，正規的企業會以國際通用色規範標準對上述因素加以鎖定，以便統一管理，防止誤差

      同時須要注意：

A,背景和字體搭配合理，色值不能太近。如藍白，而灰白就不太好。

B,菜單選中效果與原色值不能相差太大，只須要加劇原來的顏色便可。

 

• 設計相關元素的顏色方案：

        相關元素如菜單，表格，彈窗，標題，按鈕等等，須要與主題色保持一個色系。不能相差太大，或是根本不是一個色系，測試平臺不是娛樂網站，不能太花哨。

• 注意CSS資源引用順序以及合理設計

       前端資源引用是有順序：內聯樣式表優於外聯樣式表，外聯樣式表越靠後優先級越高。 合理地利用此規則，就能輕鬆地實現本身相關的前端效果：

           先引用開源的框架，再設計出本身的風格，利用上面的規則進行覆蓋。儘可能利用開源的框架，插件完成前端相關設計。

• 合理利用前端技術，如$(function(){}),定時器，異步加載等技巧設計交互。如頁面加載的時候就須要渲染的效果，定時更新內容的效果等等。
• 注意前端資源的一些特性，如前端JS交互是單線程的，因此若是的實時顯示的時候，注意阻塞。

四，  前端資源引用思考

     既然咱們在開發本身的測試平臺時須要引用開源的前端資源，而這類資源在網上仍是比較多的，因此咱們就能夠根據本身的須要，引用第三方的前端資源文件。可是須要注意如下幾點：

（1）  根據功能對前端資源進行分別加載

      如在模塊A中，咱們須要使用表格的相關功能，就能夠在模塊A的相關頁面中引入bootstrap-table相關的資源文件。而模塊B不須要這類資源，其相關的頁面就不須要引用這類資源；同時兩個模板都須要使用bootstrap相關的資源，就能夠在兩個模塊以前進行加載。如此有針對性的載，但是防止一次加載過多，或是作無用的加載。

（2）  使用壓縮後的前端資源,如開源框架的*.min.js,*.min.css等，本身的前端資源文件過大時，利用第三方壓縮工具進行壓縮。

     前端資源存在着開發版和發佈版的區別，若是你仔細觀察一下，兩個版本的文件大小相差仍是挺大的。因此在引用第三方資源的時候，最好引用壓縮版的，而本身開發的前端資源文件，若是過大，在發佈測試平臺的時候，最好對前端資源進行壓縮，以提升網絡加載的速度。

（3）經過接口與前端進行交互

     如今不少公司開發東西的時候，都在強調先後端分離。如vue.js出現後，這類現象更加明顯。因此無論利用任何框架開發平臺或是工具，和前端交互的時候，考慮使用接口等進行交互。以此確保後端功能和數據的通用性，以及修改的時候影響範圍可控性。 

五，  總結

      本文從測試開發的角度來分析一下，在開發測試平臺的時候應該如何使用前端資源。因爲水平有限，可能存在很多不足，但是介紹不到之處，但用來設計咱們的測試平臺應該足夠了。

      目前社會上對測試開發要求愈來愈高，僅僅會編寫測試腳本，自動化測試是不夠的，而開發測試工具或是平臺的時候，又沒有專業的前端人員與咱們配合，因此須要本身來學習。固然若是你能把涉及到的各方面知識都學的很精通當然比較好，但是這個很難達到，能靈活運用已經不錯了。

      在掌握測試開發必須掌握的測試技術的同時，也要關注一下週邊相關的知識。靈活使用各類開源的框架，第三方支持包來省時省力地解決咱們遇到的問題也是一項很是重要的技能。