昨天分享了一篇 [蛻變事實－隨手帳] 瀏覽器BUG－Safari 問題小筆記
才想起～ RWD網頁在檢閱時也有很多細節
今天有空就來聊聊、分享，曾經有一段時間協助RWD網站做QA時遇見的問題及經驗～
QA（Quality Assurance）＝ 軟體測試 ＝ 確保產品品質

之前配合做過網站測試，那時候前台畫面協助的規格是：
Desktop： Chrome、Safari、IE最新版本
Mobile：iPhone 6s 、 iPhone 7p、華為mate8(android 6.0) 、HTC newone (android 5.0)

要檢視：UI視覺是否統一、靜態頁面及區塊的文字、點擊效果、動態視覺＆操作流暢度、上下頁切換、後台資料更新前台顯示是否正確.......等等等，這要細說就需要真的例出所有作業例表了(＝..＝)

起初覺得這是一份不難的工作
直到進入工作內容後，工作的行為就是：
檢測 → 點擊 → 等待 → 更新 → 檢測 → bug記錄 → 回報 → 驗證

算是冗長而重復作業的工作內容，而且還有桌機、手機款式及瀏覽器款式＆版本問題！
同一個畫面不同的軟體上，都要做一次又一次的操作，而問題還會千奇百怪的出現！

如：我在實機測試可能有問題，但另一邊的前端工程師也用同一款手機卻沒有發現問題。
(卡到陰～卡到陰～)

經過這零零散散的工作加總也累積了以下經驗及心得了～

QA網站－準備作業：

1. 確定網站支援的軟硬體需求(桌機＆手機各需要符合什麼？)
2. 拿到final版的UI、設計guide （如果可以的話啦...雖然通常會邊測邊改）
3. 拿到網站架構、需求說明文件
4. 雙方溝通工具方式，如：Trello
5. 問題反饋工具：錄影、截圖＋說明。
6. Mac檢測各版本IE工具，如：Parallels，這需要購買！如果公司不提供，那就看該怎麼配合取得IE的畫面了。而且重點是：即使是花錢了軟體或用其它線上的免費摸擬軟體，雖可省下大量的時間，但還是不能像實機一樣的準確。
   還有跟上面我提到的卡到陰一樣.....
   也會遇到二台同系統、同版本瀏覽器，還是出現了無可言喻的BUG！＠＠
   (反正就是卡到陰～卡到陰～~~~ 尤其是IE陰最大！)

QA網站－執行過程：

桌機版：

*同一個網站畫面，作業系統不同，結果也會不同
網站測試瀏覽器是Chrome，但可能在Windows、iSO 的作業系統呈現就是會不同。

*作業系統＋瀏覽器版本盡可能是實機，結果也會不同
雖然這似乎不可能，但現在網站開發如果是要符合RWD，基本上都已經放棄太舊IE了，都以IE11起跳！（可以當作不支援太舊IE版本的理由嗎？XD）但如果客戶還是有Windows＋舊IE使用習慣，就還是需要面對啦～聊聊這件事要怎麼「橋」..(=..=)

*同一個網站畫面，同一個作業系統，不同瀏覽器版本，結果也會不同
如：用Windows，裡的IE11、IE10.... 看同一個畫面，就會出現不同結果。（支援度問題）

手機版：

*每家手機的"原生操作手勢"操作各不同
之前遇見過一個比較困擾的問題，左右滑頻可以切換圖片，當手機上處理過多資料時，這樣的動態非常多見！但遇見「華為mate」這隻手機時，卻被它原生的瀏覽器操作給吃掉了～左右滑動時會變成網頁的上下頁！
這是次經驗讓我體會到，在網站開發前真的要確定好RWD的開發及支援！

*手機瀏覽器使用的大眾習慣
我們都習慣Chrome、Safari，但如果是大陸市場的需求，就會有UC、QQ各家產品的瀏覽器，對於這種聽的沒聽過的瀏覽器，就需要與客戶確認需求，還有自己也要裝看看是否可做驗證（但我沒用過，剛好時間緊迫最後會依主流瀏覽器的為主）

*網站社群連結分享＆點擊
網站連結不只在瀏覽器上預覽，更需要一點是放到各社群上做連結點擊，
而每個社群會有自己的內建瀏覽器(預設瀏覽器)，就可能影響到你的畫面及操作！

• 連結丟到 → Line (連結開啓)
• 連結丟到 → Wechat (連結開啓)
• 連結丟到 → FB (連結開啓)
• 連結丟到 → Chrome
• 連結丟到 → Safari

放進各不同需求社群做連結測試，會有不同情況！所以更要檢視！
不然要RWD幹嘛咧～？

*重複滑、用力點、上上下下的動來動去
手機版的網站最會遇到手勢操作時，動態遇見bug，不是壞掉就是無法支援！
這比起PC更為麻煩，必竟手機處理一些程序不如PC快速，
手勢操作及控制、點擊觸控的大小等等...都影響到使用者的體驗、網站當初規劃的視覺
畫面BUG不管大或小，只要一不對勁就都要回報上去討論問題點。

其它：

*專案負責的大老闆慣用手機(必要時需強化特定手機做加強bug驗證)
雖說老闆習慣不等於大眾客群，但依文化來說老闆的問題總是最重要的！
所以先打聽一下客戶、老闆的使用習慣，我覺得是必要的。

而這習慣也是過去有幾個經驗累積起來的，譬如：
我曾經出過一個視覺稿，而設計審視的企劃覺得我色彩太怪異，後來才確定是對方螢幕色彩顯示力問題。結果輸出沒有問題！而且...這經驗也讓我買下人生第一台MAC(因為公司不提供跟mac相關產品)，至少看色準確一點！（但說真的mac開adobe軟體超快的！）

再聊另一個經驗...
曾經出一張圖，但一直被最大的老闆說比例不對，搞到部門老闆們都緊張了起來。我一直想、一直看也不知問題在哪裡，還好本人跟資訊部的IT人員還是有人脈交情，就私下問了大大老闆的螢幕是什麼？IT人員剛好要去大老闆辦公室整理電腦，就順便帶我一起去，一看那螢幕才知...原來是大大大老闆的螢幕比例設定錯誤........無言啊～

總而言之～
不管做什麼工作內容，能多問一些：

「這個需求是給誰的？」
「什麼時候用上？」
「情境是在？」
「.......?」

就像是做市場research一樣，多理解一些總是可以把目標做的更準確。
多問、多理解、多思考 ，不管是在執行什麼專業，應該都是必勝三招啊！

參考資料：

• 關於 WebView: 10 件你需要知道的事
• 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webview)的方法

如果畫面遇到問題，我們的習慣做法是：
先把bug丟回前端，如果無解前端就會找PM討論，若是bug出現在很重要的部份就會連動到UI，結合起來討論可能改變做法，如果不是主要性功能，唯一解法就是"放棄舊版支援"。

在這段QA的角色經驗下，以前很討厭IE，結果遇到了大陸各家手機、各家都出瀏覽器，要懂要試都試不完的冏境！這些讓我忘了一點點對IE的討厭，
而且如果客戶希望網站能RWD，那幾乎就是IE最新的做開發，反而因為手機的存在，讓我有不這麼討厭它的理由 （XD)

最後～～～
不管做QA／RD／UI／PM 那一個角色，該面對就是面對，目標性就是網站上線。做法千千種，雖然不見得都是最完美，但每一步一腳印總是會積起一些歷練！
像經過過去那段QA的日子，現在遇見自己在走前端這件事，就會多想一些，也會自己多測一些！

今天的假日，雜唸完了啦～
一起繼續加油吧！