WebアプリケーションE2Eテスト自動化3つの壁

JaSST'20 Tokyo RejectCon

Transcript

1. WebアプリケーションE2Eテスト⾃動化
   の3つの壁
   

   View Slide

2. ⾃⼰紹介
   末村 拓也(Takuya Suemura)
   ⽊村拓也じゃないよ
   QA / テスト⾃動化エンジニア
   というテスト⾃動化プラットフォームを作る会社で働いて
   います
   

   View Slide

3. https://autify.com/ja/
   

   View Slide

4. E2Eテスト⾃動化してますか？
   

   View Slide

5. 理想
   アサーションを⾃動化し、リグレッションの⾒落としを防げるようになる
   ⾃動化により⾼頻度で実⾏できるようになる
   BDD・ATDDで振る舞いを保護しながら安⼼して開発が出来る
   

   View Slide

6. 現実
   ⾃動化は進んだものの……
   バグを検知できない
   ⼿動でやればたくさんバグが⾒つかるのに……
   思ったより⾼頻度で実⾏できない
   実⾏速度が遅い
   どうでもいいところでコケまくる
   不安定不安定不安定不安定
   「また落ちてるな、リリース後に調べよう」
   →深刻な不具合
   

   View Slide

7. 3つの壁
   バグ検出
   実⾏速度
   安定性
   これらを解決するための技術を
   広く浅く紹介してみます
   →深く話したい⼈は懇親会で！
   

   View Slide

8. バグ検出
   

   View Slide

9. E2E⾃動テストで
   バグを⾒つけるのは難しい
   網羅性が低い（網羅しようとするとテストケース数が膨⼤になってし
   まう）
   アサーションが無いところでバグが出がち
   「⼈がやってた時はバグを⾒つけられたのに……」
   

   View Slide

10. どうやってバグを⾒つけるか？
    基本的には「広く浅く」調べるようにする
    スナップショットテスト
    ビジュアルリグレッションテスト
    実⾏時エラーの検知
    

    View Slide

11. 1. スナップショットテスト
    HTMLの差分を⽐較する⽅法
    引⽤元: https://jestjs.io/docs/en/snapshot-testing
    

    View Slide

12. 2. ビジュアルリグレッションテスト
    スクリーンショットを⽐較して差分を⽐較する⽅法
    Original Current
    引⽤元: https://codecept.io/visual/#using-resemble-helper
    

    View Slide

13. 引⽤元: https://codecept.io/visual/#using-resemble-helper
    

    View Slide

14. 3. 実⾏時エラーを検知する
    クライアントサイド(JavaScript)やサーバサイドのエラーを取得する⽅法
    Sentryなどのサービスを使うとJavaScriptやサーバサイドのエラーをま
    とめて補⾜できる
    本番環境で使っているものをステージングやQA環境でも使うと良
    い
    TestCafe など、JavaScriptの実⾏時エラーを検知するとテストを中
    ⽌する（失敗になる）フレームワークもある
    Seleniumはログ取得のためのAPIを廃⽌したっぽい、悲しい
    

    View Slide

15. 実⾏速度
    

    View Slide

16. E2Eテストの実⾏速度を早めるのは難しい
    実ブラウザを使う以上重い仕事になる
    要素の表⽰待ちなど暗黙の「待ち」が多い
    実⾏環境によってはネットワークレイテンシが強烈
    

    View Slide

17. アプローチ
    テストデータをAPIやコマンドで作る
    状態をキャッシュする
    並列実⾏
    

    View Slide

18. 1. テストデータをAPIやコマンドで作る
    テストデータもE2Eで作ってませんか？
    画⾯ A, B, C がある
    B, Cのテストをする前にAを操作しないといけない
    Aが動かない場合B, Cのテストができない
    

    View Slide

19. 1. テストデータをAPIやコマンドで作る
    APIを使う
    コマンドラインから任意のメソッドを実⾏する
    Railsでの例: bundle exec rails runner 任意のコマンド
    

    View Slide

