【Test Engineers Meetup #4】食べログのソフトウェアテスト自動化デザインパターン

by ハゲワシ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

© Kakaku.com Inc. All Rights Reserved. 5 はじめに今⽇の話・テスト⾃動化で気をつけるポイント・パターン化した解決策の紹介背景: QA専⾨組織の不在⾷べログではリリースから17年間開発者が開発とQAをしてきた課題: テスト負担の増加・コード修正後のフィードバックが遅い・テストが再利⽤できない解決: テスト⾃動化環境の専有、デプロイ、テスト実⾏などテストに必要なアクションをコード化テスト実⾏毎にテスト結果が同⼀かテストケースの追加は簡単かテスト⾃動化で気をつけるポイント 3選最初から成功率100%を⽬指してないか

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© Kakaku.com Inc. All Rights Reserved. 9 ⾷べログのソフトウェアテスト⾃動化デザインパターン概要ゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Black Hole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンパイプライン設計パターンテストケース⾃動化パターンインフラ設計パターン課題テスト⾃動化の⽬的の早期のフィードバック、テストの再利⽤の品質が低いパターン適⽤後の結果 • コード修正後20分以内のフィードバック • 1⽇10回実⾏して成功率90% • 要件追従が2、3⽇でできる凡例パターンパターン⾷べログオリジナルデザインパターン引⽤デザインパターン適⽤順序 A B

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© Kakaku.com Inc. All Rights Reserved. 13 ⾷べログのテスト⾃動化基盤テストランナーブラウザ操作⾃動化ツールブラウザリクエスト振り分け Proxy 認証情報付与 Proxy 外部ドメインへのリクエスト（広告・計測 etc）認証プロキシ認証情報付与済みテスト環境へのリクエスト Feature Step Page Object テスト観点表テスト環境⾃動テスト実⾏要求 SET テスト⾃動化基盤 Chrome™ Microsoft Edge ※5 ゆもつよメソッド Internal Network Internet

Slide 14

Slide 14 text

© Kakaku.com Inc. All Rights Reserved. 14 Cucumberとは Cucumberとは: BDDをサポートしているテスティングフレームワーク特徴: ⾃然⾔語でテストをプログラムできるメリット: ・開発者以外にも分かりやすい・⽣きた仕様ドキュメントとなる構成要素: Featureファイル Stepファイル・Featureファイル →要求仕様やテスト⼿順を⾃然⾔語で表現したもの →Given(事前条件),When(テスト条件),Then(期待結果) を⽤いて表現する・Stepファイル →Featureファイルで表現された要求仕様やテスト⼿順をプログラミング⾔語で実装したもの →Given,When,Thenに書かれた⾃然⾔語にマッチさせて実装するマッチ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© Kakaku.com Inc. All Rights Reserved. 17 本⽇ご紹介するパターンゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Black Hole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンパイプライン設計パターンテストケース⾃動化パターンインフラ設計パターン ① ② ③ ① いきなり100%を⽬指さない ② 容易なテスト実装、変更に強いフレームワーク設計 ③ 安定したテストのためのテストケース⾃動化設計

Slide 18

Slide 18 text

© Kakaku.com Inc. All Rights Reserved. 18 パターン概要1: いきなり100%を⽬指さないゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Black Hole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンパイプライン設計パターンテストケース⾃動化パターンインフラ設計パターンコンテキストさぁテスト⾃動化をはじめようパターン適⽤後の結果 ROIの⾼い⾃動テスト開発 ※ありがちなテスト⾃動化失敗の例最初から100%にこだわるとテスト⾃動化が原因で開発の⽣産性が低下することもある

Slide 19

Slide 19 text

Slide 20

Slide 20 text

© Kakaku.com Inc. All Rights Reserved. 20 「テスト成功率95%から改善する」仕組み: テスト⾃動化品質ダッシュボード低失敗率 CircleCIのinsightsより ※モニタリングにはCircleCIのstore_test_results APIを使⽤ https://circleci.com/docs/2.0/collect-test-data/ 特徴 • 過去のテストの統計データを可視化 • テストのStep数の推移 • 実⾏ごとのテスト失敗率 • テスト実⾏時間 • 過去の全てのテスト実施結果からテスト失敗率を計算、可視化 • テスト失敗率に基づいて Stepをソートして可視化メリット Flaky Testの特定が簡単にできる

Slide 21

Slide 21 text

© Kakaku.com Inc. All Rights Reserved. 21 パターン概要2: 容易なテスト実装、変更に強いフレームワーク設計ゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Black Hole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンパイプライン設計パターンテストケース⾃動化パターンインフラ設計パターンコンテキスト要求分析、ツール選定、アーキテクチャ設計が完了し、⾃動テストのデモができているパターン適⽤後の結果効率的にテストを保守できるようになっている

