上傳和下載,自動化教學常跳過、實務卻天天遇到:大頭貼、報表匯出、名單匯入。難點不在程式(AI 都會寫),在兩個你要先想清楚的問題:測試檔案從哪來?下載之後驗什麼?官方練習站沒有這類功能,這篇用你們自家系統練;沒有系統的話,下一節先請 AI 造一個,後面就能一邊讀一邊動手。

第一步:先有個系統可以練

圖 1:同一份行為清單,規格、系統、測試各用一次

上傳和下載要練,得先有個帶這些功能的系統。你們自家系統有,直接用;沒有的話,花幾分鐘請 AI 造一個——練習環境自己長出來,是這個時代學測試的福利。把這段丟給 Claude Code:

幫我做一個練習用的網站,Node.js + Express,npm install 之後 node server.js 啟動,跑在 localhost:3000。功能與行為如下:
1. 大頭貼上傳:僅支援 jpg/png/gif/webp,大小上限 5MB,剛好 5MB 要通過。成功後顯示圖片預覽和「上傳成功」;格式不符顯示「僅支援圖片格式」;超過上限顯示「檔案大小上限 5MB」;0 byte 的檔顯示「檔案內容是空的」;後端要驗檔案真正的內容,副檔名是圖片但內容不是時,顯示「檔案內容與圖片格式不符」。上傳按鈕用自訂樣式、把原生輸入框藏起來,旁邊再做一個拖放區。
2. 附件上傳:可一次選多個檔,同名檔案不覆蓋,自動在檔名後加 (1)、(2) 改名。
3. 名單匯入:上傳 CSV(欄位:姓名,email),驗證 email 格式,每筆標上狀態(成功 / Email 格式錯誤 / 姓名空白),畫面顯示「匯入完成:N 筆,成功 M 筆」。
4. 匯出:匯入結果與訂單報表。CSV 一律 UTF-8 with BOM,檔名帶當天日期:訂單報表 orders-YYYYMMDD.csv、匯入結果「匯入結果-YYYYMMDD.csv」。訂單內建假資料:2026-08 五筆(金額 1200、3500、890、15600、2400)、2026-07 兩筆(4200、760);月份選單提供這兩個月,再加一個沒有資料的 2020-01。選到沒資料的月份,給一個只有標題列的檔;還沒匯入就下載匯入結果,回覆錯誤訊息。
5. 頁面主要元素加上 data-testid,方便之後定位。
另外在 test-files 資料夾產生測試檔:avatar.jpg、document.pdf、huge.jpg(6MB)、exactly-5mb.jpg(剛好 5MB)、just-under-5mb.jpg 和 just-over-5mb.jpg(上下各差 1 byte)、empty.jpg(0 byte)、fake.jpg(文字檔改的名)、「大頭貼 測試#1.jpg」(中文加空格的檔名)、members.csv(10 筆全部正確)、members-mixed.csv(摻兩筆錯:一筆 email 格式錯、一筆姓名空白)。

幾分鐘後你會有一個跑在 localhost:3000 的練習站。接下來每一節講到的場景,都能馬上在它身上動手,一邊讀一邊練。

多看一眼上面那段指令:它其實是一份行為規格。哪個輸入該出現哪句訊息、界線畫在幾 MB,白紙黑字——這些正是接下來每一節要測的東西。等下寫測試,拿同一份清單當期望結果;測試紅了,回頭對清單就知道是系統蓋錯還是測試想錯。同一份清單用三次,這也是為什麼指令值得寫清楚——訊息文字、邊界數字,都寫進去。

上傳:沒有選檔視窗這回事

圖 2:自動化的上傳直接指定路徑,以及要先準備的兩件事

手動測上傳,你會點按鈕、在跳出的視窗裡翻找檔案。自動化不走這條路——那個選檔視窗是作業系統的,不是網頁的,程式碰不到。

