ngjapan2019_AzurePipelines-BrowserStack-Angular

ng-japan 2019での登壇資料です。
Protractorで作成したE2Eテストを、テストコード実行環境はAzure DevOps、ブラウザ環境はBrowserStackで動作させる話です。

Transcript

1. Azure Pipelines × BrowserStack × Angular 2019/07/13 ng-japan 2019 Erika Sakakibara 1
2. 自己紹介 Sakakibara Erika 法人向けオンラインストレージサービス 主にフロントエンド開発 Angular、AngularJS、TypeScript 登壇初心者 資料は後で 公開します 2
3. 今日はなすこと・はなさないこと AngularアプリのUIテストをProtractor × BrowserStack × Azure Pipelines で楽していく話 + デモ 細かい実装、設定のはなし 3
4. 自動テストに取り組むきっかけ モダナイゼーション →既存アプリケーションは稼働したまま、 　新しいアプリケーションが1つ増えた感じ →メンテナンス対象が2倍になった 楽しくないことは省いていきたい 4
5. 楽したい UIテストをProtractorで自動化 5
6. My Machine Chrome Driver 6
7. バージョン管理が手間 • ブラウザそのもの • ブラウザバージョンに対応したDriver 7
8. もっと楽したい クラウドテスティング環境のBrowserStackを導入 OS・ブラウザバリエーションが豊富 対応するバージョンのDriverを用意してくれる ブラウザ画面の動画、Console.logをBrowserStackサービスから確認できる 8
9. My Machine Chrome Driver 9
10. テストコード実行環境の管理が手間 テストのスケジューリングが手間 10
11. もっと楽したい CI/CDツールのAzure Pipelinesを導入 テストコード実行環境を管理しなくていい ビルド、テスト実行が自動になり、スケジューリングもできる テスト結果が勝手にVisualizeされる 11
12. Azure Pipelines Chrome Driver 12
13. デモ 13
14. まとめ 端末やブラウザに依存する各環境を自前で用意しなくてよくて楽になった バグを発見するまでの期間が短くなった リファクタリングも思い切ってできる 14
15. Special Thanks Microsoft MVP • 三宅さん 株式会社ベーシック • 野崎さん • 関さん 15
16. Thank you. 16