e2eテストを実施する際に、ファイルアップロードをテストしたいケースもあると思う。特にシステムの場合は必ずと言っていいほどファイルのアップロード機能は存在する。
今回はcypressでファイルアップロードをテストする方法を解説する。結論、cypress-file-uploadというライブラリを使えば簡単にテストが実装できる。
cypressの構成
ファイルアップロードテストについて解説する前に、cypressの構成を理解しておこう。下記の通りだ。
cypress
- e2e: 実際のテストを記述
- hoge.cy.js
- fixture: アップロード用のファイルなどを格納
- hogehoge.json
- hogehoge.png
- support
- commands.js: カスタムコマンドを定義できる
- e2e.jsファイルアップロードテストの手順
cypressでのファイルアップロードテストは４ステップで実現できる。
- fixtureディレクトリにファイルを配置
- cypress-file-uploadをインストール
- commands.jsでモジュールを読み込む
- テストコードの記述
1. fixtureディレクトリにファイルを配置
まずはアップロードするファイルを用意しよう。
とりあえず今回はテスト用に、画像とjsonファイルを用意する。
- hogehoge.json
- hogehoge.png2. cypress-file-uploadをインストール
ライブラリのインストールを実行する。
npm install cypress-file-upload --save-dev3. commands.jsでモジュールを読み込む
色々とコメントが書かれているが、最下部でライブラリをインポートする。これで、cypressでcypress-file-uploadが使用できるようになる。
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
import 'cypress-file-upload';4. テストコードの記述
下記のようなHTMLがあったとして、input[type=”file”]から正常にファイルアップロードができるかテストする場合を想定している。
<input type="file" data-e2e-id="fileUploadInput">余談だが、cypressでe2eテストを行う場合、テスト用にdata-e2e-id=””みたいな属性をHTMLに付与しているとテストしやすい。仮にUI用のDOM(classなど)に変更があった場合、テスト用のdata属性を持たせていれば毎度テストコードを変更しなくて済むからだ。
話を戻してcypressのテストコードを書く。
describe('ファイル管理', () => {
it('ファイルアップロード実行', () => {
cy.get('[data-e2e-id="fileUploadInput"]').attachFile('hogehoge.png');
});
})これでOKだ。
アップロードに成功すればテストは通るし、ファイルのサイズが大きすぎるなどの理由でアップロードに失敗した場合はテストは失敗する。
仮に画像以外のファイル形式を許可していないシステムテストの場合は、.jsonや.txtなどのアンチパターンの拡張子を用意しておいて、エラーメッセージを出させることも必要だ。
【おまけ】実際のcypressでのe2eテストの様子
下記の動画は、私が個人で開発しているタスク管理アプリだが、機能の中にGoogleドライブのようなファイル管理機能がある。ユーザーはフォルダを作ったり、ファイルをアップロードできる。
テストでは、フォルダの作成、ファイルアップロード、拡張子エラー、ファイルプレビュー、フォルダの階層移動、ファイル・フォルダの削除など一連の処理をテストしている。
ファイルアップロードのテストには、cypress-file-uploadを使用した。
