ファイルダウンロード(Download)
PDFやCSVファイルなどをダウンロードする操作に挑戦しましょう。
| 利用頻度 | 難易度 |
|---|---|
| ★★★☆☆ | ★★★☆☆ |
ファイルを自動でダウンロードする方法を学びます。
ここで一つ、非常に重要なポイントがあります。自動テストでは、ダウンロードボタンをただ click() するだけでは、ダウンロードの動作にはなりますが、ファイルそのものは保存されません。
これでは、ファイルが正しく出力されたことの確認ができないため、確実にファイルを保存するための、**「3ステップ」**が必要になります。
ダウンロードを成功させる「3ステップのおまじない」
ファイルを確実にダウンロードするためには、以下の3つのステップを順番に書くのが基本となります。
ステップ1：リンクに「ダウンロード属性」を付ける
Webサイトによっては、リンクをクリックしてもファイルがダウンロードされずにブラウザ上で開かれてしまうことがあります。これを防ぐため、evaluate というコマンドを使って、「これはダウンロード用のリンクですよ」という特別な目印を強制的に付けます。
ステップ2：リンクをクリックする
これは、これまで学んできた click() と同じです。
ステップ3：ダウンロード完了を待つ
helpers().download.waitForDownload() という、この教材で用意された便利機能を使って、ファイルのダウンロードが完了するまで待機します。
具体例
// ステップ1：ダウンロード属性を付ける
await page.getByRole('link', { name: 'Download' }).evaluate((element) => element.setAttribute("download", ""));
// ステップ2：リンクをクリックする
await page.getByRole('link', { name: 'Download' }).click();
// ステップ3：ダウンロード完了を待つ
await helpers().download.waitForDownload();
⚠️ Windows 環境は正常に動作しないことがあります。
やってみよう
以下の手順に沿って、サンプル画像をダウンロードするテストコードを完成させてください。
ℹ️ demoqaサイトではダウンロード機能にバグがあるため、Selenium - Automation Practice Form という練習サイトで演習を行ってもらいます。
演習ファイル
tests/document-2/lesson-17.spec.ts
行う操作
| 項目 | 行う操作 |
|---|---|
| Downloadボタン | クリックしてファイルをダウンロードする |
手順動画
手順
- デバッグ実行： ブレークポイントで目的の画面で止める
- 要素の特定： Pick locator を使ってコードを取得する
- コードの記述： 取得したコードを元に処理を完成させる
- 最終確認： テストを実行し、passed を確認する
ちなみに...
ダウンロード処理は、実行する環境（自分のPCか、サーバー上か）や、ブラウザの表示・非表示（ヘッドレス/ヘッドフル）によって、挙動が変わりやすい、少しデリケートな操作です。
実際の現場で実装する際は、色々なパターンで動作確認をすることが、安定したテストへの近道です。