Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CircleCI における UI テスト
Search
Masahiko Funaki(舟木 将彦)
PRO
March 11, 2022
Technology
0
5
CircleCI における UI テスト
CircleCI を使ってどうやって UI テストをするのか、ではなく、CircleCI の開発やリリース、デプロイにおいてどのように UI のテストを行なっているのかをご紹介したスライドです。
Masahiko Funaki(舟木 将彦)
PRO
March 11, 2022
Tweet
Share
More Decks by Masahiko Funaki(舟木 将彦)
See All by Masahiko Funaki(舟木 将彦)
Harness the Power of Advanced LLM and CI/CD Practices
mfunaki
PRO
0
260
CircleCI によるソフトウェア開発の品質向上と効率化の実現
mfunaki
PRO
0
140
CircleCI と Argo Rollouts で 実現する Kubernetes 上の プログレッシブデリバリー
mfunaki
PRO
0
40
はじめてのCircleCI
mfunaki
PRO
0
13
CircleCIでChatGPTにエラーの解説を頼んでみた
mfunaki
PRO
0
440
自動化→部品化すると社内開発は楽しくなる
mfunaki
PRO
0
24
テストの自動化~簡単に始める、みんなで使う、現況を捉える
mfunaki
PRO
0
28
テストの自動化 〜 簡単に始める、みんなで使う、現況を捉える
mfunaki
PRO
0
6
CircleCIで実現できる「高速、安全なソフトウェア開発」
mfunaki
PRO
0
100
Other Decks in Technology
See All in Technology
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
13
4.9k
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
420
拓展QA日常工作的邊界
line_developers_tw
PRO
0
550
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
nabeliwo
2
390
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5k
生成AI活用推進の為にやったこと/やらなかったこと
ktc_wada
0
160
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
データ基盤を支える技術
chanyou0311
5
3k
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
Featured
See All Featured
Web development in the modern age
philhawksworth
203
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Clear Off the Table
cherdarchuk
86
310k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
RailsConf 2023
tenderlove
9
580
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Faster Mobile Websites
deanohume
300
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Scaling GitHub
holman
457
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Transcript
1 CircleCI における UI テスト 注) 「CircleCI を使って、どうやって UI テストをするのか」ではありません。
舟木 将彦 (@mfunaki) Principal Developer Advocate / CircleCI
2 CircleCI をお使いいただいた事はありますか?
3 CircleCI は CircleCI で ビルド〜テスト〜リリース〜デプロイされている プラン コード ビルド テスト
リリース デプ ロイ 運用 監視 継続的インテグレーション (CI) 継続的 デプロイ (CD) 自動化できない 非正常系は 自動化できない 自動化できる→継続的であるために自動化すべき ビジネスが継続する限り、プロジェクトは続く 共有 リポジトリ上 で 常に作業 コード追加・修正時は 常にビルド・テスト (最後にまとめてやらな い→早く失敗すれば 早く品質が安定する) サービス停止せず常時 リリース/デプロイ (失敗時にはクイックに 修正 / 前バージョンに 戻せる)しくみ 運用・監視しやすい 品質をコードに反映 (必要なデータの取得、 スケーラビリティの 確保) CircleCI自体は E2Eテスト (UIテスト)の機能を 持たず、 E2Eテストツールと 連携して、 「テストを依頼」 「結果を取得」 可能 連携可能ツール例 • UIPath Test Suiteなどの 商用製品 • cypressなどの オープンソース ツール
4 どんな UI テストをしているのか Eコマースサイトのテストと違うポイント • ユーザーごとに表示内容や振る舞いが大きく異なる(情報が見える/見えない、 操作ができる/できない) →ログアウトしたり、別ユーザーでログインした時に前ユーザーの影響を受けない •
レコーディング&プレイ型のテストではなく、テストコードを書いて実行 Eコマースサイトと恐らく同じポイント • 「開発者やマネージャーであれば、こういった使い方をするだろう」という ユースケースに対応したテスト • 画面の種類数は一定個なので、種類ごとにオブジェクト定義し、 再利用性を高め、テストコードの記述を効率化する • 何が表示されているか+何が表示されていないか (無効化されているか) • Shift Left Testing (バグが生まれるのはコードが書かれた時 ) + Shift Right Testing (実際の行動を元に UX / DX ~ Developer eXperience ~ 向上)
5 UI テストも大事だけど、Unit テストも大事 フランスの Ponicode 社を買収(3/9) - JavaScript/TypeScript の
Unit テスト (Jestベース) - Python の Unit テスト(Pytestベース) を AI による提案を元に自動生成します。 VSCode 拡張 や IntelliJ プラグインとして動作 CLI も提供 (npm i -g ponicode) → CircleCI に統合を進めていきます
Thank you. 6