Slide 1

Slide 1 text

FlutterKaigi 2023 株式会社サイバーエージェント ⻑⽥ 卓⾺ Flutter アプリにおける テスト戦略の⾒直しと⾃動テストの導⼊

Slide 2

Slide 2 text

FlutterKaigi 2023 2 ⾃⼰紹介 ⻑⽥ 卓⾺ 株式会社サイバーエージェント 21年度新卒⼊社 Flutter Engineer マイブームはバズレシピ系 YouTuber の動画⾒ながらの料理 • GitHub ID: ostk 0 0 6 9 • X ID: ostk 0 0 6 9

Slide 3

Slide 3 text

FlutterKaigi 2023 3 プロダクト紹介

Slide 4

Slide 4 text

FlutterKaigi 2023 4 プロダクト紹介

Slide 5

Slide 5 text

FlutterKaigi 2023 5 本⽇のゴール WINTICKET での⾃動テストの導⼊プロセスを理解し いつでもプロダクトに⾃動テストの導⼊できる状態に 💪

Slide 6

Slide 6 text

FlutterKaigi 2023 6 AGENDA 1. モバイルアプリのテスト戦略の⾒直しと⾃動テスト導⼊決定まで 2. ⾃動テストの導⼊期について 3. ⾃動テストのシナリオ拡張期‧運⽤期について 4. ⾃動テストを安定するまで運⽤してみて

Slide 7

Slide 7 text

FlutterKaigi 2023 7 1. モバイルアプリのテスト戦略の ⾒直しと⾃動テスト導⼊決定まで 1. テスト戦略⾒直しの背景 2. 既存のテスト体制を把握する 3. 過去のインシデントから改善点を把握する

Slide 8

Slide 8 text

FlutterKaigi 2023 8 1.1. テスト戦略⾒直しの背景

Slide 9

Slide 9 text

FlutterKaigi 2023 9 1.1. テスト戦略⾒直しの背景 テスト戦略を考える上で、プロダクトの性質や、 チームの体制、QA / QC の状態を理解することが⾮常に⼤切 ⚠

Slide 10

Slide 10 text

FlutterKaigi 2023 WINTICKET の歴史 1 0 1.1. テスト戦略⾒直しの背景 現在 2 0 2 3 / 1 1 2 0 2 3 2 0 2 2 2 0 2 3 / 3 iOS リプレース 2 0 2 2 / 3 Android リプレース TWA → →

Slide 11

Slide 11 text

FlutterKaigi 2023 1 1 1.1. テスト戦略⾒直しの背景 👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 機能開発チーム SREチーム アプリチーム 機能開発をメインに担当 CI/CDや基盤など 機能開発以外を担当

Slide 12

Slide 12 text

FlutterKaigi 2023 1 2 1.1. テスト戦略⾒直しの背景 👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 機能開発チーム SREチーム アプリチーム 機能開発をメインに担当 CI/CDや基盤など機能開発以外を担当 SRE チームの 2023 年のミッション 「アプリの可⽤性を向上させる」 👨💻 👨💻 👨💻

Slide 13

Slide 13 text

FlutterKaigi 2023 1 3 1.1. テスト戦略⾒直しの背景 可⽤性とは... 可⽤性 (%) = 稼働時間 / (停⽌時間 + 稼働時間) 停⽌時間 (h) = 平均修復時間* x 3 6 5 ⽇ x 2 4 時間 / 平均故障間隔* 平均修復時間 = 停⽌時間の合計 / 失敗の回数 平均故障間隔 = 稼働時間の合計 / 失敗の回数

Slide 14

Slide 14 text

FlutterKaigi 2023 1 4 1.1. テスト戦略⾒直しの背景 2022 年の状況 • 変更障害率: 7.5 % (3/40) • 平均停⽌時間: 4.0 ⽇ • 可⽤性: 96.8 %

Slide 15

Slide 15 text

FlutterKaigi 2023 1 5 1.1. テスト戦略⾒直しの背景 2022 年の状況 • 変更障害率: 7.5 % (3/40) • 平均停⽌時間: 4.0 ⽇ • 可⽤性: 96.8 % 2023 年の⽬標 • 変更障害率: 5 % • 平均停⽌時間: 3.0 ⽇ • 可⽤性: 98.4 % →

Slide 16

Slide 16 text

FlutterKaigi 2023 ⽬標を達成するために 1 6 1.1. テスト戦略⾒直しの背景 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の⾒直しを実施する • リリース前に問題を検知できる体制づくり • 既存のテスト体制の⾒直しを実施する

Slide 17

Slide 17 text

FlutterKaigi 2023 ⽬標を達成するために 1 7 1.1. テスト戦略⾒直しの背景 本セッションではこちらはスキップ 📈 平均障害率を下げる 🕐 平均修復時間を下げる • リリース前に問題を検知できる体制づくり • 既存のテスト体制の⾒直しを実施する • リリース後に不具合を早期に検知したい • 既存のモニタリング体制の⾒直しを実施する

Slide 18

Slide 18 text

FlutterKaigi 2023 1 8 1.2. 既存のテスト体制を把握する テストピラミッドについて End to End Test Integration Test Unit Test Manual Test Manual Test: ⼿動で機能が正常に動くか End to End Test: シナリオを形成し、機能単位で 
 アプリケーションが期待通りに実⾏されるか Integration Test: 複数のユニットが期待通りに実⾏されるか Unit Test: 単⼀クラスや関数が期待通りに実⾏されるか

Slide 19

Slide 19 text

FlutterKaigi 2023 1 9 1.2. 既存のテスト体制を把握する WINTICKET の 2022 年 8 ⽉のテスト体制 End to End Test Integration Test Unit Test Manual Test Manual Test: QC、リリース前にアプリチームでの検証 End to End Test: 試験的に導⼊したシナリオがひとつ Integration Test: なし Unit Test: レイヤーによってカバレッジが⾼い箇所と 
 低い箇所が存在する

Slide 20

