Cypress でアップロードとダウンロードを検証する方法-jsチュートリアル-php.cn

How to Validate Upload and Download in 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 でのファイルのアップロードとダウンロードのベストプラクティス

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

結論

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

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