テストデータ作成の自動化で、開発の生産性をアップ（Cypress + Faker を活用）

2024年10月17日 01:19

ソフトウェアテストでは、アプリケーションがユーザーの期待通りに動作するかを確認するために、様々なテストデータが必要です。しかし、テストの度に手動でデータを作成・変更するのは大変な作業です。特に、アカウント登録のように一意なデータが求められる場合は、自動化が不可欠となります。
そこで活躍するのが Faker です。Fakerは、名前、住所、メールアドレスなど、様々な種類のテストデータを自動生成してくれるライブラリです。本記事では、Cypressとページオブジェクトモデル（POM）を用いて、Fakerで生成したテストデータを活用する方法を解説します。

Fakerとは？

Fakerは、テスト目的で偽のデータを生成するために使用されるライブラリです。名前、住所、電話番号、メールアドレス、その他アプリケーションのテストに一般的に必要なデータタイプのランダムデータを生成できます。Fakerは、ユーザーの操作をシミュレートしたり、データベース用のサンプルデータを生成したり、実際の機密データを使用せずにシステムのストレステストを行ったりするなど、自動化されたテストシナリオでよく使用されます。

Fakerの特徴：

ランダムデータ生成：Fakerは名前、住所、メール、電話番号、日付、会社名など、さまざまな種類のランダムデータを生成できます。これにより、自動化テストのための現実的なテストデータの生成に役立ちます。
言語サポート： Fakerは複数の言語をサポートしており、地域の慣習に従ってデータを生成できます。ロケールを指定することで、地域固有の電話番号などのデータを生成できます。
テストフレームワークとの容易な統合： FakerはCypress、Seleniumなど、多くのテストフレームワークと簡単に統合でき、データ駆動型のテストケースを自動化できます。

ページオブジェクトモデル（POM）を用いたFakerの実装手順：

ステップ1：Fakerライブラリをインストールする

npm install @faker-js/faker

このコマンドは、@faker-js/fakerパッケージをCypressプロジェクトにインストールするために使用します。

ステップ2：テストデータを生成する関数を作成する

"generateFakerData.js"というファイルを作成し、必要に応じてテストデータを生成する関数を記述します。

const { Faker, ja, en } = require('@faker-js/faker');
const fs = require('fs');

const faker = new Faker({
  locale: [ja, en]
});

function generateTestData() {
  const testData = {
    firstName: faker.person.firstName(),
    lastName: faker.person.lastName(),
    email: faker.internet.email(),
    mobile: '98' + faker.number.int({ min: 10000000, max: 99999999 }).toString(),
    currentAddress: faker.location.streetAddress(),
  };

  fs.writeFileSync('cypress/fixtures/testData.json', JSON.stringify(testData, null, 2));
}
generateTestData();

関数の準備ができたら、ターミナルで "node generateFakerData.js" コマンドを実行します。このコマンドは "testData.json" という名前のJSONファイルにテストデータを生成します。以下は、日本語で生成されたテストデータの例です：

{
  "firstName": "正三",
  "lastName": "中村",
  "email": "sdsn5j_kgn38@yahoo.com",
  "mobile": "9889624738",
  "currentAddress": "3丁目4番7号"
}

ライブラリのインポート：

const { Faker, ja, en } = require('@faker-js/faker');
const fs = require('fs');

jaとenは日本語と英語のロケール設定です。データは可能な限り日本語形式で生成され、英語がフォールバックとして使用されます。
fsモジュールはNode.jsから提供され、ローカルファイルシステムへのファイルの読み書きに使用されます。

日本語でテストデータを生成するためのFakerの初期化：

const faker = new Faker({
  locale: [ja, en] // 日本語ロケール（英語をフォールバックとして使用）
});

この行はFakerのインスタンスを作成し、ロケール設定を指定します。

関数：

