サポーターズのオンラインで開催されたE2Eテスト勉強会に参加して学んだことをまとめたのでアウトプットします。普段の開発や学生生活であまり体験することのないテスト工程について学べて触れることができました。

環境構築

作成するディレクトリでこのコードを作成していくつかの質問に答えると自動で作成されます。

npm init playwright@latest

このコードを入力するとUIモードが起動し、ウィンドウが開きます。

npx playwright test --ui

ソフトウェアテストとは

プログラムからバグを見つける作業。プログラム中の欠陥を修復することをデバッグという

end-to-end(E2E)
ユーザーの視点でウェブシステムの動作を確認するテスト
例）フロント、バック、DB

投資対効果を意識して自動化することが望ましい
壊れにくいE2Eテストを作成する技術もある

ブラウザ操作のAPI＋テスト関連の機能をオールインワンで提供するアプリケーション

その他ツール
cypress
puppeteer
Nightwatch

ロケーター

ページ上の任意の要素を特定するモノ

page.getByRole()

getByTestId()は使用すべきでない？
ソースコードを見ないとわからないから
最終手段として使う
CSSセレクタなども使用すべきでない

URLに関連するアクション

ロケーターで選択した要素に対して、キーボード操作やマウス操作を行うこと

mouse.move( )/mouse.up( )/mouse.down( )
座標を指定してドラックアンドドロップを再現できる

選択した要素の状態と期待値の検証を行う
ボタン操作やリンク操作などの何らかのアクションに伴い、何らかの最終結果の表示を確認する
toChecked()
チェックボックスを確認する
toByEmpty()
要素が空かどう確認
.not
マッチャーの前につけると否定になる

メンテナンスコストも実行時間も大きいため、効果のないテストを増やすことはデメリットになる
「何をテストするのか」 を適切に決めることが大切

・コアとなる正常系のユーザーシナリオを考える
例）ログイン、投稿機能等
・ビジネス上影響の大きいユーザーシナリオを考える
例）会員登録、購入・課金等