WebdriverIO でのファイルアップロード

ブラウザでのアップロードシナリオのテストはまれですが、自動化テストの分野では珍しいことではありません。多くの状況では、アプリケーションよりもブラウザのテストに終わってしまうため、このようなテストの重要性を評価することが常に重要です。したがって、フロントエンドアプリケーションがブラウザのデフォルトのアップロード動作に加えてどの程度の追加機能を提供しているかを常に念頭に置いてください。たとえば、ほとんどの処理がバックエンドで行われる場合、requestやaxiosのようなパッケージを使用して、単純な Node.js POSTリクエストを使用してアップロードを模倣する方がはるかに理にかなっています。

ファイル入力を探し、表示する

フロントエンドアプリがファイルのアップロードに加えて多くのことを行っているとしましょう（たとえば、検証やアップロードされようとしているファイルの他のフロントエンド側の操作）。最初にすべきことは、タイプfileの入力要素を見つけることです。React、Angular、その他のフレームワークで構築されたアプリは、純粋な CSS を使用してスタイルを設定するのが難しいため、これらの要素を隠していることがよくあることに注意してください。そのため、要素を隠し、divやその他のスタイリングしやすい HTML タグで入力を模倣します。

// Two hidden input elements, 1 for single file upload 1 for multiple.
<input class="upload-data-file-input hidden" type="file">
<input class="upload-data-file-input-multiple hidden" type="file">

この要素の値を変更できるようにするには、表示する必要があります。WebDriver 仕様では、値を変更するためには、入力要素が操作可能である必要があると定義されています。それではやってみましょう。

/**
 * The css class name "upload-data-file-input hidden" is just an example
 * and you can replace with your app.
 */
const fileUpload = $('.upload-data-file-input');
browser.execute(
    // assign style to elem in the browser
    (el) => el.style.display = 'block',
    // pass in element so we don't need to query it again in the browser
    fileUpload
);
fileUpload.waitForDisplayed();

executeを使用すると、要素のプロパティを簡単に変更して、hiddenクラスを削除したり、要素を表示したりできます。

ファイルをアップロードする

残念ながら、ブラウザでファイルをアップロードするメカニズムは、テスト設定に大きく依存します。結局のところ、ブラウザはアップロードしたいファイルにアクセスできる必要があります。ローカルシナリオでは非常に簡単です。ローカルマシンでブラウザを実行し、アップロードしたいファイルもローカルマシンに存在するため、必要なのはファイルパスの値を入力要素に設定することだけです。

/**
 * it is recommended to always use the absolute path of the file as it ensures
 * that it can be found by the browser.
 */
const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');
fileUpload.setValue(filePath);

リモートマシンで実行されているブラウザを自動化する場合、ローカル（またはテストが実行されている場所）にあるファイルがブラウザが実行されているリモートマシンに存在しないため、このアプローチはもう機能しません。これらのシナリオでは、Selenium プロジェクトは、現在 Chrome を実行している場合、または Selenium スタンドアロンサーバーで Selenium Grid を使用している場合にのみサポートされるfileを作成しました。このコマンドは、ファイルペイロードを base64 文字列として渡すことを想定しています。これは使用するのが非常に不便なため、WebdriverIO は、ファイル名を渡すだけで、フレームワークが適切に解析するuploadコマンドを実装しました。アップロードの例は次のようになります。

const path = require('path');
const filePath = path.join(__dirname, 'path/to/your/file');

const remoteFilePath = browser.uploadFile(filePath);
$('.upload-data-file-input').setValue(remoteFilePath);

リモートファイル名はローカルファイル名とは異なることに注意してください。したがって、uploadFileコマンドから取得したリモートファイル名に基づいて値を設定する必要があります。

以上です！ハッピーアップロード 😉🙌🏻 ❤️