ウェブアプリへのファイルのアップロード

mablトレーナーでは、ファイルアップロードのステップとアサーションを組み合わせて、Webアプリケーションがファイルアップロードの操作を期待どおりに処理しているかどうかを確認できます。アップロードされたファイルは、今後のテスト編集やクラウド実行のためにmablワークスペースに追加され、アプリのテスト環境設定 > ファイルアップロードからアクセスできます。

続きを読んで、ウェブアプリへのファイルのアップロードについて詳しく学びましょう。

ファイルアップロードステップのトレーニング

ファイルアップロードのステップを使用するには、アプリケーションのページのHTMLにファイルタイプの入力要素が必要です。これはファイル選択に使用される標準的なHTML要素であり、mablはこの要素を通じてファイル入力を設定します。アプリケーションにこの要素がない場合、ファイルアップロードのステップは機能しません。

開始するには、mablトレーナーを開き、アプリケーション内のファイルアップロードステップが必要なページに移動します。録画ボタンがオンになっていることを確認してください。

1. アプリケーションの「ファイルのアップロード」または「ファイルを選択」ボタンをクリックしてください。mablがファイルピッカーをインターセプトし、ファイル選択モーダルを開きます。
2. mablのファイルピッカーメニューで、ソースを選択します。ページのファイル入力が複数ファイルに対応している場合は、サポートされているいずれのソースからでも、アップロードするファイルのリストを作成できます。
   • ご使用のコンピューター: ローカルディスクを参照し、ファイルをワークスペースにアップロードします。
   • このテストでダウンロード済み: テストが以前のダウンロードで取得したファイルを再利用します。mablはダウンロードをファイル変数として追跡するため、実行ごとにファイル名が変わっても、再生時に適切なファイルが選択されます。
   • ワークスペースのアップロード: ワークスペースのアップロードに保存済みのファイルを選択します。
   • ファイル変数: データ駆動型変数としてテストにアップロードされたファイルを使用します。特定のファイル変数を選択するほか、テキストとmablの変数構文を組み合わせたファイル名テンプレートを入力して、実行時にファイルを選択することもできます。
3. mablは、ファイル入力を設定するステップを自動的に記録します: 「Set file input to {name-of-file}」。
4. アプリケーションでファイルのアップロードを送信するアクションを記録します。たとえば、「送信」ボタンをクリックします。
5. ファイルのアップロードが成功したことを確認するアサーションを作成します。このアサーションは、ファイルのアップロードが成功した後にアプリケーション内で何が起こるかによって異なります。

カスタムファイルアップロードステップの記録

何らかの理由で、ファイルを選択したときにTrainerが「set file input」ステップを記録しない場合は、Playwrightロケーター、CSS、またはXPathを使用したカスタムファイルアップロードステップの作成をお試しください。

1. Trainerで、 要素の検索ステップを追加します：ステップを追加 > 要素を検索。
2. ファイル入力を対象とするロケーターを入力します。たとえば、xpath=//input[@type='file']。
3. アクションとしてファイル入力を設定を選択します。
4. アップロードするファイルをドロップダウンから選択してください。

ページに複数のファイル入力要素がある場合は、正しい要素をターゲットにするために、より具体的なXPath式が必要になることがあります。たとえば、xpath=//input[@type='file' and @name='document']のようになります。

ファイル入力の更新

ファイル入力を更新するには、記録されたファイルアップロードステップの横にある鉛筆アイコンをクリックしてください。ドロップダウンから新しいファイル入力を選択できます。

複数ファイルのアップロードに対応しているステップでは、ステップが現在保持しているファイルがリストにあらかじめ入力された状態で表示され、必要に応じてファイルを追加または削除できます。

データ駆動型ファイルのソース

ファイルのソースとしてファイル変数を選択する場合、ステップを記録する時点でファイルを固定する必要はありません。mablは、次のいずれかのソースから、テストの実行時にアップロードするファイルを決定できます。

• 共有ファイル変数: 前のテストでダウンロードされ、現在のテストと共有されたファイル変数。
• ファイル名テンプレート: テスト内のいずれかのファイル変数の名前に解決されるテンプレート。

前のテストでダウンロードしたファイルをアップロードする

あるテストでダウンロードしたファイルは、同じプラン内の別のテストでアップロードできます。共有変数を使用すると、あるテストでレポートをエクスポートし、別のテストでそれを再インポートするといった、一連の往復フローを検証できます。

1. ダウンロードするテストでファイルに名前を付けます。ダウンロードステップを開き、ファイル変数として保存に名前を入力します。たとえばexportedReportとします。名前は意識して付けてください。このフィールドを空欄のままにすると、mablがファイル変数に名前を付けるため、アップロードするテストが照合できなくなります。
2. そのテストの変数を共有します。 ダウンロードするテストの詳細ページで、共有変数をオンに切り替えます。テスト間での変数の共有をご覧ください。
3. アップロードするテストに、名前が一致するファイル変数を追加します: {x} > 変数を管理 > データ駆動型変数 > 新しいファイル変数。同じ名前を付け、トレーニング用のプレースホルダーとして任意のファイルをアップロードします。名前は大文字と小文字が区別されます。
4. ファイルアップロードステップを追加または編集し、ファイルのソースとしてファイル変数を選択して、プレースホルダーの変数を選択します。
5. プランの順序を設定して、ダウンロードするテストが先に完了するようにします。順次ステージを使用するか、ステージを分けてください。

トレーニング中およびアドホック実行中は、ステップはプレースホルダーのファイルをアップロードします。クラウドでのプラン実行中は、ダウンロードするテストのファイルがそれに置き換わります。

実行時にファイル変数を名前で選択する

状況に応じて異なるファイルをアップロードする必要がある場合は、テストの実行時にファイル変数を名前で選択できます。リテラルのテキストとmablの変数構文を組み合わせてファイル名テンプレートを作成すると、mablは実行時にそのテンプレートをファイル変数として解決します。

1. 実行時の値を保持する変数を決めます。 データテーブルシナリオの値、ページから抽出した値、APIレスポンスの値などを使用できます。
2. 想定される値ごとにファイル変数を作成し、テンプレートに一致するように名前を付けます。たとえば、country_codeという変数の場合、ファイル変数の名前をusers_us、users_ca、users_frとします。
3. ファイルアップロードステップを追加または編集し、ファイルのソースとしてファイル変数を選択します。特定の変数を選ぶ代わりに、変数フィールドにファイル名テンプレートを入力します: users_{{@country_code}}

テストを実行すると、ステップはテンプレートが解決したファイル変数をアップロードします。ページにcaが表示された場合はusers_ca、frが表示された場合はusers_frをアップロードします。

代わりに条件分岐を使用する

ファイル名に一定のパターンがない場合は、条件分岐を使用してシナリオを評価し、適切なファイルへの入力を設定してください。この方法ではファイルごとに条件が必要になるため、名前に一定の規則を使用できる場合は、ファイル名テンプレートを使用するほうが簡単です。次のスクリーンショットは、データテーブルのシナリオに応じて異なるファイルをアップロードするテストステップを示しています。

データテーブルのシナリオに応じて異なるファイルをアップロードする