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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Masahiko Funaki(舟木 将彦)
March 11, 2022
Technology
0
26
CircleCI における UI テスト
CircleCI を使ってどうやって UI テストをするのか、ではなく、CircleCI の開発やリリース、デプロイにおいてどのように UI のテストを行なっているのかをご紹介したスライドです。
Masahiko Funaki(舟木 将彦)
March 11, 2022
Tweet
Share
More Decks by Masahiko Funaki(舟木 将彦)
See All by Masahiko Funaki(舟木 将彦)
フルスタックQAへの第一歩。Web UIとAPIテストを統合した品質保証戦略
mfunaki
0
12
mabl新機能解説:プロンプトによるテスト生成とローカル/クラウド実行のシームレスな統合
mfunaki
0
53
mabl MCP x 生成AIによる開発・テスト自動化の未来 - コンテクスト駆動型のAI体験 -
mfunaki
1
98
テスト自動化がさらに加速!生成AIが作成・修正・分析まで行う『エージェント型テスト』の全貌
mfunaki
1
180
Playwrightとmablのパワフルな統合: 効率的なテスト自動化を実現する新機能を学ぶ!
mfunaki
1
280
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
1
310
Harness the Power of Advanced LLM and CI/CD Practices
mfunaki
0
410
CircleCI によるソフトウェア開発の品質向上と効率化の実現
mfunaki
0
310
CircleCI と Argo Rollouts で 実現する Kubernetes 上の プログレッシブデリバリー
mfunaki
0
210
Other Decks in Technology
See All in Technology
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
AWS Network Firewall Proxyを触ってみた
nagisa53
1
240
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
140
Red Hat OpenStack Services on OpenShift
tamemiya
0
120
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
270
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
210
20260204_Midosuji_Tech
takuyay0ne
1
160
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
700
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
abemii
0
140
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
jonnojun
0
180
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
190
Featured
See All Featured
So, you think you're a good person
axbom
PRO
2
1.9k
Designing Experiences People Love
moore
144
24k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
450
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Tell your own story through comics
letsgokoyo
1
810
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Into the Great Unknown - MozCon
thekraken
40
2.3k
We Have a Design System, Now What?
morganepeng
54
8k
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Embracing the Ebb and Flow
colly
88
5k
Testing 201, or: Great Expectations
jmmastey
46
8k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
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