TestCafeで始めるE2Eテスト

はじめに

　こんにちは、tuq376sです。今回は最近触り始めたE2Eテストのフレームワーク、TestCafeでの初歩的な画面操作についてまとめたいと思います。

　というのも、TestCafeはTypeScriptを用いて記述するのですが。 そもそも自分がTypeScriptも初めてかつ、JavaScriptも自信を持ってすらすら書ける！　とは言えないレベルなので、 まずは「こう書けばとりあえず動作する」から覚えていこうという次第です。 　

アクセス先とテストケース

　まずはアクセス先の指定とテストケースの書き方から。

fixture("サンプル").page("https://hogehoge/");
test("テストケース1" , async (t) => {
    //テスト内容
});
test("テストケース2" , async (t) => {
    //テスト内容
});

　fixtureは複数のテストケースをまとめるカテゴリの役割を果たします。 そして続く.pageは始めにアクセスするURLを指定しています。.beforeEachã‚„.afterEachで事前・事後処理を記述することもできるようです。

　実際のテストケースはtestで宣言します。実行結果ではこのテストケースごとに成功と失敗が返される形になります。

要素を取得

　ここからの内容は、testの中で書いていきます。
まずは画面を操作していくために、ページ上の要素を変数に取得していきます。

const button = Selector('input').withAttribute("value","ボタン").nth(0);

　Selectorは指定した要素を取得します。ここにはタグ名だけではなく、class や id も指定することができます。

　WithAttributeは、属性の名前と値で要素を絞り込みます。リンクやボタンなどであれば、だいたいこれで一意に絞れるのではないかと思います。

　それでも一意にならない時（自分は同じ属性を持った要素が並ぶ一覧画面でつまづきました）、便利なのがnthです。これは条件に一致した要素のうち、上から何番目の要素を取得するかを指定できます。これが素敵なのは、HTML上で何番目になるかが同じであれば、もし属性の値が変更されたとしてもテストコードを書き直さずに済むところです。

クリック

　さて、ようやく画面自体の操作です。

   await t.click('#nextLink');

　クリック操作はclickで行います。要素の指定は上記のようにidを直接書いたり、先ほどのSelectorで取得したものを渡したりします。

　ここで指定したものが複数に該当してしまっていると、エラーになってしまいますので注意です。（例えば一つしかボタンがないと思っていたら、実はhidden状態の同じボタンがもう一つ存在してたりとか……ありました）

テキストフィールドへの入力

　続いて、テキストフィールドへの入力操作についてです。

const textArea = Selector('input').withAttribute("name","入力場所");
await t.typeText(textArea, "入力したい値");

　typeTextを用います。Selectorで取得したテキストエリア要素と、入力する値を指定します。

　どうやら指定した要素をクリックしてフォーカスしてから入力を行っているようで、クリックした段階で正しくフォーカスできなかった場合、書き込みは行われないようです。

ファイルアップロード

　最後に、ファイルをアップロードする操作です。

await t.setFilesToUpload(linkInputFile, "ファイルパス");

　setFilesToUploadを使って、ファイルを設定する要素とファイルパスを記述します。ファイルパスは[ 'ファイル1', 'ファイル2', 'ファイル3' ]といったように複数を指定することも可能です。

おわりに

　というわけで、これらがわかれば最低限テストケースを作って画面操作してみる、ということはできるはずです。

　テストと言いつつアサーションには触れられていませんが、そちらはまたもう少し理解できたら、いずれ記事にしてみたいなと思います。