導入

ファイルのアップロードとダウンロードの処理は、エンドツーエンド テストの一般的なシナリオです。この投稿では、Cypress を使用してファイルのアップロードとダウンロードの両方を処理する方法を検討します。 Cypress にはこれらの操作に対するサポートが組み込まれていませんが、いくつかのライブラリと Cypress の強力なコマンド セットを活用することでこの機能を実現できます。

このガイドを最後まで読むと、次の方法がわかるようになります:

• Cypress を使用してファイルをアップロードします。
• ファイルのアップロードが成功したかどうかを検証します。
• ファイルをダウンロードし、Cypress でその内容を検証します。

前提条件

例に従うには、Cypress がインストールされ、セットアップされていることを確認してください。 Cypress v13.6.2 を使用している場合は、この投稿で示されているアプローチと互換性があります。

Cypress でのファイルのアップロード

Cypress にファイルをアップロードするには、テスト中にファイルのアップロード アクションを簡単にシミュレートする方法を提供する cypress-file-upload プラグインを使用します。
ステップ 1: cypress-file-upload プラグインをインストールする
Cypress でファイルのアップロードを処理するには、まず cypress-file-upload パッケージをインストールする必要があります。

npm install --save-dev cypress-file-upload

次に、Cypress サポート フォルダー内の command.js ファイルにインポートします。

import 'cypress-file-upload';

ステップ 2: フォルダー構造
テスト ファイルを保存し、テスト中にアップロードするために、プロジェクトに次のフォルダー構造があることを確認してください:

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

ステップ 3: ファイルをアップロードする
プラグインをインストールしたら、attachFile コマンドを使用してフィクスチャ フォルダーからファイルをアップロードできます。

ファイルをアップロードする方法は次のとおりです:

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

このテストでは:

• ファイル入力が存在するページにアクセスします。
• attachFile() を使用して、フィクスチャ フォルダーからのファイルのアップロードをシミュレートします。
• アサーションは、アップロードされたファイルの名前がページ上に正しく表示されるかどうかをチェックします。

ファイルのアップロードの検証

ファイルのアップロードの検証は、アップロード後にファイル名またはパスが Web ページに表示されるかどうかを確認するのと同じくらい簡単です。ただし、複雑なシナリオ (ファイルの内容やサイズの検証など) では、サーバー側のチェックやスタブが必要になる場合があります。

例: 追加データを使用したファイルのアップロードの検証

describe('File Upload and Validation', () => {
  it('should upload a file and validate metadata', () => {
    cy.visit('/upload');

    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Assert that the file metadata like size is displayed correctly
    cy.get('.file-size').should('contain', 'Size: 1MB');
  });
});

Cypress でのファイルのダウンロード
Cypress は、ファイルのダウンロードを検証するためのネイティブ サポートを提供していません (ブラウザは Cypress の制御外でファイルをダウンロードするため) ですが、ローカル ファイル システムでダウンロードされたファイルを直接確認することでこれを回避できます。

ステップ 1: cypress-downloadfile のインストール
Cypress でのファイルのダウンロードを検証するには、cypress-downloadfile プラグインを使用できます。

npm 経由でインストールします:

npm install --save-dev cypress-downloadfile

次に、commands.js ファイルにプラグインを追加します:

require('cypress-downloadfile/lib/downloadFileCommand');

ステップ 2: ファイルのダウンロードと検証
ファイルをダウンロードしてその内容を検証するテストを作成できるようになりました。

例: ファイルのダウンロード

describe('File Download Test in Cypress', () => {
  it('should download a file and validate its content', () => {
    cy.visit('/download');

    // Download the file and save it to a custom downloads folder
    cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf');

    // Validate that the file exists in the specified location
    cy.readFile('cypress/downloads/sample.pdf').should('exist');
  });
});

このテストでは:

• cy.downloadFile() を使用して URL からファイルをダウンロードし、cypress/downloads フォルダーに保存します。
• ダウンロード後、cy.readFile().
を使用してファイルが存在することを検証します。

ステップ 3: ファイルの内容を検証する
ダウンロードが成功したことを確認するには、ダウンロードしたファイルの内容を確認する必要がある場合があります。テキストベースのファイル (.txt、.csv など) の場合、Cypress の cy.readFile() を使用してファイルのコンテンツをアサートできます。

例: ダウンロードしたファイルの内容を検証する

describe('Validate Downloaded File Content', () => {
  it('should download and check the content of a text file', () => {
    cy.visit('/download');

    // Download the text file
    cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt');

    // Read the file and assert its content
    cy.readFile('cypress/downloads/sample.txt').then((fileContent) => {
      expect(fileContent).to.contain('This is a sample text file');
    });
  });
});

このテストでは、.txt ファイルをダウンロードし、期待されるテキストが含まれているかどうかを確認します。

Cypress でのファイルのアップロードとダウンロードのベスト プラクティス

1. アップロードにフィクスチャを使用する: テスト データを整理してアクセスできるようにするため、アップロードするファイルは常にフィクスチャ フォルダに保存してください。
2. ダウンロード フォルダーのクリーンアップ: 新しいテストを開始する前に、ダウンロード フォルダーをクリーンアップして、以前のテスト実行で残ったファイルの問題を回避します。
3. サーバー応答の検証: ファイルのアップロードでは、ファイルが適切に処理されていることを確認するために、UI アサーションに加えてサーバー側の応答を常に検証します。
4. ダウンロードに一時ディレクトリを使用する: プロジェクト構造が乱雑になるのを避けるために、ダウンロードしたファイルを一時ディレクトリ (cypress/downloads) に保存します。
5. 模擬ファイル アップロード (オプション): パフォーマンス上の理由からファイル アップロードを模擬したいシナリオでは、スタブを使用して実際のファイル アップロードをバイパスします。

結論

ファイルのアップロードとダウンロードは、Web アプリケーションのテストにおいて重要な操作です。Cypress はこれらの操作をネイティブにサポートしていませんが、cypress-file-upload プラグインと cypress-downloadfile プラグインは使いやすい回避策を提供します。

このガイドでは、次の方法を検討しました:

• Cypress の cypress-file-upload プラグインを使用してファイルをアップロードします。
• ファイル名とメタデータをチェックしてファイルのアップロードを検証します。
• cypress-downloadfile プラグインを使用してファイルをダウンロードし、ダウンロードされたファイルの存在と内容を検証します。

これらのツールとテクニックを使用すると、Cypress のエンドツーエンド テストでファイルのアップロードとダウンロードを自信を持って処理できます!