Playwright 用 setInputFiles 直接把檔案路徑塞給上傳欄位,整個視窗環節跳過。所以你的指令不用描述怎麼選檔,只要說清楚上傳哪個檔、之後驗什麼:

你可以這樣對 Claude Code 說:

測試大頭貼上傳:上傳 test-files/avatar.jpg,成功後頁面應顯示圖片預覽,且出現「上傳成功」訊息。另外兩個反向場景:上傳 test-files/document.pdf 應顯示「僅支援圖片格式」;上傳 test-files/huge.jpg 應顯示「檔案大小上限 5MB」。

兩個細節。測試檔案專門開一個 test-files 資料夾放在專案裡,跟著版本控制走,任何人拿到專案就能跑;臨時抓桌面上的檔案來測,換台電腦就全紅。

還有,test-files 裡那些怪檔案——6MB 的大圖、0 byte 的空檔、改了名的文字檔——都是第一節那段指令裡請 AI 順手產的。邊界測試需要什麼特製檔案,開口要就有,這招之後常用。

測完了嗎?上傳場景全圖

圖 3:上傳測試的四類場景——正向、邊界、反向、安全

剛才那組指令蓋住了正向和兩個反向,但對照業界常見的上傳測試場景,還有幾類值得認識:

• 邊界值。上限 5MB,那剛好 5MB 整的檔案呢?差一個 byte 就過或不過的地方最容易藏 bug——程式寫的是大於還是大於等於,行為就差在這。test-files 裡的 just-under、exactly、just-over 三個檔就是為這準備的;自家系統就請 AI 照樣產三個。
• 空檔案。0 byte 的檔案傳上去,系統是擋掉、報錯,還是收下一張空圖?這是開發最常漏想的場景。
• 檔名。中文檔名、帶空格、帶特殊字元(#、%、&)、超長檔名。台灣的使用者存檔幾乎都用中文命名,這不是邊角案例,是日常。
• 副檔名偽裝。把一個文字檔改名成 .jpg 傳上去——前端看副檔名放行了,後端有沒有驗檔案真正的內容?這一條跨進安全測試的門口,而攻擊者的第一招往往就是它。
• 多檔上傳。欄位若支援一次選多個檔,setInputFiles 也吃陣列,指令裡說「一次上傳這三個檔」就行。
• 拖拉上傳。有些網站只有拖放區沒有按鈕。底下通常還是同一個檔案輸入框,setInputFiles 照樣有效;真的是純拖放實作,照實跟 AI 說,它會改用模擬拖放事件的做法。

動手測(練習站的 test-files 都備好了;自家系統就把檔案和訊息換成你們的):

測大小上限的邊界:上傳 test-files/just-under-5mb.jpg 和 test-files/exactly-5mb.jpg 應該都成功;test-files/just-over-5mb.jpg 應顯示「檔案大小上限 5MB」;test-files/empty.jpg 應顯示「檔案內容是空的」。
上傳「test-files/大頭貼 測試#1.jpg」應該成功。再上傳 test-files/fake.jpg(其實是文字檔改的名),應顯示「檔案內容與圖片格式不符」。
在附件區一次上傳 test-files/avatar.jpg 和 test-files/document.pdf,清單應出現兩個檔;再上傳一次 avatar.jpg,應被改名為 avatar(1).jpg,不是覆蓋。

不用每個功能都全測。大頭貼上傳,驗到格式、大小、檔名就差不多;開放使用者上傳任意附件的功能,副檔名偽裝就必測。跟等一下要講的下載一樣:深度由風險決定。

下載:接住、存好、打開驗

圖 4:下載驗證的流程、三層深度,與報表匯出常踩的坑

下載的機制是「等待下載事件」:先宣告要接住下載,再點下載按鈕,拿到檔案後存到暫存路徑,然後驗證。這些機制細節 AI 都熟,你要決定的是驗證深度:

• 最低限度:檔案存在、檔名正確、大小大於零。擋掉「按了沒反應」和「下載到空檔」。
• 中度:檔案格式正確,打得開。
• 高度:打開內容驗資料。匯出的訂單報表,筆數和金額對不對?

深度由風險決定:裝飾性的下載驗最低限度就好;財務報表這種錯了會出事的,驗到內容。

內容驗證聽起來難,其實是 Claude Code 的甜蜜點——讀 CSV、開 Excel 比對數字,它信手拈來。你只要說清楚驗哪些欄位、正確值是什麼或去哪查。

動手測,三層深度一次走到頂(數字是練習站的;自家系統換成你查得到的正確值):

選訂單報表月份 2026-08 下載,驗證:檔名符合「orders-日期.csv」、檔案打得開、共 5 筆、金額欄加總 23590。

報表匯出還有三個實務上常踩的坑:

• 動態檔名。orders-20260813.csv 這種帶日期的檔名,驗證要用模式比對(檔名符合「orders-日期.csv」),寫死就會在明天紅掉。
• 中文亂碼。CSV 用 Excel 打開,中文全變亂碼——常見原因是 UTF-8 沒帶 BOM。如果你的使用者習慣用 Excel 開匯出檔,指令裡加一句「驗證檔案編碼為 UTF-8 with BOM」。
• 空資料匯出。篩選條件下一筆資料都沒有時按匯出,是給一個只有標題列的檔、跳提示,還是直接當掉?跟空檔案上傳一樣,最常被漏想。

兩個坑順手驗掉:下載任一份匯出的 CSV,驗證檔案開頭三個 byte 是 EF BB BF(UTF-8 BOM);再選 2020-01(沒有資料的月份)下載訂單報表,應拿到一個只有標題列的檔。

兩個常見疑問

下載的檔案跑去哪了?測試裡的下載不會進你的「下載」資料夾,而是由測試接住、存到指定的暫存路徑,測完通常就清掉。所以不要用「去下載資料夾找檔案」的直覺想它;要留下來人工檢查,在指令裡說「存到 downloads-check 資料夾並保留」。

上傳按鈕長得很漂亮,找不到輸入框?很多網站把原生的檔案輸入框藏起來,外面套一顆好看的按鈕。這對 setInputFiles 通常不是問題,它找的是底下那個藏起來的輸入框。描述時照實說:「上傳按鈕是自訂樣式的『選擇檔案』」,AI 知道怎麼處理;真的卡住,把畫面截圖和錯誤一起丟給它。

一條值得測的鏈:匯入接匯出

圖 5:匯入接匯出——一條鏈驗三段

上傳和下載常串成一條鏈:匯入名單(上傳 CSV)、系統處理、匯出結果(下載 CSV)。

這條鏈是很好的端對端測試:準備十筆的名單上傳,下載處理結果,驗證十筆都在、狀態正確。一次驗了上傳、處理邏輯、下載三段,而且輸入輸出都是檔案,驗得特別扎實。

端對端:上傳 test-files/members.csv 到名單匯入,畫面應顯示「匯入完成:10 筆,成功 10 筆」。接著下載匯入結果,驗證檔名符合「匯入結果-日期.csv」、內容 10 筆、狀態都是「成功」。
行有餘力,改用 test-files/members-mixed.csv 再走一次:應顯示 10 筆、成功 8 筆,下載的結果裡兩筆錯的分別標「Email 格式錯誤」和「姓名空白」。

今天的練習

• 把文中每段「動手測」補完。從正向到匯入接匯出,加起來十個上下的場景,練習站都接得住;一路做下來,你會發現「AI 驗檔案內容」這件事比想像中順手。
• 有自家系統的話,挑大頭貼和報表兩類,把指令裡的檔案、訊息、數字換成你們的,重跑一遍。換系統只是換名詞,指令的結構不用動——這就是把指令寫清楚的回報。
• 改一個測試檔試試:members.csv 多加一筆,看哪些測試紅掉。你會親身體會下面這句話。