ソフトウェアを使って自動テストを行う際、テストするデータを手動で入力するのは手間がかかり、間違いが起きやすくなります。それをもっと効率よく行う方法が、CSVファイルを使うことです。

この記事では、Cypress というテストを自動で行うツールで、CSVファイルに保存したデータを使って、簡単かつ正確にテストを進める方法を紹介します。

Cypress に、テストデータを与えるにはいくつかの方法があります。フィクスチャの使用、JSONフォーマット、Excelファイル、CSVファイルです。テストの複雑さとデータソースに応じて、最適な方法を選択できます。

Cypress で CSV ファイルを使用する利点：

1. 再利用性：異なるデータの組み合わせで作成されたCSVファイルは、多くのプロジェクトで使用できます。機能テストとパフォーマンステストが簡素化され、データ収集の時間が短縮されます。そのため、データ駆動型テストが効果的になります。

2. 可読性と保守性：CSV形式のデータは読みやすく、更新が容易です。入力データが時々変更される場合、テストスクリプト内のハードコードされた値を編集するよりも、CSVファイルを更新する方が簡単でエラーが発生しにくくなります。これにより、テストデータを変更する際にエラーが発生する可能性が低くなります。

3. より良いテスト実行：一度に複数のデータ入力をテストする必要があるシナリオでは、CSVファイルにデータを保持することで、より良いテスト実行が可能になります。異なる入力の組み合わせで登録フォームをテストする必要がある場合、すべてのテストデータをCSVファイルに入れて、Cypressテストで反復処理することができます。

この記事では、ページオブジェクトモデルで記述されたテストにCSVデータ入力を提供する方法を学びます。

ステップ1：コマンドラインを使用してcypress-parseライブラリをインストールする。

npm install papaparse

ステップ2：CSVファイルを作成する

username,email,website,experience,comment,
user1,user1@gmail.com,<https://www.globalsqa.com/samplepagetest1/,0-1,hi>,
user2,user2@gmail.com,<https://www.globalsqa.com/samplepagetest2/,1-3,hello>,
user3,user3@gmail.com,<https://www.globalsqa.com/samplepagetest3/,3-5,how> are you,
user4,user4@gmail.com,<https://www.globalsqa.com/samplepagetest4/,5-7,good> to see you,
user5,user5@gmail.com,<https://www.globalsqa.com/samplepagetest5/,7-10,take> care,
user6,user6@gmail.com,<https://www.globalsqa.com/samplepagetest6/,10+,bye> bye,

ステップ3：登録ページのページオブジェクトを作成する

export class Registration{
    fileUpload(){
        const fileName = 'image.jpg';
        cy.get('input[type="file"]').attachFile(fileName);
    }
    getUsername(username){
        return cy.get('#g2599-name').clear().type(username);
    }
    getEmail(email){
        return cy.get('#g2599-email').clear().type(email);
    }
    getWebsite(website){
        cy.get('#g2599-website').clear().type(website);
    }
    getExperience(experience){
        cy.get('#g2599-experienceinyears').select(experience);
    }
    getExpertise(){
        cy.get('input[type="checkbox"][value="Functional Testing"]').check();
    }
    getEducation(){
        cy.get(':nth-child(2) > .radio').click();
    }
    getAlertbox(){
        cy.get('[onclick="myFunction()"]').click();
    }
    getComment(comment){
        cy.get('#contact-form-comment-g2599-comment').clear().type(comment);
    }
    getButton(){
        cy.get('.pushbutton-wide').click();
    }
}

ここでは、「Registration」という名前のクラスが作成され、クラス内にさまざまなメソッドが定義されています。各メソッドには、Webページとのインタラクションに使用される要素が含まれています。メソッドが呼び出されるたびに入力を動的にするために、引数が渡されています。

ステップ4：実行可能なテストファイルを作成する

import { Registration } from "../support/registration";
import Papa from 'papaparse';
describe("Registration", () => {
  it("Register User", () => {
    const register = new Registration();
    const csvFilePath = "data/testdata.csv";
    const pageUrl="<https://www.globalsqa.com/samplepagetest/>"
    Cypress.on("uncaught:exception", (err, runnable) => {
      return false;
    });
    cy.visit(pageUrl);
    cy.readFile(csvFilePath).then((csvData) => {
      const data = Papa.parse(csvData, {
        header: true,
        skipEmptyLines: true,
      }).data;
      data.forEach((row) => {
        const name = row.username;
        const email=row.email;
        const web=row.website;
        const exp=row.experience;
        const comment=row.comment;
        register.fileUpload();
        register.getUsername(name);
        register.getEmail(email);
        register.getWebsite(web);
        register.getExperience(exp);
        register.getExpertise();
        register.getEducation();
        register.getAlertbox();
        register.getComment(comment);
        register.getButton();
        cy.visit(pageUrl);
      });
    });
  });
});

ここでは、supportsディレクトリ内のファイルから「Registration」クラスがインポートされています。Papa-parseライブラリは、CSVファイルをJavaScriptオブジェクトに解析するのに役立ちます。テストスイート内で、Registrationクラスの新しいインスタンスが作成されます。その後、CSVファイルのパスが変数を作成して提供されます。
キャッチされない例外の処理：

Cypress.on("uncaught:exception", (err, runnable) => {
      return false;
    });

上記のコードを使用して、テスト実行中にキャッチされない例外が処理されます。falseを返すことで、これらの例外がテストの失敗の原因となることを防ぎます。
CSVファイルの読み込みと解析：

cy.readFile(csvFilePath).then((csvData) => {
  const data = Papa.parse(csvData, {
    header: true,
    skipEmptyLines: true,
  }).data;

まず、「cy.readFile」コマンドを使用して生のCSVファイルが読み込まれます。次に、「Papa.parse」を使用して生のCSVファイルをJavaScriptオブジェクトの配列に解析します。「header: true」は、CSVファイルの最初の行にヘッダーデータが含まれていることを示し、「skipEmptyLines: true」は、CSVファイル内の空の行をスキップすべきことを示します。その後、解析されたデータは「data」という名前の変数に格納されます。

ステップ5：テストを実行する

コマンドラインを使用してCypressコードを実行し、結果を観察します。テストは解析されたCSVデータの各行を反復処理します。各行は単一の登録エントリのデータを示します。テストは、CSVファイル内のすべてのデータが読み込まれるまで反復されます。

npx cypress open

上記の実装では、入力フィールドが一意である場合、実行前に毎回テストデータを変更する必要があります。その場合、Cypressでfakerライブラリを使用して、毎回一意のデータを生成することができます。
Githubリンク： https://github.com/BinayaBhattarai1/csv-data-cypress
デモウェブサイト： https://www.globalsqa.com/samplepagetest/

この記事は、2024年9月に弊社のQAエンジニアである Binaya Bhattarai が執筆した内容を日本語に翻訳したものです。
英語版は、こちらからご覧いただけます。
https://articles.wesionary.team/how-to-provide-csv-data-input-in-cypress-test-file-parameterization-12666d132f7e

採用情報

私たちはプロダクト共創の仕組み化に取り組んでいます。プロダクト共創をリードするプロダクト・マネージャー、そして、私たちのビジョンを市場に届ける営業メンバーを募集しています！

開発パートナーをお探しの企業様へ

弊社は、グローバル開発のメリットを活かし、高い費用対効果と品質を両立しています。経験豊富で多様性のあるチームが、課題を正しく理解し、最適なシステムと優れた体験を実現します。業務システムの開発、新規事業の開発、業務効率化やDX化に関するお困りごと、ぜひ弊社にご相談ください。