Slide 20 text

FlutterKaigi 2023 2 0 1.2. 既存のテスト体制を把握する 🤔 Unit Test の拡充を進めるか… E 2 E Test の拡充を進めるか… 全く新しい道を模索するか… (そんなものはあるのか…?)

Slide 21

Slide 21 text

FlutterKaigi 2023 2 1 1.2. 既存のテスト体制を把握する 🤔 Unit Test の拡充を進めるか… E 2 E Test の拡充を進めるか… 全く新しい道を模索するか… (そんなものはあるのか…?) 過去の障害事例から注⼒ポイントを⾒つける 👀

Slide 22

Slide 22 text

FlutterKaigi 2023 2 2 1.3. 過去のインシデントから改善点を把握する 2022 年に障害が起きた Pull Request を分別する(⼤⼩問わず 9 件からまとめたもの) 機能開発 依存更新 リファクタリング 不具合修正 概要 機能開発時に⾒つけられなかった 不具合や仕様の考慮漏れ Renovate や Dependabot による Package の依存更新時の不具合 既存のコードの改修から発⽣する不具合 既存からある機能の不具合の改修に伴う 副作⽤から発⽣する不具合 Feature Flag の利⽤ 発⽣件数 2 件 5 件 1 件 テスターによる 
 QC の有無 ✅ ❌ ❌ ❌ ✅ ✅ ❌ ❌ 1 件

Slide 23

Slide 23 text

FlutterKaigi 2023 2022 年に障害が起きた Pull Request を分別する(⼤⼩問わず 9 件からまとめたもの) 2 3 1.3. 過去のインシデントから改善点を把握する 機能開発 依存更新 リファクタリング 不具合修正 概要 機能開発時に⾒つけられなかった 不具合や仕様の考慮漏れ 既存のコードの改修から発⽣する不具合 既存からある機能の不具合の改修に伴う 副作⽤から発⽣する不具合 ✅ ❌ Feature Flag の利⽤ 発⽣件数 1 件 2 件 5 件 1 件 ❌ ❌ ✅ ✅ ❌ ❌ テスターによる 
 QC の有無 QC を実施しておらず、注⼒ポイントになりそう👊 Renovate や Dependabot による Package の依存更新時の不具合

Slide 24

Slide 24 text

FlutterKaigi 2023 起きた障害に対するテストの種別ごとに導⼊した際の効果 2 4 1.3. 過去のインシデントから改善点を把握する 機能開発 依存更新 リファクタリング 不具合修正 VRT - Unit Test Integration Test E 2 E Test - 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです 中 ⼩ 中 中 ⼩ 中 中 ⼩ ⼩ ⼩ ⼤ ⼤ ⼤ 中

Slide 25

Slide 25 text

FlutterKaigi 2023 起きた障害に対するテストの種別ごとに導⼊した際の効果 2 5 1.3. 過去のインシデントから改善点を把握する 機能開発 依存更新 リファクタリング 不具合修正 VRT ⼤ - Unit Test Integration Test E 2 E Test ⼤ ⼤ 中 - 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです 中 ⼩ 中 中 ⼩ ⼩ ⼩ 中 ⼩ 中 他のテスト⼿法よりも不具合防⽌の効果が⾼い📈

Slide 26

Slide 26 text

FlutterKaigi 2023 現在(2022 年 8 ⽉)と注⼒した場合の差分を挙げる 2 6 1.3. 過去のインシデントから改善点を把握する 現在の網羅率 追加コスト VRT Unit Test Integration Test E 2 E Test 5 0 % 追加時の効果 9 0 % ~ 0 % 5 % ⼩ ~ 中 ⼩ 中 ~ ⼤ 中 ~ ⼤ ⼤ ⼩ ⼩ ⼩ 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです

Slide 27

Slide 27 text

FlutterKaigi 2023 現在(2022 年 8 ⽉)と注⼒した場合の差分を挙げる 2 7 1.3. 過去のインシデントから改善点を把握する 現在の網羅率 追加コスト VRT Unit Test Integration Test E 2 E Test 追加時の効果 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです 5 0 % 9 0 % ~ 5 % ⼩ ~ 中 ⼩ 中 ~ ⼤ 中 ~ ⼤ ⼤ ⼩ ⼩ ⼩ 0 % 追加コストは⼤きいが、その分効果も期待できる💪

Slide 28

Slide 28 text

FlutterKaigi 2023 2 8 1.3. 過去のインシデントから改善点を把握する まとめ 次の理由から、E 2 Eテストの強化に注⼒する ✅ 他のテスト⼿法に⽐べ、問題が多く発⽣する箇所(依存性の更新、リファクタリング、バグ修正)への 対策が期待できる ✅ 追加コストは⾼いが、まだ網羅していない機能が多く、導⼊後の効果が⼤いに期待できる

Slide 29

Slide 29 text

FlutterKaigi 2023 2 9 2. ⾃動テストの導⼊期について 1. プロダクトに合うツール選定を⾏う 2. テスターによる⼿動テストとの差別化

Slide 30

Slide 30 text

FlutterKaigi 2023 3 0 2.1. プロダクトに合うツール選定を⾏う ⾃動テストのツールの種類 • SaaS ツールを利⽤する Eg: Autify for Mobile、MagicPod … • OSS ツールを利⽤する Eg: Appium、Maestro … • Plaform が提供しているツールを利⽤する Eg: integration_test、XCTest、Espresso …

Slide 31

Slide 31 text

FlutterKaigi 2023 3 1 2.1. プロダクトに合うツール選定を⾏う ⾃動テストのツールの⽐較 - Autify for Mobile ノーコードを使ったソフトウェアテスト⾃動化プラットフォーム。 https://autify.com/ja/mobile 2023 年 2 ⽉に Android に正式対応。プラットフォーム依存しないため、 
 Flutter 以外の iOS、Android、React Native での実⾏も可能。 
 社内での利⽤実績あり、WINTICKET でも Web で利⽤中。 
 選定にあたり、実際にトライアルで検証を⾏った。

