食べログのソフトウェアテスト自動化デザインパターン（ダイジェスト版）

食べログのソフトウェアテスト自動化デザインパターン（ダイジェスト版）

Transcript

1. © Kakaku.com Inc. All Rights Reserved. 1 ⾷べログのソフトウェアテスト⾃動化 デザインパターン (ダイジェスト版) 株式会社カカクコム ⾷べログシステム本部 技術部 Developer Productivityチーム hagevvashi 2022年04⽉21-22⽇
2. © Kakaku.com Inc. All Rights Reserved. 2 ⽬次 1. ⾷べログのソフトウェアテスト⾃動化 デザインパターン概要 2. ⾷べログのテスト⾃動化基盤 3. パターン詳細 4. 参考⽂献・クレジット
3. © Kakaku.com Inc. All Rights Reserved. 3 ⽬次 1. ⾷べログのソフトウェアテスト⾃動化 デザインパターン概要 2. ⾷べログのテスト⾃動化基盤 3. パターン詳細 4. 参考⽂献・クレジット
4. © Kakaku.com Inc. All Rights Reserved. 4 ⾷べログのソフトウェアテスト⾃動化デザインパターン概要 ゆもつよ メソッド テスト観点表のセルで 並列実⾏ 選べる テスト実⾏単位 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
5. © Kakaku.com Inc. All Rights Reserved. 5 ⽬次 1. ⾷べログのソフトウェアテスト⾃動化 デザインパターン概要 2. ⾷べログのテスト⾃動化基盤 3. パターン詳細 4. 参考⽂献・クレジット
6. © Kakaku.com Inc. All Rights Reserved. 6 ⾷べログのテスト⾃動化基盤1
7. © Kakaku.com Inc. All Rights Reserved. 7 ⾷べログのテスト⾃動化基盤2 プロダクト SCM メッセージ キュー ⾃動 デプロイ 要求 テスト ⾃動化基盤 ⾃動デプロイ マネージャ ⾃動 テスト 実⾏要求 デプロイ 要求 待ち受け 認証プロキシ テスト環境 ⾃動 デプロイ 実⾏ ⾃動 テスト 実⾏ Internal Network プロジェクト ソースコード 変更 ※1 ※2 ※3 ※4
8. © Kakaku.com Inc. All Rights Reserved. 8 ⾷べログのテスト⾃動化基盤3 テスト ランナー ブラウザ操作 ⾃動化 ツール ブラウザ リクエスト 振り分け Proxy 認証情報 付与 Proxy 外部ドメインへの リクエスト （広告・計測 etc） 認証 プロキシ 認証情報 付与済み テスト環境への リクエスト Feature Step Page Object テスト観点表 テスト 環境 ⾃動テスト 実⾏要求 SET テスト⾃動化基盤 Chrome™ Microsoft Edge ※5
9. © Kakaku.com Inc. All Rights Reserved. 9 ⽬次 1. ⾷べログのソフトウェアテスト⾃動化 デザインパターン概要 2. ⾷べログのテスト⾃動化基盤 3. パターン詳細 4. 参考⽂献・クレジット
10. © Kakaku.com Inc. All Rights Reserved. 10 パターン概要1: ⼿動テストと同じくらいフレキシブルなテスト実⾏ Feature foo @AAA Scenario xxxx Given xxxx When xxxx Then xxxx @BBB Scenario xxxx Given xxxx When xxxx Then xxxx @CCC Scenario xxxx Given xxxx When xxxx Then xxxx Feature bar @AAA Scenario xxxx Given xxxx When xxxx Then xxxx @BBB Scenario xxxx Given xxxx When xxxx Then xxxx @CCC Scenario xxxx Given xxxx When xxxx Then xxxx job job job job job ゆもつよメソッド 選べるテスト実⾏単位 テスト観点表のセルで並列実⾏ deploy test ユースケース 凡例 テスト条件 シナリオ テスト観点表 CucumberのFeatureファイル （テストスクリプト） ・テストの実⾏単位をユースケース、テスト条件でフレキシブルに選択できる ・テスト観点表のセルで並列実⾏することで、10分以内にテストが完了する タグ
11. © Kakaku.com Inc. All Rights Reserved. 11 パターン概要2: 容易なテスト実装、変更に強いフレームワーク設計 Feature Step World Page Object Component Object 責務: ◦ページが受け付ける ブラウザ操作 責務: ◦テスト⼿順を実⾏コードに変換 ✖テスト⼿順と振る舞い ✖ページが受け付けるブラウザ操作 ✖UIパーツが受け付けるブラウザ操作 ✖ライブラリ依存分の集約 責務: ◦UIパーツが受け付ける ブラウザ操作 責務: ◦ライブラリ依存部分の集約 責務: ◦テスト⼿順と振る舞い Step の責務からページやUIパーツ、ライブラリ依存の責務を別のオブジェクトに分割
12. © Kakaku.com Inc. All Rights Reserved. 12 パターン概要3: 安定したテストのためのテストケース⾃動化設計 JSONデータ駆動テスト StepにWait処理を書かない ログアウトタグ When 都道府県を<都道府県>に設定して検索 Examples: | 都道府県 | | 東京都 | ⁝ When ジャンルを<ジャンル>に設定して検索 Examples: | ジャンル | | 和⾷ | 異なるテスト⼊⼒毎に、 別のテスト⼿順を⽤意 When 検索条件を<検索条件>に設定して検索 Examples: | 検索条件 | | ʼ{ “都道府県”: “東京都” }ʼ | | ʻ{ “ジャンル”: “和⾷” }ʼ | After Before Scenario Outline: ネット予約する Given ログイン状態である When ネット予約する Then 予約の条件が<期待結果>である And ログアウトする Before After Before After JSONデータによって異なるテスト ⼊⼒のテスト⼿順を共通化 Wait処理の実装忘れを防ぎ、テストの 安定性を向上 Featureに事後条件を書かずに済み、 テストの⼿順が⾒やすくなる 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処理を忘れると、ブラウザがクラッ シュしたりする 勝⼿に要素の表⽰を待ってくれる @logout Scenario Outline: ネット予約する Given ログイン状態である When ネット予約する Then 予約の条件が<期待結果>である 全部のシナリオでログアウトさせたい わけではない
13. © Kakaku.com Inc. All Rights Reserved. 13 パターン概要4: 柔軟なネットワーク設定を可能にするインフラ設計 ブラウザ リクエスト 振り分け Proxy 認証情報 付与 Proxy 外部ドメインへの リクエスト （広告・計測 etc） 認証 プロキシ 認証情報 付与済み テスト環境への リクエスト テスト 環境 Chrome™ Microsoft Edge 課題: ⾃動テストからプロキシの例外設定・認証情報の 設定ができない 本来やりたかったこと: ブラウザの設定で、リクエストの振り分けとプロキシ の認証情報の付与 解決策: browsermob-proxyなどでプロキシサーバを⽴て、 リクエストの振り分け・認証情報の付与を⾏う 結果: 社内のSaasから社内のテスト環境にテストでき るようになった ⼿動テストの場合は、 OSの設定でプロキシの認証情報を設定可能
14. © Kakaku.com Inc. All Rights Reserved. 14 ⽬次 1. ⾷べログのソフトウェアテスト⾃動化 デザインパターン概要 2. ⾷べログのテスト⾃動化基盤 3. パターン詳細 4. 参考⽂献・クレジット
15. © Kakaku.com Inc. All Rights Reserved. 15 参考⽂献 ・湯本 剛 『ゆもつよメソッドによるテスト分析の 成り⽴ちと狙い』 (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
16. © Kakaku.com Inc. All Rights Reserved. 16 クレジット ※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.
17. © Kakaku.com Inc. All Rights Reserved. 17 付録
18. © Kakaku.com Inc. All Rights Reserved. 18 パターン関係図 ゆもつよ メソッド テスト観点表のセルで 並列実⾏ 選べる テスト実⾏単位 Page Object 賢すぎない Page Object データ駆動 テスト JSONデータ駆動 テスト Component Object Browser Automation API Wrapper StepにWait処理を 書かない テスト⾃動化で アクセシビリティ向上 アトミックな デプロイとテストの実⾏ ログインユーザのプール メンテナビリティ ファースト ⽣産性の実証 ACL Proxy Blackhole Proxy 振り分け プロキシ Credential付与 プロキシ 実⾏環境単位で レポート出⼒ テスト成功率の しきい値95% メッセージ キューデプロイ ログアウトタグ テスト要求分析パターン ⾔語・ツール選定のパターン フレームワーク設計パターン アーキテクチャ設計パターン インフラ設計パターン パイプライン設計パターン テストケース⾃動化パターン