こんにちは、フルスタックエンジニアのryuです。
今回の記事は、cypressでファイルアップロードをテストする方法を解説します。cypressでファイルアップロードするためには、cypress-file-uploadというモジュールをインストールすると、簡単に実装することができます。cypressで画像やファイルをWebサイトにアップロードする方法を詳しく解説します。
cypressでファイルアップロードをテストする方法¶
cypressでファイルアップロードはどうやってテストするの？
今回の記事は、cypressでファイルアップロードをテストする方法を解説します。htmlのinputでファイルをアップロードする場合にUIテストを実行する方法です。以下のようなinputをcypressで自動で操作します。
手順は以下の通りです。
- モジュールのインストール
- インストールしたモジュールを読み込む
- アップロードするファイルの作成
- テストコードの記述
- 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をインストールしましょう。
/blog/cypress-install
ファイルアップロードのテストコード記述方法¶
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を使って、ファイルをアップロードする方法を解説しました。まとめると以下の通りです。
- cypress-file-uploadのインストール
- インストールしたモジュールを読み込む
- アップロードするファイルの作成
- テストコードの記述
- cypressでテストを実行
CypressはUIテストを簡単に実装できるツールなのでぜひ使ってみてください。
当ブログでは、このようなITに関連する内容を発信しているので興味のある方は是非ご覧ください。
自動テストについてさらに詳しく知りたい方はこちらの参考書がオススメです。