Slide 32

Slide 32 text

FlutterKaigi 2023 3 2 2.1. プロダクトに合うツール選定を⾏う ⾃動テストのツールの⽐較 - Maestro シナリオ作成の⾔語として Yaml を採⽤したUIテストツール。 https://maestro.mobile.dev プラットフォーム依存しないため、Flutter 以外の iOS、 Android、React Native でも実⾏可能。 Yamlを採⽤することで、シンプルな記述でシナリオ作成が 可能となる。このツールは、"Maestro Cloud” と呼ばれる環境下で 実⾏可能。 ⚠ Maestro Cloud 上での実機での実⾏のサポートは現在なし

Slide 33

Slide 33 text

FlutterKaigi 2023 3 3 2.1. プロダクトに合うツール選定を⾏う ⾃動テストのツールの⽐較 - integration_test Flutter 公式から提供されるテストツールで、iOS の XCTest や Android のEspresso と同等の位置づけ。 https://docs. fl utter.dev/testing/integration-tests 記述はDartのみ可能。 初回のパフォーマンス向上を⽬的としたSkSL⽣成に、 実⾏シナリオを利⽤可能。

Slide 34

Slide 34 text

FlutterKaigi 2023 3 4 2.1. プロダクトに合うツール選定を⾏う ツールに求める要件 🚧 開発環境の画像になります MUST • 頻繁に状態がかわる UI への対応⼒ • 多種多様な環境での実⾏可能性 BETTER • エンジニアのシナリオ作成コストが低い • 運⽤にかかる費⽤が安い 💰

Slide 35

Slide 35 text

FlutterKaigi 2023 3 5 2.1. プロダクトに合うツール選定を⾏う WINTICKET がツールに求める要件 頻繁に状態がかわる UI への対応⼒ 多種多様な環境での実⾏可能性 エンジニアのシナリオ作成コストが低い 運⽤にかかる費⽤が安い Autify for Mobile Maestro integration_test 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです ❌ ✅ ✅ ❌ ❌ ✅ 🤔 ✅ ❌ ✅ ❌ ✅

Slide 36

Slide 36 text

FlutterKaigi 2023 3 6 2.1. プロダクトに合うツール選定を⾏う WINTICKET がツールに求める要件 頻繁に状態がかわる UI への対応⼒ エンジニアのシナリオ作成コストが低い 運⽤にかかる費⽤が安い Autify for Mobile ❌ Maestro integration_test 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです ❌ 🤔 ✅ ❌ ✅ ❌ ✅ ❌ ✅ ✅ ✅ 作成コストは⼤きいが、他の条件を満たしている✅ 多種多様な環境での実⾏可能性

Slide 37

Slide 37 text

FlutterKaigi 2023 3 7 2.1. プロダクトに合うツール選定を⾏う WINTICKET がツールに求める要件 頻繁に状態がかわる UI への対応⼒ 多種多様な実⾏環境での実⾏可能性 エンジニアのシナリオ作成コストが低い 運⽤にかかる費⽤が安い Autify for Mobile ❌ Maestro integration_test - 🚧 2022 年 8 ⽉当時の WINTICKET のアプリチーム独⾃の判断によるものです ❌ 🤔 ✅ ❌ ✅ ❌ ✅ ❌ ✅ ✅ ✅ 作成コストは⼤きいが、他の条件を満たしている✅ integration_test を⾃動テストのツールとして採⽤ 😎

Slide 38

Slide 38 text

FlutterKaigi 2023 3 8 2.2. テスターによる⼿動テストとの差別化 🧑💻 「E 2 E Test は⼿動 QC の⾃動化をゴールにやるんですか?」 A.「やりません🙅」

Slide 39

Slide 39 text

FlutterKaigi 2023 3 9 2.2. テスターによる⼿動テストとの差別化 WINTICKET の QC 体制 変更差分のない コード 依存 Package の更新 新機能の 
 コード アプリケーションコード全体 → → 開発 🧑💻 ✅ QC 実施 ❌ QC 実施なし ❌ QC 実施なし

Slide 40

Slide 40 text

FlutterKaigi 2023 4 0 2.2. テスターによる⼿動テストとの差別化 WINTICKET の QC 体制 変更差分のない コード 依存 Package の更新 新機能の 
 コード アプリケーションコード全体 → → 開発 🧑💻 ✅ QC 実施 ❌ QC 実施なし Flutter のバージョン更新、 FlutterFire や、RiverPod などの ⼤きな依存は全機能 QC を実施 ✅ ✅ QC 実施

Slide 41

Slide 41 text

FlutterKaigi 2023 4 1 2.2. テスターによる⼿動テストとの差別化 テスターによる⼿動テストとの差別化

Slide 42

Slide 42 text

FlutterKaigi 2023 4 2 2.2. テスターによる⼿動テストとの差別化 テスターによる⼿動テストとの差別化 変更差分のない コード 依存 Package の更新 新機能の 
 コード アプリケーションコード全体 → → 開発 🧑💻 ✅ QC 実施 ❌ QC 実施なし ❌ QC 実施なし

Slide 43

Slide 43 text

FlutterKaigi 2023 4 3 2.2. テスターによる⼿動テストとの差別化 テスターによる⼿動テストとの差別化 変更差分のない コード 依存 Package の更新 新機能の 
 コード アプリケーションコード全体 → → 開発 🧑💻 ✅ QC 実施 ✅ E 2 E Test でカバーする

Slide 44

Slide 44 text

FlutterKaigi 2023 4 4 2.2. テスターによる⼿動テストとの差別化 メリット • 新機能開発のリソースを⾃動テストのシナ リオ作成でひっ迫させない • ⾃動テストによる精度の限界を 
 ⼿動テストでカバー デメリット • シナリオ作成を忘れてしまう • ⾃動テストでテスターさんの 
 検証コストをカバーできていない

Slide 45

Slide 45 text

