Zenn
🌀

cypressでCSVダウンロードをテストする

2020/11/18に公開
JavaScript
TypeScript
#
csv
Cypress
#
download
tech

まとめ

日本語の記事が検索に引っかからなかったから、記事を書いてみました。
エイリアス的な感じですね。

要点

  • cypressにはブラウザのダウンロード機能をハックする仕組みがあり、ダウンロードディレクトリをDownloadsから変えることができる。つまりローカルに持ってこれる。
  • ローカルに持ってきたCSVファイルをneatCSVでパースしてオブジェクト化する。
  • テストする。

実際に書いてみてあると便利なコマンド

以下の３つのコマンドを用意しているとテストしやすいかなって考えます。

コマンド 説明
allowDownloadPopup ダウンロードポップアップを自動でYESにするcypressコマンド
readCSV csvファイルを読み込んでパースしてオブジェクト化するcypressコマンド
detectEncoding csvファイルを読み込んでエンコーディングを調べるcypressコマンド 
const path = require('path');
const neatCSV = require('neat-csv');
const encoding = require('encoding-japanese');

const defaultDownloadFolder = 'cypress/downloads';

export function allowDownloadPopup(downloadPath, options) {
  // The next command allow downloads in Electron, Chrome, and Edge
  // without any users popups or file save dialogs.
  if (Cypress.browser.name !== 'firefox') {
    // since this call returns a promise, must tell Cypress to wait
    // for it to be resolved
    cy.wrap(
      Cypress.automation('remote:debugger:protocol', {
        command: 'Page.setDownloadBehavior',
        params: { behavior: 'allow', downloadPath: downloadPath || defaultDownloadFolder },
      }),
      { log: false, ...options },
    );
  }
}

export function readCSV(filename, downloadFolder = defaultDownloadFolder, options = {}) {
  const filepath = path.join(downloadFolder, filename);
  return cy.readFile(filepath, { timeout: 15000, ...options }).then(neatCSV);
}

export function detectEncoding(filename, downloadFolder = defaultDownloadFolder, options = {}) {
  const filepath = path.join(downloadFolder, filename);
  return cy
    .readFile(filepath, { timeout: 1500, ...options })
    .then((data, options) => encoding.detect(data));
}

使い方

allowDownloadPopup

beforeEach(function(){
 cy.allowDownloadPopup()
})

readCSV

test.csv を読み込んで、レコード数と最初のレコードの内容をテストする。

test.csv
a,b,c
1,2,3

cy.get('button').contains('CSV(UTF-8))').click()
cy.readCSV('test.csv')
  .then(list => {
     expect(list, 'number of records').to.have.length(1)
     expect(list[0], 'first record').to.deep.equal({
	a: 1,
	b: 2,
	c: 3
     })
  })

detectEncoding

test.csv を読み込んで、エンコーディングが UTF-8 であることをテストする。

cy.detectEncoding('test.csv').then(encoding => {
   expect(encoding, 'encoding').to.equal('UTF-8')
})

以上です。

Discussion