開發工程 · Webapp Testing
自動把網站點過一遍找出問題
改完網站不用自己一頁頁點，它會開瀏覽器走一遍再截圖回報。
網站改一次就怕別的地方壞掉，可是你不可能每次都自己從首頁點到結帳。等客人來說「我下不了單」，已經掉了好幾張。
這是什麼
這個技能會實際開一個瀏覽器，照你描述的客人動作一步一步把網站點過一遍：進首頁、選商品、填表單、按送出，每一步都截圖，最後告訴你卡在哪。它也會把畫面背後跳出的錯誤訊息抓出來。改版後重跑同一份流程，馬上知道有沒有把原本好好的功能弄壞。
- 照你描述的流程，自己開瀏覽器把每個步驟點一遍
- 每一步都截圖存下來，壞在哪一步打開圖就看得出來
- 幫你填表單、按送出，確認有沒有真的出現成功畫面
- 把畫面背後跳出的錯誤訊息抓出來，不用你自己去翻
- 同一套流程可以在手機、平板、電腦三種尺寸各跑一次
- 改版後重跑同一份流程，確認原本會動的地方沒有被改壞
什麼時候用得上
改版後怕舊功能被改壞
這次只是換首頁的橫幅圖，工程師說五分鐘就好。上線後兩天才發現商品頁的加入購物車按鈕在手機上被擠到看不見。如果改完當下就讓它把下單流程重跑一遍，五分鐘就會看到第三步的截圖不對，不會等到月底對帳才發現那兩天單量怪怪的。
客人說表單一直送不出去
客服收到三則訊息說聯絡表單按了沒反應，但你自己在辦公室電腦點都正常。請它用手機尺寸把表單從頭填到送出，截圖顯示送出按鈕被跳出的鍵盤蓋住，要先收起鍵盤才點得到。問題不在功能壞掉，在手機上根本按不到，這種你自己在電腦前點一整天也不會發現。
工程師說他那邊正常
你說結帳頁面會卡住，工程師回你「我這邊測都正常」，來回三天沒進展。讓它把整段結帳流程跑一次，附上每一步截圖跟背後跳出的錯誤訊息，你直接把這份轉過去。討論的東西從「你覺得我覺得」變成同一份紀錄，兩邊看的是同一個畫面。
怎麼用
- 01
把客人的動作寫成步驟
用客人的角度一步一步寫：打開首頁、點「線上預約」、選日期、填姓名跟手機、按送出。寫得越具體越好，連要填什麼字都直接寫出來，它才不會亂猜。一次描述一條完整流程就好，不要把預約、結帳、退貨三件事混在同一段裡講。
- 02
先讓它跑一次現況
先照現在的狀況跑一遍當基準。就算目前一切正常也值得跑，因為這份紀錄就是你下次改版時的對照組。跑完你會拿到每一步的截圖，順便可以看看哪一頁載入特別慢、哪一頁的畫面在手機上被切掉，這些平常滑過去不會注意到。
- 03
照截圖找出卡在哪
出問題的時候不要只看它的結論，把截圖點開自己看。很多狀況不是功能壞掉，是按鈕被鍵盤蓋住、提示文字跑到畫面外、載入太久客人以為當掉了。這種問題你自己點反而不容易發現，因為你早就知道按鈕在哪，手指會自動移過去。
- 04
固定在每次改版後重跑
把最常用的幾條流程固定下來：下單、預約、聯絡表單、登入。每次改版後全部重跑一次，大概幾分鐘就結束。這樣工程師調整某個功能、不小心碰壞另一個功能的時候，是你先看到，不是客人打電話來罵你才知道。
實際對話長這樣
幫我測我們網站的預約流程，網站現在跑在我自己的電腦上。請照這個順序走一遍：打開首頁、點上方的「線上預約」、選最近一個可以預約的日期、姓名填王小明、手機填 0912345678、備註寫想約下午、按送出。每一步都截圖，最後告訴我有沒有出現預約成功的畫面。如果中途卡住，告訴我卡在哪一步、畫面上顯示什麼、背後有沒有跳錯誤訊息。手機尺寸跟電腦尺寸各跑一次，我特別想知道手機上送出按鈕會不會被鍵盤擋住。
它會回一份按步驟排的紀錄，每一步都附截圖：第一步首頁正常、第二步預約按鈕正常、第三步日曆載入慢了兩秒但有出來、第四步手機尺寸下送出按鈕被鍵盤蓋住，要先收鍵盤才點得到、第五步送出後停在原地沒有成功畫面，背後跳出一則欄位驗證錯誤。最後會分出哪一步是真的壞了、哪一步只是慢，你可以直接把截圖跟訊息轉給工程師。
幾個實用技巧
- 流程寫得越具體越好，寫「填表單」它會亂猜，寫「姓名填王小明」才準。
- 它是拿來測你自己的網站或還沒公開的測試站，不要拿去點別人家的網站。
- 改版前先把常用流程存成固定一份，改完直接重跑，比自己一頁頁點省事很多。
- 它只會回報畫面上發生什麼事，不會自己動手修，修改還是要交給工程師。