Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tsuemura
February 03, 2020

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

JaSST'20 Tokyo RejectCon

tsuemura

February 03, 2020
Tweet

More Decks by tsuemura

Other Decks in Technology

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