Slide 22

Slide 22 text

© Kakaku.com Inc. All Rights Reserved. 22 パターン概要2: 容易なテスト実装、変更に強いフレームワーク設計 Feature Step World Page Object Component Object 責務: ○ページが受け付けるブラウザ操作責務: ○テスト⼿順を実⾏コードに変換 ✖テスト⼿順と振る舞い ✖ページが受け付けるブラウザ操作 ✖UIパーツが受け付けるブラウザ操作 ✖ライブラリ依存部分の集約責務: ○UIパーツが受け付けるブラウザ操作責務: ○ライブラリ依存部分の集約責務: ○テスト⼿順と振る舞い Step の責務からページやUIパーツ、ライブラリ依存の責務を別のオブジェクトに分割 Chrome™ ブラウザ操作テストアクション

Slide 23

Slide 23 text

© Kakaku.com Inc. All Rights Reserved. Step 23 Browser Automation API Wrapper コンテキスト: ブラウザ操作を⾃動化するテストでは、テストアクションに機能追加したいことが多い課題: ブラウザ操作⾃動化ライブラリに機能追加が簡単にできない解決: Wrapperオブジェクトを⽤意することで、テストアクションに機能を追加する結果: アクションが1つの箇所に集まり、⾒つけやすく、変更しやすく、DRYになる World focus screenshot click Step Before After focus click screenshot focus click screenshot focus click screenshot テストアクション click wrapper Wrapper 凡例

Slide 24

Slide 24 text

© Kakaku.com Inc. All Rights Reserved. 24 Page Object / Component Object 課題: 画⾯仕様の変更の際に、ありとあらゆる要素を保守変更する必要がある原因: ページ、UIパーツ固有のブラウザ操作の実装が分散してしまっている ①要素の特定 ③要素の特定 ④クリック ②ホバー ⑥クリック ⑤要素の特定 Step ① ⑤ ③ ① ⑤ ③ ① ⑤ ③ ① ⑤ ③ ① ⑤ ③ 画⾯仕様変更の際変更箇所が多い

Slide 25

Slide 25 text

© Kakaku.com Inc. All Rights Reserved. 25 Page Object / Component Object 解決: ページ、UIパーツ固有の情報を集約したオブジェクトを⽤意 ①サイドナビからエリアで検索 ②並び順が⼀番⽬の店舗の詳細ページに遷移 Step 結果: 画⾯仕様の変更時に対象オブジェクトを修正するのみで、済むようになった Page Object Component Object

Slide 26

Slide 26 text

© Kakaku.com Inc. All Rights Reserved. 26 パターン概要3: 安定したテストのためのテストケース⾃動化設計ゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Black Hole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンパイプライン設計パターンテストケース⾃動化パターンインフラ設計パターンコンテキストフレームワーク設計が完了し、効率的にテストを保守できるようになっているパターン適⽤後の結果 Flakyテストを減らし、安定したテスト実装ができるようになる

Slide 27

Slide 27 text

© Kakaku.com Inc. All Rights Reserved. 27 パターン概要3: 安定したテストのためのテストケース⾃動化設計 JSONデータ駆動テスト StepにWait処理を書かないログインタグ When 都道府県を<都道府県>に設定して検索 Examples: | 都道府県 | | 東京都 | ⁝ When ジャンルを<ジャンル>に設定して検索 Examples: | ジャンル | | 和⾷ | 異なるテスト⼊⼒毎に、別のテスト⼿順を⽤意 When 検索条件を<検索条件>に設定して検索 Examples: | 検索条件 | | ʼ{ “都道府県”: “東京都” }ʼ | | ʻ{ “ジャンル”: “和⾷” }ʼ | After Before Feature: ネット予約 @reservation @login Scenario Outline: ネット予約する Given ログイン状態である Given xxページにいる When xxページでネット予約する Then 予約の条件がxxである Before After Before After JSONデータによって異なるテスト⼊⼒のテスト⼿順を共通化 Wait処理の実装忘れを防ぎ、テストの安定性を向上事前条件で絞り込めるようになる When(“xxxx”, async function() { const page = new RestaurantPage(); await this.driver.wait(/* 要素１を待つ */); page.menu.doSomething(); await this.driver.wait(/* 要素2を待つ */); }); When(“xxxx”, async function() { const page = await this.getPage(“レストランページ”); await page.menu.doSomething(); }); Wait処理を忘れると、ブラウザがクラッシュしたりする勝⼿に要素の表⽰を待ってくれる Feature: ネット予約 @reservation @login Scenario Outline: ネット予約する Given xxページにいる When xxページでネット予約する Then 予約の条件がxxである事前条件で絞り込めると便利タグのみになると更に便利

