開發工程 · Webapp Testing

自動把網站點過一遍找出問題

改完網站不用自己一頁頁點,它會開瀏覽器走一遍再截圖回報。

最後更新 · 首次發布

靈境智造整理 · 繁體中文應用說明 · 原始技能文件 ↗

這個技能會實際開一個瀏覽器,照你描述的客人動作一步一步把網站點過一遍:進首頁、選商品、填表單、按送出,每一步都截圖,最後告訴你卡在哪。它也會把畫面背後跳出的錯誤訊息抓出來。改版後重跑同一份流程,馬上知道有沒有把原本好好的功能弄壞。

解決什麼問題

網站改一次就怕別的地方壞掉,可是你不可能每次都自己從首頁點到結帳。等客人來說「我下不了單」,已經掉了好幾張。

網站操作自動驗收流程:一段只有四階的木樓梯,第四階踏板裂開卡住一隻鞋
一段只有四階的木樓梯,第四階踏板裂開卡住一隻鞋

自動把網站點過一遍找出問題可以做什麼?

  • 照你描述的流程,自己開瀏覽器把每個步驟點一遍
  • 每一步都截圖存下來,壞在哪一步打開圖就看得出來
  • 幫你填表單、按送出,確認有沒有真的出現成功畫面
  • 把畫面背後跳出的錯誤訊息抓出來,不用你自己去翻
  • 同一套流程可以在手機、平板、電腦三種尺寸各跑一次
  • 改版後重跑同一份流程,確認原本會動的地方沒有被改壞

什麼時候用得上

01

改版後怕舊功能被改壞

這次只是換首頁的橫幅圖,工程師說五分鐘就好。上線後兩天才發現商品頁的加入購物車按鈕在手機上被擠到看不見。如果改完當下就讓它把下單流程重跑一遍,五分鐘就會看到第三步的截圖不對,不會等到月底對帳才發現那兩天單量怪怪的。

02

客人說表單一直送不出去

客服收到三則訊息說聯絡表單按了沒反應,但你自己在辦公室電腦點都正常。請它用手機尺寸把表單從頭填到送出,截圖顯示送出按鈕被跳出的鍵盤蓋住,要先收起鍵盤才點得到。問題不在功能壞掉,在手機上根本按不到,這種你自己在電腦前點一整天也不會發現。

03

工程師說他那邊正常

你說結帳頁面會卡住,工程師回你「我這邊測都正常」,來回三天沒進展。讓它把整段結帳流程跑一次,附上每一步截圖跟背後跳出的錯誤訊息,你直接把這份轉過去。討論的東西從「你覺得我覺得」變成同一份紀錄,兩邊看的是同一個畫面。

自動把網站點過一遍找出問題怎麼用?

  1. 01

    把客人的動作寫成步驟

    用客人的角度一步一步寫:打開首頁、點「線上預約」、選日期、填姓名跟手機、按送出。寫得越具體越好,連要填什麼字都直接寫出來,它才不會亂猜。一次描述一條完整流程就好,不要把預約、結帳、退貨三件事混在同一段裡講。

  2. 02

    先讓它跑一次現況

    先照現在的狀況跑一遍當基準。就算目前一切正常也值得跑,因為這份紀錄就是你下次改版時的對照組。跑完你會拿到每一步的截圖,順便可以看看哪一頁載入特別慢、哪一頁的畫面在手機上被切掉,這些平常滑過去不會注意到。

  3. 03

    照截圖找出卡在哪

    出問題的時候不要只看它的結論,把截圖點開自己看。很多狀況不是功能壞掉,是按鈕被鍵盤蓋住、提示文字跑到畫面外、載入太久客人以為當掉了。這種問題你自己點反而不容易發現,因為你早就知道按鈕在哪,手指會自動移過去。

  4. 04

    固定在每次改版後重跑

    把最常用的幾條流程固定下來:下單、預約、聯絡表單、登入。每次改版後全部重跑一次,大概幾分鐘就結束。這樣工程師調整某個功能、不小心碰壞另一個功能的時候,是你先看到,不是客人打電話來罵你才知道。

指令與回覆示例

以下為示意對話,不是實測紀錄或成效保證。實際輸出取決於模型、輸入資料、工具版本與設定,使用前請人工確認。

你

幫我測我們網站的預約流程,網站現在跑在我自己的電腦上。請照這個順序走一遍:打開首頁、點上方的「線上預約」、選最近一個可以預約的日期、姓名填王小明、手機填 0912345678、備註寫想約下午、按送出。每一步都截圖,最後告訴我有沒有出現預約成功的畫面。如果中途卡住,告訴我卡在哪一步、畫面上顯示什麼、背後有沒有跳錯誤訊息。手機尺寸跟電腦尺寸各跑一次,我特別想知道手機上送出按鈕會不會被鍵盤擋住。

AI

它會回一份按步驟排的紀錄,每一步都附截圖:第一步首頁正常、第二步預約按鈕正常、第三步日曆載入慢了兩秒但有出來、第四步手機尺寸下送出按鈕被鍵盤蓋住,要先收鍵盤才點得到、第五步送出後停在原地沒有成功畫面,背後跳出一則欄位驗證錯誤。最後會分出哪一步是真的壞了、哪一步只是慢,你可以直接把截圖跟訊息轉給工程師。

幾個實用技巧

  • 流程寫得越具體越好,寫「填表單」它會亂猜,寫「姓名填王小明」才準。
  • 它是拿來測你自己的網站或還沒公開的測試站,不要拿去點別人家的網站。
  • 改版前先把常用流程存成固定一份,改完直接重跑,比自己一頁頁點省事很多。
  • 它只會回報畫面上發生什麼事,不會自己動手修,修改還是要交給工程師。

常見問題

AI 可以自動幫我測試網站功能有沒有壞掉嗎?

可以。照你描述的流程,它會自己開瀏覽器把每個步驟點一遍,每一步截圖存下來,幫你填表單、按送出確認有沒有成功,還能在手機、平板、電腦三種尺寸各跑一次。

請 AI 測試網站,流程要怎麼寫才準?

越具體越好。寫「填表單」它會亂猜,寫「姓名填王小明」才準。改版前先把常用流程存成固定一份,改完直接重跑,比自己一頁頁點省事很多。

AI 測到網站錯誤會自己修好嗎?

不會。它只回報畫面上發生什麼事,並把畫面背後的錯誤訊息抓出來,修改還是要交給工程師。另外它只能拿來測自己的網站或測試站。

適合誰

有自己網站、預約系統或購物車的小型團隊,以及交件前要確認功能沒壞的接案工程與設計者。

原始出處

ComposioHQ/awesome-claude-skills

GitHub 70,983 stars(收錄時紀錄,非即時數值) · 本頁為靈境智造整理翻譯的繁體中文說明,非原作者官方文件。 功能、安裝方式、授權與費用請以原始專案最新文件為準;文中的應用情境不代表客戶實績。

同樣是「開發工程」的技能