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

今回はcypress-file-uploadというライブラリーを使って実装していきます。
ライブラリー使わないやり方もあるみたいだったので、下の方に参照載せてます

設定

設定はライブラリーのドキュメント通りに

npm install --save-dev cypress-file-upload
or
yarn add -D cypress-file-upload

typescriptを使ってる人はこちらをtsconfig.jsonに追加

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

こちらをcypress/support/commands.jsに追加

import 'cypress-file-upload';

使い方

使い方は下記のような形で書きます。
アップロードするファイルは基本的にはfixturesフォルダの中に入れます。
attachFileの引数は fixturesフォルダからのファイルのパスを指定してあげる。

cy.get('[data-cy="file-input"]')
  .attachFile('myfixture.json');

ハマった点

ドキュメント通りに設定したところ下記エラーが発生

cy.get(...).last(...).attachFile is not a function

attachFileのモジュールが読み込めてないのが原因だった
cypress.config.tsを編集して、import している'cypress-file-upload'を読み込むようにする
configの詳しい書き方はこちら

module.exports = defineConfig({
	e2e: {
		....
		supportFile: './cypress/support/e2e.ts',
		↑ (falseだったのをファイルパスに変更)
		.....
	},
})

公式のドキュメント探したら、下記のようなやり方も出てきた。
これならライブラリーなくてもできそうかな。

cy.get('[data-cy="file-input"]').selectFile('cypress/fixtures/data.json')