自動テスト

cypressでファイルアップロードをテストする方法【cypress-file-uploadを使うと簡単に実装できる】

macでLinuxを操作する

こんにちは、フルスタックエンジニアのryuです。

今回の記事は、cypressでファイルアップロードをテストする方法を解説します。cypressでファイルアップロードするためには、cypress-file-uploadというモジュールをインストールすると、簡単に実装することができます。cypressで画像やファイルをWebサイトにアップロードする方法を詳しく解説します。

cypressでファイルアップロードをテストする方法

cypressでファイルアップロードはどうやってテストするの?

今回の記事は、cypressでファイルアップロードをテストする方法を解説します。htmlのinputでファイルをアップロードする場合にUIテストを実行する方法です。以下のようなinputをcypressで自動で操作します。

cypressで操作する

手順は以下の通りです。

  1. モジュールのインストール
  2. インストールしたモジュールを読み込む
  3. アップロードするファイルの作成
  4. テストコードの記述
  5. cypressでテストを実行

では、詳しく解説します!

cypress-file-uploadモジュールのインストール

cypressでファイルをアップロードするために、cypress-file-uploadというモジュールをインストールすると簡単に実装することができます。

インストールするコマンドは以下の通りです。

npm install --save-dev cypress-file-upload

モジュールの詳細については、こちらのページをご確認下さい。

cypress-file-upload – npm (npmjs.com)

インストールが完了したら、cypressでモジュールを読み込む設定を行います。

cypressの設定ファイルでモジュールを読み込む

では、インストールしたcypress-file-uploadをcypressで使用できるようにします。設定ファイルは”cypress/support/commands.js”です。以下のように設定します。

import 'cypress-file-upload';

TypeScriptを使用している場合は、”tsconfig.json”に記述します。

"compilerOptions": {
    "types": ["cypress", "cypress-file-upload"]
}

これで準備が完了です!実際にUIテストを記述してみましょう。

ファイルアップロードのUIテストを実装する

先ほどまで、モジュールをインストールする方法を解説しました。準備が完了したら、cypressでファイルをアップロードするUIテストを実装してみましょう。

またcypressのインストールが完了していない方は、こちらの記事からcypressをインストールしましょう。

PCでコーディング
Cypressを導入してUIの自動テストを実装する方法解説!【自動テストツールを使ってみよう】 こんにちは、フルスタックエンジニアのryuです。 今回の記事は、Cypressを導入してUIの自動テストを実装す...

ファイルアップロードのテストコード記述方法

cypressでファイルをアップロードするテストコードは以下の通りです。

cy.get("#ImageUploadTest")
    .attachFile('sampleImage.png');

このテストコードは以下のようなHTMLをテストする場合です。

<input type="file" name="ImageUploadTest"  id="ImageUploadTest" accept="image/jpeg, image/png">

cy.get(“#ImageUploadTest”)で、inputのidを指定します。attachFileではアップロードするファイルを指定します。アップロードするファイルは、cypressのfixturesディレクトリに保存します。

cypressのfixturesにファイルを保存する

アップロードするファイルはfixutersディレクトリに保存しましょう。

アップロードするファイルの保存場所

これでファイルのアップロードする準備は完了です。cypressの自動テストを実行してみましょう。

./node_modules/.bin/cypress run

複数のファイルをアップロードする場合

複数のファイルをアップロードする場合、cypressは以下のように記述します。

cy.get("#ImageUploadTest")
  .attachFile(['sampleImage1.png', 'sampleImage2.png']);

attachFileの中に配列で複数ファイルを指定します。

ファイルアップロードを自動テストする方法まとめ

今回の記事では、cypressを使って、ファイルをアップロードする方法を解説しました。まとめると以下の通りです。

  1. cypress-file-uploadのインストール
  2. インストールしたモジュールを読み込む
  3. アップロードするファイルの作成
  4. テストコードの記述
  5. cypressでテストを実行

CypressはUIテストを簡単に実装できるツールなのでぜひ使ってみてください。

当ブログでは、このようなITに関連する内容を発信しているので興味のある方は是非ご覧ください。

自動テストについてさらに詳しく知りたい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!