CircleCI における UI テスト

CircleCI を使ってどうやって UI テストをするのか、ではなく、CircleCI の開発やリリース、デプロイにおいてどのように UI のテストを行なっているのかをご紹介したスライドです。

Transcript

1. 1 CircleCI における UI テスト 注) 「CircleCI を使って、どうやって UI テストをするのか」ではありません。 舟木 将彦 (@mfunaki) Principal Developer Advocate / CircleCI
2. 2 CircleCI をお使いいただいた事はありますか？
3. 3 CircleCI は CircleCI で ビルド〜テスト〜リリース〜デプロイされている プラン コード ビルド テスト リリース デプ ロイ 運用 監視 継続的インテグレーション (CI) 継続的 デプロイ (CD) 自動化できない 非正常系は 自動化できない 自動化できる→継続的であるために自動化すべき ビジネスが継続する限り、プロジェクトは続く 共有 リポジトリ上 で 常に作業 コード追加・修正時は 常にビルド・テスト (最後にまとめてやらな い→早く失敗すれば 早く品質が安定する) サービス停止せず常時 リリース/デプロイ (失敗時にはクイックに 修正 ／ 前バージョンに 戻せる)しくみ 運用・監視しやすい 品質をコードに反映 (必要なデータの取得、 スケーラビリティの 確保) CircleCI自体は E2Eテスト (UIテスト)の機能を 持たず、 E2Eテストツールと 連携して、 「テストを依頼」 「結果を取得」 可能 連携可能ツール例 • UIPath Test Suiteなどの 商用製品 • cypressなどの オープンソース ツール
4. 4 どんな UI テストをしているのか Eコマースサイトのテストと違うポイント • ユーザーごとに表示内容や振る舞いが大きく異なる（情報が見える／見えない、 操作ができる／できない） →ログアウトしたり、別ユーザーでログインした時に前ユーザーの影響を受けない • レコーディング＆プレイ型のテストではなく、テストコードを書いて実行 Eコマースサイトと恐らく同じポイント • 「開発者やマネージャーであれば、こういった使い方をするだろう」という ユースケースに対応したテスト • 画面の種類数は一定個なので、種類ごとにオブジェクト定義し、 再利用性を高め、テストコードの記述を効率化する • 何が表示されているか＋何が表示されていないか (無効化されているか) • Shift Left Testing (バグが生まれるのはコードが書かれた時 ) + Shift Right Testing (実際の行動を元に UX / DX ~ Developer eXperience ~ 向上)
5. 5 UI テストも大事だけど、Unit テストも大事 フランスの Ponicode 社を買収(3/9) - JavaScript/TypeScript の Unit テスト (Jestベース) - Python の Unit テスト(Pytestベース) を AI による提案を元に自動生成します。 VSCode 拡張 や IntelliJ プラグインとして動作 CLI も提供 (npm i -g ponicode) → CircleCI に統合を進めていきます
6. Thank you. 6