FlutterKaigi 2023 4 5 2.2. テスターによる⼿動テストとの差別化 メリット • 新機能開発のリソースを⾃動テストのシナ リオ作成でひっ迫させない • ⾃動テストによる精度の限界を 
 ⼿動テストでカバー デメリット • シナリオ作成を忘れてしまう • ⾃動テストでテスターさんの 
 検証コストをカバーできていない フロー化することでカバー ⾃動テストの精度がテスターさんによる 
 ⼿動検証の精度を上回るのは無理だと判断

Slide 46

Slide 46 text

FlutterKaigi 2023 4 6 2.2. テスターによる⼿動テストとの差別化 メリット • ⾃動テストのシナリオ作成が 
 機能開発のリソースをひっ迫させない • ⾃動テストによる精度の限界を 
 ⼿動テストでカバー デメリット • シナリオ作成を忘れてしまう • ⾃動テストのシナリオでテスターさんの 
 検証コストをカバーできていない フロー化することでカバー ⾃動テストの品質がテスターさんによる 
 ⼿動検証の品質を上回るのは無理だと判断 E 2 E Test は QC の⾃動化をせず、QC と並⾛して、 QC の範囲外の項⽬でのデグレ検知を⽬的として利⽤ 🤝

Slide 47

Slide 47 text

FlutterKaigi 2023 4 7 3. ⾃動テストの シナリオ拡張期‧運⽤期について 1 . Test Matrix から注⼒ポイントを分析する 2 . Robot Pattern の採⽤とコーディングルールの制定 3 . OS の UI 箇所を触れるようにする 4. 機能別のシナリオ作成のやる‧やらないの 判断基準、優先度を標準化 5. 不安定なシナリオへの対応策 6 . Hot Restart でのシナリオの実装を可能にする 7. 運⽤時のシナリオの実⾏頻度やその⽅法 8. 随時追加される機能のシナリオを どのように担保するか

Slide 48

Slide 48 text

FlutterKaigi 2023 Test Matrix とは ... E ff ort (テストに必要な労⼒) と Con fi dence (テスト実⾏による信頼性) を図⽰したものです。 4 8 3 . 1 . Test Matrix から注⼒ポイントを分析する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid

Slide 49

Slide 49 text

FlutterKaigi 2023 Test Matrix とは ... E ff ort (テストに必要な労⼒) と Con fi dence (テスト実⾏による信頼性) を図⽰したものです。 4 9 3 . 1 . Test Matrix から注⼒ポイントを分析する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence

Slide 50

Slide 50 text

FlutterKaigi 2023 5 0 3 . 1 . Test Matrix から注⼒ポイントを分析する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid E ff ort Con fi dence • インストール: テストが実⾏できる環境の準備 • 作成: テスト作成の難易度や所要時間 • 実⾏: テスト スイートの実⾏にかかる時間 • デバッグ: 失敗時に問題の特定と修正のしやすさ • メンテナンス: 維持するために必要なコスト テストがもたらすアプリケーションの信頼性

Slide 51

Slide 51 text

FlutterKaigi 2023 5 1 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の E ff ort とは ... • インストール: テストが実⾏できる環境の作成時間 • 作成: テスト作成の難易度や所要時間 • 実⾏: テスト スイートの実⾏にかかる時間 • デバッグ: テスト失敗時に問題の特定と修正のしやすさ • メンテナンス: テストを維持するために必要なコスト https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence Unit Test

Slide 52

Slide 52 text

FlutterKaigi 2023 5 2 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の E ff ort とは ... • インストール: テストが実⾏できる環境の作成時間 • 作成: テスト作成の難易度や所要時間 • 実⾏: テスト スイートの実⾏にかかる時間 • デバッグ: テスト失敗時に問題の特定と修正のしやすさ • メンテナンス: テストを維持するために必要なコスト https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence プロジェクトの成熟に伴い、 機能追加だけだと少しずつ E ff ort が増加していく Unit Test

Slide 53

Slide 53 text

FlutterKaigi 2023 5 3 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する WINTICKETの2022 年 11 ⽉時点の Unit Test、VRT Test。 全ての機能のシナリオを導⼊したと仮定した際のE 2 E Testをそれぞれを図内に プロットし、E 2 E Test の課題点を把握する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid

Slide 54

Slide 54 text

FlutterKaigi 2023 5 4 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する Unit Test、VRT Test、E 2 E Test それぞれを図内に プロットし、E 2 E Test の課題点を把握する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence Unit Test VRT Test

Slide 55

Slide 55 text

FlutterKaigi 2023 5 5 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する Unit Test、VRT Test、E 2 E Test それぞれを図内に プロットし、E 2 E Test の課題点を把握する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence Unit Test VRT Test E 2 E Test E 2 E Test そもそも書けない‧書くのが難しいシナリオ →

Slide 56

Slide 56 text

FlutterKaigi 2023 5 6 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する Unit Test、VRT Test、E 2 E Test それぞれを図内に プロットし、E 2 E Test の課題点を把握する https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid Low E ff ort High E ff ort High Con fi dence Low Con fi dence E 2 E Test E 2 E Test そもそも書けない‧書くのが難しいシナリオ → E 2 E Test High E ff ort になってる原因 を改善し、E 2 E をLow E ff ort へ Unit Test VRT Test

Slide 57

Slide 57 text

FlutterKaigi 2023 5 7 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する Unit Test / VRT Test の現時点の考え • ✅ インストール: 初期からの変化はなし • 🤔 作成: 投票の裏側のロジックなど複雑なものも存在する • ❌ 実⾏: テストケース増加で実⾏時間が伸びている • ❌ デバッグ: テストケース増加に伴う複雑さの増加 • ✅ メンテナンス: 単⼀テストのため、疎結合になっている https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid

Slide 58

Slide 58 text

