Cypressと始める,効果的なE2Eテスト

2021-5-8 12:00:10

最近,参画しているプロジェクトにて「E2E テストを書いていこう」という指針ができました.

E2E テストフレームワークとして選ばれたのは,知名度も高くポピュラーな「Cypress」です.

筆者自身,テストに興味を持っていたものの,現場での経験はありませんでした. なので,「効果的な E2E テスト を Cypress でどのように書くか」を学ぶ必要があります.

本記事では,以下の点に着目し,Web や書籍の情報をまとめます.

  • E2E テストの必要性
  • 効果的な E2E テストとは
  • Cypress で効果的な E2E テストを実践する方法

E2E テストの必要性

  • 手動テストのコスト削減
  • 変更による影響範囲の検知

効果的な E2E テスト

費用対効果の低いテストを量産しても,得られる価値は少なく,無駄が生まれてしまうだけだと思います. ここでは,Web 記事を参照し,テストコードのメンテナンスについて考えていきます.

メンテナンス

E2E テストコードのメンテナンス性に立ち向かう

  • メンテナンスしやすいことと,メンテナンスが不要であることは全く違うこと
  • ロケータの定義をとっても「何を保証するか」が極めて大きくテストに反映される
  • 不適切なロケータの定義は,メンテナンスコストを大きく増やしてしまう
  • E2E テストはユーザー目線で行われるものであり,要素の選択はユーザーと同じ基準で行われるべき」という思想に基づき,文言での要素選択を推進している
  • PageObjectPattern は運用がつらい.E2E テストの場合,そこまで再利用性は求められない

Cypress + TestRail による Frontend E2E テストの効率化について | メルカリエンジニアリング

  • メルペイでも Cypress を採用している
  • 役割分担
    • プロダクト開発エンジニア:単体テスト・統合テスト
    • QA エンジニア:リグレッションテスト
  • テストケースの管理を Google Sheets → TestRail へ移行
  • TestRail を用いて,テストケースの管理・テスト結果の集計と可視化を行っている

なぜ E2E テストで id を使うべきではないのか | Autify Blog

  • id の変更を伴う修正が困難になるため,使わないほうがよい

実践 Cypress

基本的に,公式ドキュメントを参照すればよいと思います.

最初に読んでおきたいドキュメント

簡訳ベストプラクティス

  • Organizing Tests, Logging In, Controlling State
    • スペックの分離、プログラムでのログイン、状態管理を行い,速くてスケーラブルなテストを書こう
  • Selecting Elements
    • data-*attributes を使ってセレクターに文脈を与え,CSS や JS の変更から分離しよう
    • cy.get('[data-cy=submit]').click() :変更から分離されている,この書き方が一番良い
  • Assigning Return Values
    • クロージャを利用して,コマンドから得られる情報にアクセス,保存しよう
    • Cypress にて,const,let,var を使うことはほとんど無いので,もし使っている場合はリファクタリングしたほうがよい
  • Visiting external sites
    • 自分でコントロールできるものだけをテストし,サードパーティのサーバーをできるだけ必要としないようにしよう
    • もし必要なら,cy.request()を利用して,API 通信を行う
  • Having tests rely on the state of previous tests
    • テストは常に、互いに独立して実行しても合格できるものであるべき
  • Creating "tiny" tests with a single assertion
    • 複数のアサーションを追加しても問題ない
  • Using after or afterEach hooks
    • afterafterEachは利用せず,beforebeforeEachで状態をクリーンアップする
  • Unnecessary Waiting
    • ルートエイリアスやアサーションを使用して、明示的な条件が満たされるまで Cypress の処理が進まないようにガードしよう
  • Web Servers
    • Cypress の実行前に Web サーバーを起動する
  • Setting a global baseUrl
    • 設定ファイル(デフォルトでは cypress.json)に baseUrl を設定する

参考文献