Slide 28

Slide 28 text

© Kakaku.com Inc. All Rights Reserved. 28 JSONデータ駆動テスト課題: その制限に対するワークアラウンドとして、似たようなStep関数を量産してしまうコンテキスト: ⼀般的なデータ駆動テストで⽤いられる 2次元の表形式では、テンプレートから柔軟な表現ができないという制限がある解決: テストの⼊⼒値と期待結果は json（オブジェクト）で表現する結果: データの種類の追加削除の際に、テスト⼿順の変更をせずに済む検索条件が増えたらWhenやThenのパターンが増える 2次元の表形式ではパターンの増減に対応できない JSON構造で表現することでパターンの増減に対応検索条件が増えてもWhenやThenのパターンは増えない

Slide 29

Slide 29 text

© Kakaku.com Inc. All Rights Reserved. 29 StepにWait処理を書かない課題: Flaky Testを避けるための要素表⽰を待つ処理がバラバラに実装されてしまう解決: ページオブジェクトやコンポーネントオブジェクトで要素表⽰を待つ実装をする結果: 表⽰を待つ処理の実装漏れによる Flaky Testの作り込みを防げる StepファイルページオブジェクトページオブジェクトFactory コンポーネントオブジェクト要素表⽰を待つ処理

Slide 30

Slide 30 text

© Kakaku.com Inc. All Rights Reserved. 30 ログインタグ課題: Cucumberでは実⾏単位が Featureファイルであり、 Featureファイルをまたいだ事前条件などで絞り込みができない解決: 事前条件をタグとして設定する結果: 事前条件で絞り込みができるようになった事前条件で絞り込みできると便利タグのみになると更に便利タグでログイン・ログアウトを実装 Given, After でログイン・ログアウトを実装

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© Kakaku.com Inc. All Rights Reserved. 34 参考⽂献・湯本剛『ゆもつよメソッドによるテスト分析の成り⽴ちと狙い』 (2020) http://jasst.jp/symposium/jasst20kansai/pdf/S5.pdf ・Dima Kovalenko. Selenium Design Patterns and Best Practices. (ディマ・コヴァレンコ⽟川紘⼦・太⽥健⼀郎(監訳)、笹井崇司(訳). Seleniumデザインパターン & ベストプラクティス株式会社オライリー・ジャパン) (2015) ・Graham Dorothy, Fewster Mark. Software Test Automation. (フュースター・マーク、グラハム・ドロシーテスト⾃動化研究会(訳). システムテスト⾃動化標準ガイド株式会社翔泳社) (2014) ・Vaughn Vernon. Implementing domain-driven design. (ボーン・ヴァーノン⾼⽊正弘(訳). 実践ドメイン駆動設計 : エリック・エヴァンスが確⽴した理論を実際の設計に応⽤する株式会社翔泳社) (2015) ・渋川よしき『アクセシビリティ情報を使った壊れにくいE2Eテスト』 (2021) https://docs.google.com/presentation/d/e/2PACX- 1vShjxNOc81VhSwY5vDmH2pY6Opc05ZJuY3aemnQ0dmLc10ppBYxJYfKK9DcHLVxp_dQ0u6FUgaL_I_o/em bed

Slide 35

Slide 35 text

© Kakaku.com Inc. All Rights Reserved. 35 クレジット ※3 Cucumber is a registered trademark of Cucumber Ltd. ※2 Squid NOW icon - copyright Squid Project ※1 Jenkins® is a registered trademark of LF Charities Inc. ※5 Mozilla、Firefoxの商標およびロゴは、Mozilla Foundationの⽶国およびその他の国における登録商標または商標です。 ※4 Selenium is a registered trademark of Software Freedom Conservancy, Inc.

Slide 36

Slide 36 text

Slide 37

Slide 37 text

© Kakaku.com Inc. All Rights Reserved. 37 パターン関係図ゆもつよメソッドテスト観点表のセルで並列実⾏選べるテスト実⾏単位 Page Object 賢すぎない Page Object データ駆動テスト JSONデータ駆動テスト Component Object Browser Automation API Wrapper StepにWait処理を書かないテスト⾃動化でアクセシビリティ向上アトミックなデプロイとテストの実⾏ログインユーザのプールメンテナビリティファースト⽣産性の実証 ACL Proxy Blackhole Proxy 振り分けプロキシ Credential付与プロキシ実⾏環境単位でレポート出⼒テスト成功率のしきい値95% メッセージキューデプロイログインタグテスト要求分析パターン⾔語・ツール選定のパターンフレームワーク設計パターンアーキテクチャ設計パターンインフラ設計パターンパイプライン設計パターンテストケース⾃動化パターン