はじめに
こんにちは、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' ]といったように複数を指定することも可能です。
おわりに
というわけで、これらがわかれば最低限テストケースを作って画面操作してみる、ということはできるはずです。
テストと言いつつアサーションには触れられていませんが、そちらはまたもう少し理解できたら、いずれ記事にしてみたいなと思います。