FlutterKaigi 2023 5 8 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する E 2 E Test の状況 • ✅ インストール: 特になし • ❌ 作成: 実装コストが⼤きいシナリオ、作成が難しいシナリオが存在する • ❌ 実⾏: 実⾏が不安定なシナリオが存在する • ❌ デバッグ: Hot Restart が使⽤できないため、問題の検出に⼿間がかかる • 🤔 メンテナンス: 機能追加/修正に伴うシナリオ修正が必要 https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid

Slide 59

Slide 59 text

FlutterKaigi 2023 5 9 3 . 1 . Test Matrix から注⼒ポイントを分析する Test Matrix の考え⽅を応⽤する E 2 E Test の状況 • ✅ インストール: 特になし • ❌ 作成: 実装コストが⼤きいシナリオ、作成が難しいシナリオが存在する • ❌ 実⾏: 実⾏が不安定なシナリオが存在する • ❌ デバッグ: Hot Restart が使⽤できないため、問題の検出に⼿間がかかる • 🤔 メンテナンス: 機能追加/修正に伴うシナリオ修正が必要 https://portal.gitnation.org/contents/testing-pyramid-makes-little-sense-what-we-can-use-instead 
 https://semaphoreci.com/blog/testing-pyramid 特に改善に繋がりそうな 「作成」「実⾏」「デバッグ」 への改善策を考える

Slide 60

Slide 60 text

FlutterKaigi 2023 6 0 3 . 1 . Test Matrix から注⼒ポイントを分析する 「作成」の E ff ort の課題 • 実装コストが⼤きいシナリオが存在する → 3.2. ロボットパターンの採⽤とコーディングルールの制定 • 作成が難しいシナリオが存在する → 3 . 3 . OS のUI 箇所を触れるようにする • シナリオを書いても High Con fi dence に繋がらないシナリオが存在する → 3.5. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化

Slide 61

Slide 61 text

FlutterKaigi 2023 6 1 3 . 1 . Test Matrix から注⼒ポイントを分析する • 実⾏が不安定なシナリオが存在する → 3.6. 不安定なシナリオへの対応策 • Hot Restart が使⽤できないため、問題の検出に⼿間がかかる → 3 . 7 . Hot Restart でのシナリオの実装を可能にする 「実⾏」の E ff ort の課題 「デバッグ」の E ff ort の課題

Slide 62

Slide 62 text

FlutterKaigi 2023 6 2 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 E 2 E Test のデザインパターン - Robot Pattern 🤖 テスト対象のセグメンテーション(eg. 画⾯)ごとに Robot Object を⽤意し、テストコード上にテストの What(テストしたい振る舞いや仕様)を、Robot Object にテストの How(Tap や Enter Textなどのアク ションや期待値⽐較の実装)を実装する https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/

Slide 63

Slide 63 text

FlutterKaigi 2023 6 3 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 E 2 E Test のデザインパターン - Robot Pattern テスト対象のセグメンテーション(eg. 画⾯)ごとに Robot Object を⽤意し、テストコード上にテストの What(テストしたい振る舞いや仕様)を、Robot Object にテストの How(Tap や Enter Textなどのアク ションや期待値⽐較の実装)を実装する https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/ integration_test のみの実装と Robot Pattern を利⽤した実装を⽐較していく 👀

Slide 64

Slide 64 text

FlutterKaigi 2023 6 4 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - integration_test の標準的な実装 https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/

Slide 65

Slide 65 text

FlutterKaigi 2023 6 5 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - integration_test の標準的な実装 https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/ アプリの起動 Username と Passwordの⼊⼒ + ログインボタンのタップ “Success” の⽂字が⾒えるか照合

Slide 66

Slide 66 text

FlutterKaigi 2023 6 6 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - Robot Pattern を利⽤した Robot Class のサンプル https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/

Slide 67

Slide 67 text

FlutterKaigi 2023 6 7 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - Robot Pattern を利⽤した Robot Class のサンプル https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/ Robot Class の定義 Tester Class を Wrap する形で それぞれのアクション関数を作成

Slide 68

Slide 68 text

FlutterKaigi 2023 6 8 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - Robot Pattern を利⽤した Robot Class のサンプル https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/ 画⾯ごとの Robot Class を宣⾔し、 その後アクション関数を呼び出す

Slide 69

Slide 69 text

FlutterKaigi 2023 6 9 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Pattern のサンプル - Robot Pattern を利⽤した Robot Class のサンプル https://goyoki.hatenablog.com/entry/ 2 0 2 1 / 0 4 / 2 2 / 0 0 3 6 5 8 
 https://jakewharton.com/testing-robots/ コード量⾃体はあまり変化はないが、 可読性が上がっているのがわかる 👀

Slide 70

Slide 70 text

FlutterKaigi 2023 7 0 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 E 2 E Testのデザインパターン - Robot Pattern 最終的に Robot Pattern の考えをベースに以下の形で落ち着いた • Robot Class を PageDriver Class と PageFindable Class に分割 • 認証やオンボーディング画⾯などの⼀連の動作の流れを共通化するための FlowDriver Class を作成

Slide 71

Slide 71 text

FlutterKaigi 2023 7 1 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 Robot Class を PageDriver Class と PageFindable Class に分割

Slide 72

Slide 72 text

FlutterKaigi 2023 7 2 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 E 2 E Testのデザインパターン - Robot Pattern 最終的に Robot Pattern の考えをベースに以下の形で落ち着いた • Robot Class を PageDriver Class と PageFindable Class に分割 • 認証やオンボーディング画⾯などの⼀連の動作の流れを共通化するための FlowDriver Class を作成 Robot Class 同様、アクション関数を定義し、 呼び出すための Class Driver Class が利⽤するコンポーネントの 定義を集約し、管理するための Class

Slide 73

Slide 73 text

FlutterKaigi 2023 7 3 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 ⼀連の動作の流れを共通化するための FlowDriver Class の作成

Slide 74

Slide 74 text

FlutterKaigi 2023 7 4 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 ⼀連の動作の流れを共通化するための FlowDriver Class の作成 複数の PageDriver を保持し、 共通化するための関数を定義する

