Cypress ファイルアップロード

体裁はそのうち整える。

Cypress とは

そのうち別ページに移す。
E2Eテストツール。
npmでも提供されているが、実行ファイルのみを単体でダウンロードして使用することも可能。
Chromeが同梱されていて、各開発者のローカルPCで動かすイメージ。

テスト自体はJSで記載する。
サンプルも割と豊富にあるので、基本的な操作はあまり困らない。

ファイルアップロード

ググるといくつか出てくるけど、、、英語ページばかりだったので備忘のため。

command.js

Cypress.Commands.add('upload_file', (fileName, fileType = ' ', selector) => {
    cy.get(selector).then(subject => {
        cy.fixture(fileName, 'base64')
            .then(Cypress.Blob.base64StringToBlob)
            .then((blob) => {
                cy.log(blob);
                const el = subject[0];
                const testFile = new File([blob], fileName, { type: fileType });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(testFile);
                el.files = dataTransfer.files;
            });
    });
});

test.js

cy.upload_file(file_name, file_type, 'input[name=file_input]');