Cypress でアップロードとダウンロードを検証する方法

導入

ファイルのアップロードとダウンロードの処理は、エンドツーエンドのテストにおける一般的なシナリオです。この投稿では、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-file-upload

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

import 'cypress-file-upload';

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

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

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

このテストでは:

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

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

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

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');
  });
});

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

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

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

結論

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

このガイドでは、次の方法について説明しました。

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

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

以上がCypress でアップロードとダウンロードを検証する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。