Slide 75

Slide 75 text

FlutterKaigi 2023 7 5 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 PageDriver Class、PageFindable Class、FlowDriver Class のまとめ

Slide 76

Slide 76 text

FlutterKaigi 2023 7 6 3 . 2 . Robot Pattern の採⽤とコーディングルールの制定 PageDriver Class、PageFindable Class、FlowDriver Class のまとめ アーキテクチャで縛る コーディングルールで縛る • PageDriver と PageFindable の役割を細分化することで、 
 コンポーネントの指定が明確になり、重複が排除される • FlowDriver の作成により、オンボーディングや認証などの 
 フローを部分的に共通化することが可能に • PageDriver と PageFindable は1対1の関係を徹底し、 
 PageDriver が別の Page の PageFindable 
 を参照することを禁⽌した • PageFindable で指定しているコンポーネントが何か、 
 実装者以外に理解しにくいので、ドキュメントコメントの追加を 
 ルール化した

Slide 77

Slide 77 text

FlutterKaigi 2023 7 7 3 . 3 . OS の UI 箇所を触れるようにする integration_test は Flutter 内部にはアクセス可能だが Native 部分へのアクセスができない integration_test はアプリを含む Flutter へのアクセスが可能で、 カスタマイズ性が⾮常に⾼い。しかし、 ネイティブの要素(例:iOS の許可ダイアログ、通知ダイアログ) へのアクセスはできない。これにより、通知の開封シナリオや Google 、 Facebook などの認証 SDK を利⽤した認証機能のシナリオ作成が 困難になる。同様に、Webview の操作も困難になる。 🚧 開発環境の画像になります

Slide 78

Slide 78 text

FlutterKaigi 2023 7 8 3 . 3 . OS の UI 箇所を触れるようにする Patrol を利⽤する Patrol は LeanCode 社によって開発された integration_test の拡張ライブラリ。 
 https://github.com/leancodepl/patrol OSの許可ダイアログはもちろん、 ホームボタンやダークモードの切り替えなど、 OSの機能の操作を可能にする。 詳細: https://patrol.leancode.co/native/feature-parity

Slide 79

Slide 79 text

FlutterKaigi 2023 7 9 3 . 3 . OS の UI 箇所を触れるようにする JavaScript の document.querySelector を使い、WebView へのアクセス WINTICKETでは、WebViewのパッケージに fl utter_inappwebview を採⽤している。 fl utter_inappwebview には evaluateJavascript() という関数があり、JavaScriptの実⾏が可能。 Special Thanks to https://github.com/mj-hd ❤ 
 https://inappwebview.dev/docs/webview/javascript/injection

Slide 80

Slide 80 text

FlutterKaigi 2023 8 0 3.3.1. メールリンクログイン機能を実装する メールリンク認証とは メールリンク認証は、⼀般的なメールアドレス認証とは異なり、パスワードの⼊⼒が不要。代わりに、 メールアドレスに対してリンク付きのメールが送信され、そのリンクを開くことで認証が完了する。パス ワードが存在しないため、不正利⽤のリスクがなく、ユーザーがパスワードを忘れてストレスを感じるこ ともない。 https:// fi rebase.google.com/docs/auth/ fl utter/email-link-auth?hl=ja

Slide 81

Slide 81 text

FlutterKaigi 2023 8 1 3.3.1. メールリンクログイン機能を実装する 外部ツールを利⽤して裏側でメールリンクの開封を⾏う MailSlurp や Gmail Web API を利⽤すれば、送信されたメールをAPI経由で取得し、メール内のリンク URL を開くことが可能。これにより、メールアプリを介さずにメールリンク認証を完了することができる。 WINTICKET では、無料で利⽤できる Gmail Web API を採⽤している。 https:// fi rebase.google.com/docs/auth/ fl utter/email-link-auth?hl=ja 
 https://support.magic-pod.com/hc/ja/articles/ 4 4 0 8 9 1 0 3 9 8 6 1 7 -Email%E 3 % 8 1 %AE%E 3 % 8 3 % 8 6 %E 3 % 8 2 %B 9 %E 3 % 8 3 % 8 8

Slide 82

Slide 82 text

FlutterKaigi 2023 シナリオを書くべきか、書かないべきかの判断について Test Matrix のページで⾔及した通り、シナリオごとに⾒ると、⾼い信頼性につながる シナリオと、それにつながりにくいシナリオが存在する。 8 2 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 High Con fi dence に繋がりにくいシナリオ例: • ユーザーが閲覧することしかできない競輪選⼿の詳細画⾯ • 利⽤規約などの機能を持たない画⾯

Slide 83

Slide 83 text

FlutterKaigi 2023 シナリオを書くべきか、書かないべきかの判断について Test Matrix のページで⾔及した通り、シナリオごとに⾒ると、⾼い信頼性につながる シナリオと、それにつながりにくいシナリオが存在する。 8 3 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 High Con fi dence に繋がりにくいシナリオ例: • ユーザーが閲覧することしかできない競輪選⼿の詳細画⾯ • 利⽤規約などの機能を持たない画⾯ 主な理由: • OS や端末によって動作に差異が⽣まれづらい • インタラクションがないので複雑なロジックを 
 持たないことが多い • ユーザーができることが少ないので不具合に 
 繋がりづらい

Slide 84

Slide 84 text

FlutterKaigi 2023 シナリオを書くべきか、書かないべきかの判断について Test Matrixのページで⾔及した通り、 シナリオごとに⾒ると、⾼い信頼性につながる シナリオと、それにつながりにくいシナリオが存在する。 8 4 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 High Con fi dence に繋がりにくいシナリオ例: • ユーザーが閲覧することしかできない競輪選⼿の詳細画⾯ • 利⽤規約などの機能を持たない画⾯ Low E ff ort High E ff ort High Con fi dence Low Con fi dence E 2 E Test E 2 E Test そもそも書けない‧書くのが難しいシナリオ →