20. 1. テストデータをAPIやコマンドで作る
    フロントエンド→バックエンドの通信部分だけを実⾏する
    F12 → Network タブ → Copy as fetch
    

    View Slide

21. 2. 状態をキャッシュする
    E2Eテストの実⾏はCookie, キャッシュなどが無いクリーンな環境で
    ⾏うのが定⽯
    しかしログインなどの処理を毎回E2Eでやるのは⾟い
    ⼀度ログインしSessionIDを保存しておけば後で使い回せる
    TestCafeにはUser Roleという機能があり、難しいことを考えず
    に↑のようなことが出来る
    

    View Slide

22. 3. 並列実⾏
    複数のマシン (or ブラウザ) で並列に実⾏させる
    https://www.browserstack.com/guide/selenium-grid-tutorial
    

    View Slide

23. 並列実⾏の注意点
    テストシナリオにべき等性を持たせる必要がある
    何度実⾏しても同じ結果になるようにする
    シナリオに順序を持たせてはいけない
    

    View Slide

24. コンテナによる並列実⾏環境を構築するためのOSS
    Chrome, FirefoxがインストールされたLinuxコンテナを必要に応じて⾃
    動で追加・削除してくれる
    Zalenium
    Selenoid
    商⽤サービスあり
    

    View Slide

25. 安定性
    

    View Slide

26. E2Eテストは不安定
    要素の表⽰待ち
    外部サービスのエラー
    通信環境
    

    View Slide

27. 筋⾁ リトライは全てを解決する
    

    View Slide

28. 1. 失敗したステップをリトライする
    要素の表⽰を賢く待つよりも、リトライさせたほうが様々なケースに対応
    できる
    ローディングスピナーが邪魔してクリックできない
    inputに⽂字⼊⼒できるようになるまでに時間がかかる
    URLが期待値に変わるまで時間がかかる
    ステップのリトライ回数を設定できる場合は設定しておくと吉
    

    View Slide

29. 2. 失敗したシナリオをリトライする
    外部サービスとの接続性などの問題で不安定になっている場合に有
    効
    規定の回数リトライし、⼀つでも成功すればOKとする
    ステップと同様、デフォルトリトライ回数を設定しておくと楽
    

    View Slide

30. 3. 不安定性を可視化する
    Allure Reporterでの例
    今までのテスト結果を全て保存しておき、失敗頻度が⾼いものに マー
    クが付く
    

    View Slide

31. いかがでしたか？
    

    View Slide

32. E2Eテスト難しいこと多すぎ問題
    

    View Slide

33. そう、難しいんだ
    ⾼レイヤーのテストになるほど時間とコストがかかる
    QAならみんな知ってるよね？
    E2Eでやらなくてもいいことはたくさんある
    まずは難しさを理解することが重要
    E2Eでしか出来ないことに注⼒しよう
    

    View Slide

34. （余談）E2E = UIではない
    レンダリング + JavaScript実⾏の検証だけなら必ずしもE2Eである必要
    はないかもしれない
    Playwright はつい最近Microsoftから発表されたChromium,
    Firefox, Webkitのテストをするためのツール
    AppliToolsのUltrafast Gridは任意のページのDOMスナップショッ
    トを複数のブラウザでレンダリングし⽐較する
    UIテストが実機の縛りを抜け、E2Eテストの責務を減らし、シンプルに実
    現できるようになる
    

    View Slide

35. 3つの壁
    バグ検出
    実⾏速度
    安定性
    

    View Slide

36. 壁を乗り越えた先は
    ⾼速・⾼頻度で実⾏されるテスト
    広範囲でバグを検出できるテスト
    安定動作するテスト
    

    View Slide

37. 難しいこともあるけど
    楽しく乗り越えていきましょう
    

    View Slide

38. Enjoy Testing!
    

    View Slide