Playwright ファイル操作

Playwright は主にブラウザ自動化を目的としていますが、それはファイルのアップロードとダウンロードの面でも非常に強力で、フロントエンドでよくあるファイル操作のシナリオに簡単に対応できます。

ファイルアップロード

Web フォームでは、ファイルのアップロードは通常<input type="file">によって行われます。Playwright はこれを処理するための専用 API を提供しています:

方法1: setInputFiles()

await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');

  • パラメータの説明：

    • セレクタ: ファイル選択ボックスの特定方法。
    • ファイルパス: 相対/絶対パス。単一ファイルまたは複数ファイルの配列に対応。
  • 渡された場合[]、選択済みのファイルをクリアすることを示します。

方法2: Locator を直接使用

const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);

方法3: ドラッグ＆ドロップアップロードのシミュレーション（一部のアプリで対応）

const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');

ファイルダウンロード

Playwright はブラウザのダウンロードイベントをキャプチャし、ファイルの保存パスを取得できます。

基本使用法: ダウンロードの監視

例

const [download] = await Promise.all([
  page.waitForEvent('download'),          // ダウンロードの開始を待機
  page.click('a#downloadButton'),         // ダウンロードをトリガー
]);

// ファイルを指定のパスに保存
await download.saveAs('downloads/report.pdf');

// デフォルトの保存パスを取得（システムの一時ディレクトリ）
const path = await download.path();
console.log('ダウンロードパス:', path);

// ダウンロード情報を取得
console.log(await download.url());        // ダウンロードリンク
console.log(await download.suggestedFilename()); // 推奨ファイル名

スクリーンショットと録画ファイル

Playwright 自体もファイル（スクリーンショット、動画、トレースなど）を生成します:

await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4');  // 在配置中开启 video 记录才可用

ファイル操作の完全な例

例

import { test, expect } from '@playwright/test';

test('ファイルアップロードとダウンロードの例', async ({ page }) => {
  // ファイルをアップロード
  await page.goto('https://the-internet.herokuapp.com/upload');
  const uploadInput = page.locator('input[type=file]');
  await uploadInput.setInputFiles('tests/fixtures/avatar.png');
  await page.click('#file-submit');
  await expect(page.locator('#uploaded-files')).toHaveText('avatar.png');

  // ファイルをダウンロード
  await page.goto('https://the-internet.herokuapp.com/download');
  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('a[href="some-file.txt"]'),
  ]);
  await download.saveAs('downloads/some-file.txt');
  console.log('ダウンロード完了:', await download.suggestedFilename());
});

ファイル操作 API

API 用途 パラメータ/説明
page.setInputFiles(selector, files) ファイルをアップロード filesパス文字列、配列、またはFilePayload
locator.setInputFiles(files) ファイルをアップロード（Locator 方式）
page.waitForEvent('filechooser') ファイル選択ダイアログを待機 戻り値FileChooser
fileChooser.setFiles(files) 選択したファイルを設定
page.waitForEvent('download') ダウンロードイベントの監視 戻り値Download
download.saveAs(path) ダウンロードファイルを保存 カスタム保存場所
download.path() システムのデフォルト保存パスを取得
download.url() ダウンロードリクエストの URL を取得
download.suggestedFilename() 推奨ファイル名を取得
page.screenshot({ path }) ページのスクリーンショット
locator.screenshot({ path }) 要素のスクリーンショット
page.video()?.saveAs(path) 録画した動画を保存 video の有効化設定が必要
その他の拡張