JavaScript
testcafe

[TestCafe][JavaScript]ループや分岐を使用する

ちょっと息抜きに、E2Eツールでテスト以外のことができないかなと考えてみました。

折角ブラウザを自動で操作できるので、テストデータを自動で作れたら便利じゃない?
と思い、ここに至りました。
本来はそういうのはDBいじれば早いのですが、DBいじっちゃいけない想定で試してみました。

例えば、テスト環境がいくつかあって、それが全て画面構成が同じ(idとかxpathなど)場合、
指定した値によって接続先が変わるような、指定した数だけデータを作成するようなものがあれば、

「このテストはデータが沢山あるときに実行してこそ効果があるから、大量のデータを登録しなきゃ!」
とか
「データ沢山作っちゃったから、パッと1クリックで削除できないかな?」
なんてことの解消になるんじゃないかなと。

まずは全てを統括するファイルを作って、ここで必要な情報を全て指定します。

main.js
// データを連続作成する
import CreateData from './Create_date';
const create = new CreateData();

// 実行する環境
const environment = 'machine1';

// 作成するデータの数
const datacount   = 5;

// データ名
const dataname   = 'テストデータ';

fixture('データを連続で作成する')
test('データを作成する', async t => {
    await create.adddata(environment,datacount,dataname);
});
test('データを削除する', async t => {
    await addmembers.deletedata(environment,dataname);
});

指定した「作成するデータ数」と「データ名」を引数として、
また、ループ内でインクリメントされる変数を、文字列としてくっつけます。
ここでは、削除用のコードも書いてますが、呼び出し元のテストクラスが異なるので、
個別で起動できます。

Create_date.js
// 指定した数だけデータを作成する
    async addmember(environment,datacount,dataname) {
        await this.access.authorize(environment);

        for( var counter = 1; counter <= datacount; counter++ ){
            await t
            .click(this.object.addData)
            .typeText(this.object.dataName,dataname + '_' + counter.toString())
            .click(this.object.SaveButton)
        }
    }

// 作成したデータを削除する
    async delmembers(environment,dataname) {
        await this.access.authorize(environment);
        await t
        .typeText(this.object.inputKeyword,initialstr)
        .click(this.object.searchKeywordButton);

        this.datanumber = await this.object.dataCount.innerText;
        var datacount = parseInt(this.datanumber);

        while( datacount > 0 ) {
            await t
            .click(this.object.memberFirst)
            .click(this.object.memberDeletebutton)   
            .click(this.object.deleteButton);
            datacount -= 1;
        }
        await t.expect(this.object.memberCount.textContent).eql('0');
    }
}

最初のファイルで指定した内容によって、接続先を切り替えられるよう
switchを使っています。

access.js
// URL
const url1 = 'https://www.AAAA.co.jp';
const url2 = 'https://www.BBBB.co.jp';
const url3 = 'https://www.CCCC.co.jp';
const url4 = 'https://www.DDDD.co.jp';
const url5 = 'https://www.EEEE.co.jp';

// 指定URLへアクセス
export default class Access {
    async open(URL) {
        await t
        .navigateTo(URL);
    }

// 引数によってアクセス先が変わる
    async authorize(site) {
        switch (site) {
            case 'machine1':
                await this.open(url1);
                break;

            case 'machine2':
                await this.open(url2);
                break;

            case 'machine3':
                await this.open(url3);
                break;

            case 'machine4':
                await this.open(url4);
                break;

            case 'machine5':
                await this.open(url5);
                break;
        }
    }
}

データ作成

処理の流れとしては以下のようになります。

  1. 指定したURLへアクセス
  2. 指定したデータ名を入力
  3. データを登録
  4. 2~3を指定した回数繰り返す
  5. 終了

作成されたデータは以下になります

テストデータ_1
テストデータ_2
テストデータ_3
テストデータ_4
テストデータ_5

データ削除

処理の流れとしては以下のようになります。

  1. 指定したデータ名で絞り込む
  2. 表示された件数を確認する
  3. データを削除
  4. 表示される件数が0になるまで繰り返す
  5. 終了

対象の文字列が含まれるデータは全て削除してしまうので、
必要なものまで消してしまわないように、指定するデータ名には注意が必要です。