Posted at

[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. 終了

対象の文字列が含まれるデータは全て削除してしまうので、

必要なものまで消してしまわないように、指定するデータ名には注意が必要です。