Open5
『[入門]WebフロントエンドE2Eテスト』のメモ
テストツールのカテゴリについて
以下の4つがある。
①ナビゲーション
Webサイトにアクセスするなどのページ遷移、ページ情報返却を行う役割
実装クラス
Page
②ロケーター
テキストボックスやボタンなど、ページ内の要素の特定を行う役割
実装クラス
Page, Locator
③アクション
ロケーターで特定した要素に対して操作をする役割
マウス・キーボード、選択、ドラッグアンドドロップなど
実装クラス
Locator
④マッチャー
ロケーターで特定した要素が「表示されている」「値を持っている」「チェックされている」などを確認する役割。一般的なアサーションに該当する
実装クラス
LocatorAssertions, PageAssertionsなど
壊れにくいテスト
- ドメインエキスパートにわかるように書かれたテストが壊れにくい
- セマンティクスHTMLの情報を使ってテストを書く
- ロケーターではgetByRoleを最優先で使うこと
- ボタン、ラジオボタン、メニューなどのロール情報はユーザーにとってわかりやすい情報である
- ロケーターではgetByRoleを最優先で使うこと
テスティングトロフィー
アイスクリームコーン型はよくない
E2Eテストの最初の一歩として異常系を別途用意せずに一筆書きで表現するのは選択肢としてあり
様々なFixtureがある
describe()でテストスイート化
setup, teardown的なメソッドももちろんある
意味のあるコメントは書くべき
E2Eテストでは順番を意識して管理するケースが多いのでファイル名の先頭に番号をつけて管理するのはあり
ビジュアルリグレッションテスト
認証を伴うテスト
正攻法で毎回認証を挟むと処理時間が大幅に伸びる
対処方法としては以下がある
- 一度ログインしたら1つのテストケースでたくさんのテストを実行する
- フェイクの認証を用意して認証済みとみなす
- Cookieなどのセッション情報をテストをまたいで利用可能にする
- 一時的に認証を使わないモードを実装する
1はアンチパターン。極力小さいテストで独立させるのがよいので
2はテストのポータビリティがあがるのであり。3は正攻法。4もいいがフレームワークによって使い方が異なる
認証を使わないモード
Entra IDを使う。MSAL.jsライブラリが便利。JWTを作ればいい。
セッション情報を読み込んで使い回す
storageStateを使う