Slide 85

Slide 85 text

FlutterKaigi 2023 シナリオを書くべきか、書かないべきかの判断について Test Matrixのページで⾔及した通り、 シナリオごとに⾒ると、⾼い信頼性につながる シナリオと、それにつながりにくいシナリオが存在する。 8 5 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 High Con fi dence に繋がりにくいシナリオ例: • ユーザーが閲覧することしかできない競輪選⼿の詳細画⾯ • 利⽤規約などの機能を持たない画⾯ Low E ff ort High E ff ort High Con fi dence Low Con fi dence E 2 E Test E 2 E Test そもそも書けない‧書くのが難しいシナリオ → 書く E 2 E Test 書かない E 2 E Test

Slide 86

Slide 86 text

FlutterKaigi 2023 8 6 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 Test Case Prioritization を⽤いて評価指標を作成する 各シナリオの実施‧⾮実施を評価するために、それぞれに重み付けを⾏う。 この重み付けの項⽬を決定する際に、Test Case Prioritizationの考え⽅を参考にした。

Slide 87

Slide 87 text

FlutterKaigi 2023 8 7 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 Test Case Prioritization (TCP) について コードカバレッジ、機能のリスクや重要性、コストなどの様々な要素に基づき、テストスイート内のテス トケースに優先順位をつけるプロセス。 TCP には多種多様な優先順位付けの考え⽅が存在する。 https://www.browserstack.com/guide/test-case-prioritization 🧠 Coverage-Based TCP Risk-Based TCP Requirements-Based TCP History-Based TCP Cost-Aware-Based TCP

Slide 88

Slide 88 text

FlutterKaigi 2023 WINTICKET で 採⽤したTest Case Prioritization たくさんの TCP が存在する中で 4 項⽬に絞り、各項⽬4段階の計16点で評価する。 売上へのリスク 事業信頼へのリスク ⼿動検証にかかるコスト 実装コスト TCP 投票機能やチャージ機能など⾦銭に関わる機能ほど重い基準 ユーザーや公営競技主催者である地⽅公共団体の信⽤を失うリスクがあるかどうか ⼿動検証にかかるシナリオほど⾃動化した時の価値が⾼いため 実装コストが⾼すぎるものはメンテコストや開発者のモチベーション低下に 繋がるため 概要 8 8 3.4. 機能別のシナリオ作成のやる‧やらないの判断基準、優先度を標準化 https://www.browserstack.com/guide/test-case-prioritization Risk-Based TCP Risk-Based TCP Cost-Aware-Based TCP Cost-Aware-Based TCP

Slide 89

Slide 89 text

FlutterKaigi 2023 8 9 3.5. 不安定なシナリオへの対応策 E 2 E Test における不安定とは E 2 E Testは、その性質上、実際のAPIを叩くために結果の取得に時間がかかるケースや、タップや⼊⼒する 対象の要素の検出に失敗することが稀にある。 これらの不安定性を解消するための3つのアプローチを紹介する。

Slide 90

Slide 90 text

FlutterKaigi 2023 9 0 3.5. 不安定なシナリオへの対応策 1. 期待した Widget が表⽰されたかの確認には expect() ではなく 独⾃の拡張関数を利⽤する

Slide 91

Slide 91 text

FlutterKaigi 2023 9 1 3.5. 不安定なシナリオへの対応策 期待した Widget が表⽰されたかの確認には expect() ではなく 独⾃の拡張関数を利⽤する expect() だと実⾏のタイミングでそのコンポーネントの 有無で結果を決めてしまうが、waitFor() を使うことで ⼀定時間待つことができる ⼀定時間の間、コンポーネントを探し続け、 
 発⾒できなかった場合は TimeoutException を throw する

Slide 92

Slide 92 text

FlutterKaigi 2023 9 2 3.5. 不安定なシナリオへの対応策 2. 画⾯遷移を待機する拡張関数の実装

Slide 93

Slide 93 text

FlutterKaigi 2023 9 3 3.5. 不安定なシナリオへの対応策 画⾯遷移を待機する拡張関数の実装 Findable は 画⾯の Class を T とした 
 BaseFindable を継承する waitUntilVisible() を作成し、 
 ⾃⾝のWidgetが表⽰されている 
 ことを保証する関数を作っていく

Slide 94

Slide 94 text

FlutterKaigi 2023 9 4 3.5. 不安定なシナリオへの対応策 画⾯が表⽰されるまで待機することで 安定性の向上につながる

Slide 95

Slide 95 text

FlutterKaigi 2023 9 5 3.5. 不安定なシナリオへの対応策 https://cloud.google.com/sdk/gcloud/reference/ fi rebase/test/android/run#--num- fl aky-test-attempts 3 . Firebase Test Lab の num- fl aky-test-attempts を利⽤する WINTICKETでは、E 2 E Test の実⾏環境としてFirebase Test Labを使⽤している。 
 Firebase Test Labには実⾏時のオプションとして num- fl aky-test-attempts があり、 
 これを⽤いて上限回数を設定することができる。 
 設定した回数までシナリオを再実⾏し、全て失敗した場合のみテスト失敗と判定する。

Slide 96

Slide 96 text

FlutterKaigi 2023 9 6 3 . 6 . Hot Restart でのシナリオの実装を可能にする ローカル環境で fl utter drive を使⽤せず fl utter run で実⾏する E 2 E Test は、 fl utter run を使っても実⾏可能。 これにより、Hot Restart を⽤いた開発が可能となる。 この機能は Patrol v 1 . 1 でも利⽤可能。 また、類似のパッケージとして fl utter_convenient_test でも利⽤可能。

Slide 97

Slide 97 text

FlutterKaigi 2023 9 7 3.7. 運⽤時のシナリオの実⾏頻度やその⽅法 E 2 E Test の実⾏頻度について 当初はCommitごとの実⾏を理想としていたが、Commitごとのテストでは以下の問題が⽣じた 😫 テストが並列に実⾏されるため、⼀定数のテストアカウントを⽤意する必要がある 😫 競輪やオートレースのレースが開催されていない時間帯でもテストが実⾏される 😫 全シナリオの通しテストにかかる時間だけ、マージキューが蓄積し開発体験が低下する

