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

© Kakaku.com Inc. All Rights Reserved. 1
⾷べログのソフトウェアテスト⾃動化
デザインパターン
(ダイジェスト版)
株式会社カカクコム⾷べログシステム本部技術部
Developer Productivityチーム hagevvashi
2022年04⽉21-22⽇

View Slide

⽬次 1. ⾷べログのソフトウェアテスト⾃動化
デザインパターン概要
2. ⾷べログのテスト⾃動化基盤
3. パターン詳細
4. 参考⽂献・クレジット

View Slide


View Slide

⾷べログのソフトウェアテスト⾃動化デザインパターン概要
ゆもつよ
メソッド
テスト観点表のセルで
並列実⾏
選べる
テスト実⾏単位
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

View Slide

⽬次
1. ⾷べログのソフトウェアテスト⾃動化

View Slide

⾷べログのテスト⾃動化基盤1

View Slide

プロダクト
SCM
メッセージ
キュー
⾃動
デプロイ
要求
テスト
⾃動化基盤
⾃動デプロイ
マネージャ
⾃動
テスト
実⾏要求
デプロイ
要求
待ち受け
認証プロキシ
テスト環境
⾃動
デプロイ
実⾏
⾃動
テスト
実⾏
Internal Network
プロジェクト
ソースコード
変更
※1
※2
※3 ※4

View Slide

テスト
ランナー
ブラウザ操作
⾃動化
ツール
ブラウザ
リクエスト
振り分け
Proxy
認証情報
付与
Proxy
外部ドメインへの
リクエスト
（広告・計測 etc）
認証
プロキシ
認証情報
付与済み
テスト環境への
リクエスト
Feature Step Page Object
テスト観点表
テスト
環境
⾃動テスト
実⾏要求
SET
テスト⾃動化基盤
Chrome™
Microsoft
Edge
※5

View Slide

⽬次
1. ⾷べログのソフトウェアテスト⾃動化

View Slide

パターン概要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分以内にテストが完了する
タグ

View Slide

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

View Slide

パターン概要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 予約の条件が<期待結果>である
全部のシナリオでログアウトさせたい
わけではない

View Slide

パターン概要4: 柔軟なネットワーク設定を可能にするインフラ設計
ブラウザ
リクエスト
振り分け
Proxy
認証情報
付与
Proxy
外部ドメインへの
リクエスト
（広告・計測 etc）
認証
プロキシ
認証情報
付与済み
テスト環境への
リクエスト
テスト
環境
Chrome™
Microsoft
Edge
課題: ⾃動テストからプロキシの例外設定・認証情報の
設定ができない
本来やりたかったこと:
ブラウザの設定で、リクエストの振り分けとプロキシ
の認証情報の付与
解決策: browsermob-proxyなどでプロキシサーバを⽴て、
リクエストの振り分け・認証情報の付与を⾏う
結果: 社内のSaasから社内のテスト環境にテストでき
るようになった
⼿動テストの場合は、
OSの設定でプロキシの認証情報を設定可能

View Slide


View Slide

参考⽂献
・湯本剛『ゆもつよメソッドによるテスト分析の成り⽴ちと狙い』 (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

View Slide

クレジット
※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.

View Slide

付録

View Slide

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

View Slide

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

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

ハゲワシ

More Decks by ハゲワシ

Other Decks in Programming

Featured

Transcript