履歴書の提出や、プロフィール画像の登録などで使われる、「ファイルのアップロード」操作に挑戦しましょう。

利用頻度	難易度
★★★☆☆	★★★☆☆

ファイルを自動でアップロードする方法を学びます。Playwrightには、ファイルアップロード専用のコマンドが用意されているため、画面上の「ファイルを選択」ボタンを実際にクリックする、といった複雑な操作は必要ありません。

---

今回使用するコマンド：setInputFiles()

setInputFiles() は、指定したファイルを、Webページのアップロード機能に直接セットしてくれる、非常に便利なコマンドです。

基本的な書き方

await page.locator("{ファイル選択ボタンのセレクタ}").setInputFiles("アップロードするファイルのパス");

具体例

// test_icon.png というファイルをアップロードする場合
await page.locator("input[type='file']").setInputFiles("SampleFiles/test_icon.png");

⚠️ Windows 環境は正常に動作しないことがあります。

---

やってみよう

以下の手順に沿って、用意されたサンプル画像をアップロードするテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-16.spec.ts

行う操作

項目	行う操作
ファイルの選択	SampleFiles/test_icon.png をアップロードする

---

手順動画

---

手順

1. デバッグ実行： ブレークポイントで目的の画面で止める
2. 要素の特定： Pick locator を使ってコードを取得する
3. コードの記述： 取得したコードを元に処理を完成させる
4. 最終確認： テストを実行し、passed を確認する

---

ちなみに...

複数のファイルを一度にアップロードするには？

setInputFiles() の () の中に、ファイル名を [] で囲んでカンマで区切ることで、複数のファイルを一度にアップロードすることもできます。

await page.locator("...").setInputFiles(["file1.png", "file2.png"]);

---

setInputFiles() 以外の方法

今回の課題では使いませんが、fileChooser という機能を使ってファイルをアップロードする方法もあります。

ファイルアップロードのやり方には、いくつか種類がある、ということだけ覚えておいてください。