Slide 98

Slide 98 text

FlutterKaigi 2023 9 8 3.7. 運⽤時のシナリオの実⾏頻度やその⽅法 E 2 E Test の実⾏頻度について 当初はCommitごとの実⾏を理想としていたが、Commitごとのテストでは以下の問題が⽣じた 😫 テストが並列に実⾏されるため、⼀定数のテストアカウントを⽤意する必要がある 😫 競輪やオートレースのレースが開催されていない時間帯でもテストが実⾏される 😫 全シナリオの通しテストにかかる時間だけ、マージキューが蓄積し開発体験が低下する これら全てに対応するのは困難と考え、 定期実⾏への切り替えを決断。 ↓

Slide 99

Slide 99 text

FlutterKaigi 2023 9 9 3.7. 運⽤時のシナリオの実⾏頻度やその⽅法 E 2 E Test の実⾏頻度について 最終的には以下の体制を採⽤ • 毎⽇午前中に全てのシナリオを iOS / Android それぞれで実⾏ • 全体のシナリオを半分に分けて2回にわけて実⾏ • シナリオが失敗した時にはランダムでメンバーにメンション • OS の網羅性を担保するために、 
 午後には実⾏環境を変えて実⾏ 成功した時の Slack 通知例 失敗した時の Slack 通知例

Slide 100

Slide 100 text

FlutterKaigi 2023 1 0 0 3.8. 随時追加される機能のシナリオをどのように担保するか E 2 E Test のシナリオ作成フローを機能開発時に組み込む QCチームと連携し、QCチームが作成した項⽬書をアプリチームに共有。 これをアプリチームのエンジニアがシナリオ実装の指針とし、シナリオの品質を担保する。 PR Unit Test VRT レビュー マージ QC リリース 🛠 🤖 👀 🧑🔧 ✈ シナリオ作成 E 2 E Test

Slide 101

Slide 101 text

FlutterKaigi 2023 1. メリット 2. デメリット 3. まとめ 1 0 1 4. ⾃動テストを安定するまで 運⽤してみて

Slide 102

Slide 102 text

FlutterKaigi 2023 1 0 2 4.1. ⾃動テストを安定するまで運⽤してみて - メリット • 事前にエラー‧デグレを検知し、障害を未然に防ぐことができている ✅ • SkSLの⾃動⽣成が可能 📲 • 実際のAPIを使⽤するため、ユニットテストでは検知できないエラーを発⾒できる 👀 • App だけでなく、Server のデグレ検知にもつながる💻 • 初期の段階では効果を感じにくいが、⻑期的にはリソースの節約につながる 📈 メリット

Slide 103

Slide 103 text

FlutterKaigi 2023 1 0 3 4.1. ⾃動テストを安定するまで運⽤してみて - メリット 障害を未然に防いた実例 • FlutterFire の Version 更新に伴う認証基盤のデグレ • Server の デグレ検知 • 新機能開発時の考慮漏れ メリット

Slide 104

Slide 104 text

FlutterKaigi 2023 1 0 4 4.1. ⾃動テストを安定するまで運⽤してみて - デメリット • 機能作成時にシナリオ作成が必要となり、リソースを圧迫する 😫 • エンジニアのシナリオ作成の学習コスト⾼い 👨🎓 • Robot Pattern や E 2 E Test の実装に馴染みのないエンジニアが多い • 既存のアプリ内で特定の画⾯やコンポーネントを探すのに⼿間がかかる • テストが失敗した場合、他の作業を優先せず修復にあたる必要があり、メンテナンスコストが⾼い • 初期導⼊のコストが⾼い 🔧 • 費⽤がかかる💰 デメリット

Slide 105

Slide 105 text

FlutterKaigi 2023 1 0 5 4.3. ⾃動テストを安定するまで運⽤してみて - まとめ • ⾃動テストの導⼊にはツールの選定、運⽤体制の構築に⾄るまで、全ての段階でプロダクトの現状分析 が重要 📈 • ⾃動テストにより事前に障害を検知することが可能だが、その効果を実感するまでには時間がかかる ⏰ • Flutter での E 2 E Test は学習コストが⾼いものの、便利なツールが次々と登場している 🔥 • WINTICKET では、今後もシナリオを増やし、より堅牢な体制を構築していく予定 🏃 まとめ

Slide 106

Slide 106 text

FlutterKaigi 2023 1 0 6 4.3. ⾃動テストを安定するまで運⽤してみて - まとめ メリットもデメリットもたくさんに存在しますが、最も難しかったのは「E 2 E Test をアプリチーム全体で 理解し、このツールを継続的にメンテナンスしていく意識を持ってもらうこと」でした。 幸運なことに、私は協⼒的なチームメンバーに恵まれ、初期段階から積極的にシナリオの追加や継続的な メンテナンスに協⼒してもらえました。本当に感謝しています 🙇 感想

Slide 107

Slide 107 text

FlutterKaigi 2023 1 0 7 宣伝 WINTICKET ではたくさんの Flutter に関わる記事を執筆しています。よければご覧ください。 https://developers.cyberagent.co.jp/blog/?s=winticket+ fl utter

Slide 108

Slide 108 text

FlutterKaigi 2023 1 0 8 宣伝 また、WINTICKET のチームメンバー & 同期の batch より登壇があります。よければ発表をお聞きくださ い。 https:// fl utterkaigi.jp/ 2 0 2 3 /sessions/ 0 9 0 ad 5 b 8 - 7 0 6 6 - 4 0 e 6 - 8 ca 8 - 5 8 ff f 7 6 6 f 0 4 6

Slide 109

Slide 109 text

FlutterKaigi 2023 1 0 9 ご清聴ありがとうございました 🙌