TestCafe のヘッドレスブラウザからファイルを自動ダウンロードさせる方法

概要

Webアプリの自動テストツール TestCafe にはビルトインで chrome ブラウザが付属していますが、headless モードでブラウザを起動するとファイルのダウンロードのテストが正しく動作しない問題に遭遇します。
本記事ではファイルのダウンロードを行うための方法について記載します。

対処方法

1. CDPポートの指定

chrome の起動時のオプションから Chrome Debugging Protocol のポートを指定します。

chromium:headless:cdpPort=9222 --no-sandbox

ちなみに、ポートを指定しない場合は空いているポートが自動で割り当てられてしまうため、ポートの指定は必須となります。

2. ダウンロードの許可と保存先パスの指定

以下のようにテストケース内で Page.setDownloadBehavior の behavior を allow に変更して downloadPath へダウンロードするファイルの保存先パスを指定することで、ファイルを自動ダウンロードさせることができます。

const CDP = require('chrome-remote-interface');

fixture`ファイルをダウンロードするテスト`
    .page`about:blank`;

test('ZIPファイルのダウンロード', async t => {
    const client = await CDP();
    const { Network, Page } = client;

    await Promise.all([
        Network.enable(),
        Page.enable()
    ]);

    await Page.setDownloadBehavior({
        behavior: 'allow',
        downloadPath: '/tmp'
    });

    await t
        .click(Selector('summary.btn-primary'))
        .click(Selector('a[href="/DevExpress/testcafe/archive/master.zip"]'));
});

このテストケースを実行すると、ダウンロードのボタンをクリックしたタイミングで master.zip が /tmp へ自動でダウンロードされます。