サポーターズのオンラインで開催されたE2Eテスト勉強会に参加して学んだことをまとめたのでアウトプットします。普段の開発や学生生活であまり体験することのないテスト工程について学べて触れることができました。
環境構築
作成するディレクトリでこのコードを作成していくつかの質問に答えると自動で作成されます。
npm init playwright@latest
このコードを入力するとUIモードが起動し、ウィンドウが開きます。
npx playwright test --ui
ソフトウェアテストとは
プログラムからバグを見つける作業。プログラム中の欠陥を修復することをデバッグという
なぜテストを書くのか
- 正常な動作を保証する
- 欠陥を発見する
- 健全なコードを継続的に維持する
- 欠陥の発生を未然に防ぐ
E2Eテストとは
end-to-end(E2E)
ユーザーの視点でウェブシステムの動作を確認するテスト
例）フロント、バック、DB
自動化すべきなのか？
投資対効果を意識して自動化することが望ましい
壊れにくいE2Eテストを作成する技術もある
playwrightとは
ブラウザ操作のAPI＋テスト関連の機能をオールインワンで提供するアプリケーション
- クロスブラウザ
- 堅牢で安定したテスト
- 制限のないテストシナリオ
- テストの完全な分離と高速化
- テスト作成とデバッグのための強力なツール
その他ツール
cypress
puppeteer
Nightwatch
テスト用API
ロケーター
- ページ内要素の特定
ナビゲーション - ページ遷移、ページ情報返却
アクション - ユーザ操作のシュミレート
マッチャー - 選択要素の状態と期待値の検証
ロケーター
ページ上の任意の要素を特定するモノ
page.getByRole()
- アクセシビリティ情報から要素を特定する
page.getByLabel() - HTMLフォーム要素のラベルテキストから要素を特定する
getByText() - HTML要素に含まれるテキストから要素を特定する
getByTestId()は使用すべきでない？
ソースコードを見ないとわからないから
最終手段として使う
CSSセレクタなども使用すべきでない
ナビゲーション
URLに関連するアクション
アクション
ロケーターで選択した要素に対して、キーボード操作やマウス操作を行うこと
- .fill()に入力
- .clear()でクリアする
- press()
キーストロークを作成する - pressSequentially()
フィールドに1文字ずつ入力する - check()
ロケーターで選択して - click()/dblclick()
クリックとダブルクリック
mouse.move( )/mouse.up( )/mouse.down( )
座標を指定してドラックアンドドロップを再現できる
マッチャー
選択した要素の状態と期待値の検証を行う
ボタン操作やリンク操作などの何らかのアクションに伴い、何らかの最終結果の表示を確認する
toChecked()
チェックボックスを確認する
toByEmpty()
要素が空かどう確認
.not
マッチャーの前につけると否定になる
何をテストするのか
メンテナンスコストも実行時間も大きいため、効果のないテストを増やすことはデメリットになる
「何をテストするのか」 を適切に決めることが大切
シナリオを考えるポイント
・コアとなる正常系のユーザーシナリオを考える
例）ログイン、投稿機能等
・ビジネス上影響の大きいユーザーシナリオを考える
例）会員登録、購入・課金等