Puppeteer 使用 FileChooser 無法上傳檔案 | 開發經驗分享

Alan Syue
3 min readFeb 8, 2020

原文出處:https://reurl.cc/EK3VEm

最近工作上接到新的任務是利用 Puppeteer 來自動化操作網頁,之前雖然有用過 Python 搭配 Selenium 的經驗,但 Puppeteer 是要用 Node.js 寫,完全沒寫過 Node.js 啊!!

今天想跟大家分享開發中遇到的小問題,是關於模擬點擊上傳照片,因為操作的網頁並沒有提供 API,故只好做個機器人來替代人工操作。

簡單介紹一下流程 :

第一步是點擊「 上傳照片 」

接著會跳出此視窗,要再點擊「 選擇檔案 」

最後就會跳出檔案選擇器來上傳檔案

遇到的問題

針對此需求,Puppeteer 可以透過使用 FileChooser、uploadFile 這兩個 API 解決,不過很神奇的是,當我實作時卻完全無法使用,會在使用 waitForFileChooser 時 timeout。

試了很多方法,後來還去查了是不是可以用拖拉檔案 ( drag and drop )、或是跳出檔案選擇器時,模擬鍵盤點選 “\”,會彈出 「 前往資料夾 」,再想辦法輸入檔案路徑,雖然沒有成功就是了。

如何解決

後來找到這個 issue,五天前有人猜想是不是 Chromium 版本是 80 + 時,waitForFileChooser 會失效。

我查了一下我的 Puppeteer 版本是 2.0.0,當使用 npm install 後會自動下載 Chromium,目前版本確實是 80,我嘗試將版本改為 1.9.0,重新執行後發現可以使用了。看其來確實是在新版時 waitForFileChooser 會失效。

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Alan Syue
Alan Syue

Written by Alan Syue

Backend Engineer at UPN | Love to share everything

No responses yet

Write a response