Open5

『[入門]WebフロントエンドE2Eテスト』のメモ

K'K'

テストツールのカテゴリについて

以下の4つがある。

①ナビゲーション

Webサイトにアクセスするなどのページ遷移、ページ情報返却を行う役割

実装クラス

Page

②ロケーター

テキストボックスやボタンなど、ページ内の要素の特定を行う役割

実装クラス

Page, Locator

③アクション

ロケーターで特定した要素に対して操作をする役割
マウス・キーボード、選択、ドラッグアンドドロップなど

実装クラス

Locator

④マッチャー

ロケーターで特定した要素が「表示されている」「値を持っている」「チェックされている」などを確認する役割。一般的なアサーションに該当する

実装クラス

LocatorAssertions, PageAssertionsなど

K'K'

壊れにくいテスト

  • ドメインエキスパートにわかるように書かれたテストが壊れにくい
  • セマンティクスHTMLの情報を使ってテストを書く
    • ロケーターではgetByRoleを最優先で使うこと
      • ボタン、ラジオボタン、メニューなどのロール情報はユーザーにとってわかりやすい情報である
K'K'

テスティングトロフィー
アイスクリームコーン型はよくない
E2Eテストの最初の一歩として異常系を別途用意せずに一筆書きで表現するのは選択肢としてあり

K'K'

様々なFixtureがある
describe()でテストスイート化
setup, teardown的なメソッドももちろんある
意味のあるコメントは書くべき
E2Eテストでは順番を意識して管理するケースが多いのでファイル名の先頭に番号をつけて管理するのはあり
ビジュアルリグレッションテスト

K'K'

認証を伴うテスト

正攻法で毎回認証を挟むと処理時間が大幅に伸びる
対処方法としては以下がある

  1. 一度ログインしたら1つのテストケースでたくさんのテストを実行する
  2. フェイクの認証を用意して認証済みとみなす
  3. Cookieなどのセッション情報をテストをまたいで利用可能にする
  4. 一時的に認証を使わないモードを実装する

1はアンチパターン。極力小さいテストで独立させるのがよいので
2はテストのポータビリティがあがるのであり。3は正攻法。4もいいがフレームワークによって使い方が異なる

認証を使わないモード

Entra IDを使う。MSAL.jsライブラリが便利。JWTを作ればいい。

セッション情報を読み込んで使い回す

storageStateを使う