function generateTestData() {
  const testData = {
    firstName: faker.person.firstName(),
    lastName: faker.person.lastName(),
    email: faker.internet.email(),
    mobile: '98' + faker.number.int({ min: 10000000, max: 99999999 }).toString(),
    currentAddress: faker.location.streetAddress(),
  };

この関数は、firstName、lastName、email、携帯電話番号、currentAddressを含むtestDataというオブジェクトを生成します。

生成されたデータをファイルに書き込む

fs.writeFileSync('cypress/fixtures/testData.json', JSON.stringify(testData, null, 2));

fs.writeFileSync：この関数はtestDataオブジェクトをファイルに書き込みます。JSON.stringify(testData, null, 2)：これはtestDataオブジェクトを整形されたJSON文字列に変換します。
nullは特別な変換が適用されないことを指定します。
2はJSONが2つのスペースでインデントされ、読みやすくなることを示します。

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

"registration.cy.js"というファイルを作成し、以下のようにテストファイルにCSVデータをインポートします：

export class Registration {
  getFirstName() {
    return cy.get("#firstName");
  }
  getLastName() {
    return cy.get("#lastName");
  }
  getEmail() {
    return cy.get("#userEmail");
  }
  getGender() {
    return cy.get("label[for='gender-radio-1']");
  }
  getMobile() {
    return cy.get("#userNumber");
  }
  getDateOfBirth() {
    return cy.get("#dateOfBirthInput");
  }
  getDatePicker() {
    return cy.get("div[aria-label='Choose Sunday, September 22nd, 2024']");
  }
  getSubjects() {
    return cy.get(
      ".subjects-auto-complete__value-container.subjects-auto-complete__value-container--is-multi.css-1hwfws3"
    );
  }
  getHobbies() {
    return cy.get("label[for='hobbies-checkbox-1']");
  }
  getPicture() {
    return cy.get("#uploadPicture");
  }
  getCurrentAddress() {
    return cy.get("#currentAddress");
  }
  getState() {
    return cy.get("div[class=' css-yk16xz-control'] div[class=' css-1wa3eu0-placeholder']");
  }
  getaState(){
    return cy.get(".css-11unzgr").contains("NCR");
  }
  getCity() {
    return cy.get("div[class=' css-1wa3eu0-placeholder']");
  }
  getaCity(){
    return cy.get("#react-select-4-option-0");
  }
  getSubmit() {
    return cy.get("#submit");
  }

  userRegister(data) {
    this.getFirstName().type(data.firstName);
    this.getLastName().type(data.lastName);
    this.getEmail().type(data.email);
    this.getGender().click();
    this.getMobile().type(data.mobile);
    this.getDateOfBirth().click();
    this.getDatePicker().click();
    this.getSubjects().type("Maths").click();
    this.getHobbies().click();
    this.getPicture().attachFile("image.png");
    this.getCurrentAddress().type(data.currentAddress);
    this.getState().click();
    this.getaState().should('be.visible').click();
    this.getCity().click();
    this.getaCity().should('be.visible').click();
    this.getSubmit().click();
}
}

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

"registration.cy.js"というファイルを作成し、テストスイート内にテストケースを記述します。

import { Registration } from "../support/registration";

describe('Registration', () => {
    it("Student Registration Form", () => {
      const register = new Registration();
      const url = "https://demoqa.com/automation-practice-form";
      Cypress.on("uncaught:exception", (err, runnable) => {
        return false;
      });
      cy.visit(url);
      cy.fixture("testData.json").then((data) => {
        register.userRegister(data);
      });
    });
  });

キャッチされない例外の処理：

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

上記のコードを使用して、テスト実行中にキャッチされない例外を処理します。falseを返すことで、これらの例外がテストの失敗を引き起こすのを防ぎます。

フィクスチャからテストデータを読み込む

cy.fixture("testData.json").then((data) => {

cy.fixture()コマンドはcypress/fixturesディレクトリにあるファイルからJSONデータを読み込みます。読み込まれたデータは**.then()**関数に渡され、dataオブジェクトとして利用可能になります。

テストデータでフォームに入力する

register.userRegister(data);

これはクラスからメソッドを呼び出し、JSONファイルから読み込まれたデータを使用して登録フォームを自動的に入力します。

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

コマンドラインを使用してCypressコードを実行し、結果を確認します。

npx cypress open

上記の実装により、テストデータは実行前に毎回動的に生成されます。
Githubリンク： https://github.com/BinayaBhattarai1/faker-cypress
デモウェブサイト： https://demoqa.com/automation-practice-form

読んでいただきありがとうございます。参考になりましたら幸いです。
気になることや質問がありましたら、ぜひコメントください。

この記事が役立つと感じた場合は、スキを押してもらえると嬉しいです！

この記事は、2024年9月に弊社のQAエンジニアである Binaya Bhattarai が執筆した内容を日本語に翻訳したものです。
英語版はこちらからご覧いただけます。
https://articles.wesionary.team/faker-implementation-with-page-object-model-in-cypress-3fccf333bac8

採用情報

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

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

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