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

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

ハゲワシ
February 24, 2022

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

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

ハゲワシ

February 24, 2022
Tweet

More Decks by ハゲワシ

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  6. © Kakaku.com Inc. All Rights Reserved. 6
    ⾷べログのテスト⾃動化基盤1

    View full-size slide

  7. © Kakaku.com Inc. All Rights Reserved. 7
    ⾷べログのテスト⾃動化基盤2
    プロダクト
    SCM
    メッセージ
    キュー
    ⾃動
    デプロイ
    要求
    テスト
    ⾃動化基盤
    ⾃動デプロイ
    マネージャ
    ⾃動
    テスト
    実⾏要求
    デプロイ
    要求
    待ち受け
    認証プロキシ
    テスト環境
    ⾃動
    デプロイ
    実⾏
    ⾃動
    テスト
    実⾏
    Internal Network
    プロジェクト
    ソースコード
    変更
    ※1
    ※2
    ※3 ※4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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(/* 要素1を待つ */);
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  17. © Kakaku.com Inc. All Rights Reserved. 17
    付録

    View full-size slide

  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%
    メッセージ
    キューデプロイ
    ログアウトタグ
    テスト要求分析パターン ⾔語・ツール選定のパターン
    フレームワーク設計パターン
    アーキテクチャ設計パターン
    インフラ設計パターン
    パイプライン設計パターン
    テストケース⾃動化パターン

    View full-size slide