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
Future Tech Night #8
Search
kidokidofire
April 13, 2021
Programming
1
590
Future Tech Night #8
This is a document of Future Tech Night #8 in Kido's section.
kidokidofire
April 13, 2021
Tweet
Share
More Decks by kidokidofire
See All by kidokidofire
Future LT ~Test Managemanet by GitHub Project for Scrum development~
kidokidofire
0
830
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
230
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.7k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
150
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
PicoRuby on Rails
makicamel
2
140
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Gamification - CAS2011
davidbonilla
81
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
For a Future-Friendly Web
brad_frost
179
9.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How GitHub (no longer) Works
holman
314
140k
How to Ace a Technical Interview
jacobian
278
23k
Transcript
Future Tech Night #8 ~Cypressで快適!E2Eテストライフ~ Cypress入門編 フューチャー株式会社 CSIG FutureVulsチーム所属 木戸俊輔
1
自己紹介 • 木戸俊輔(25歳) • 大阪出身 • ストリートダンスが趣味 • 2020年4月入社(新卒) 2020年7月CSIG(Cyber
Security Innovation Group)に配属 FutureVulsチームで脆弱性管理サービスのフロント開発を担当 • kidokidofire で活動(GitHubなど) 最近、自身初のOSSとして、AWS上のPostgreSQLで発生した Slow QueryをSlackに通知するサービスを公開しました。 2
フューチャー株式会社の紹介 3 「お客様の未来価値を最大化させること」をミッションに 経営戦略とIT戦略をサポートするコンサルティング会社
FutureVulsとは サーバ内の脆弱性を検出して管理するWebサービス 4 サーバ スキャナ 脆弱性を検知 ブラウザ上で確認・管理ができる スキャナであるVulsはIPA推奨の脆弱性検知ツール 強固なセキュリティ対策を求める企業様から多大な支持を頂いています https://vuls.biz/
今回の目的 Cypressを用いたE2Eテストの実行&管理について基本を学ぶ。 5 E2Eテストの自動化って難しそうなイメージありませんか? ご安心ください、私も最近まで何も知りませんでした。 実は思っているよりもずっと簡単に構築出来ちゃいます。
テストは大事 システムを納品/リリースする前に動作や性能のテストは必須である。 もし不十分だと、バグや想定外の挙動が発生しうる。 ・システム納品先からの信頼消失 ・サービスの廃止 ・再開発のためコスト増加 Webサービスシステムのテストに焦点を当てて話していく。 6
E2Eテストとは E2E(End To End)テストでは、 ユーザが利用するのと同じようにシステム全体をテストする。 E2EテストはWebシステム全体を漏れなくテストするため膨大な労力が必要である。 テスト者の未成熟などによりテストが正しく行われない可能性がある。 7 単機能のテスト ・画面上のボタン
・DBの更新処理 ┋ 単体テスト E2Eテスト ・全ての機能 ・一連の操作 非機能テスト ・セキュリティ ・負荷 ┋ 総合テスト 単機能間のテスト ・処理後の画面遷移 ・他システムと連携 ┋ 結合テスト
E2Eテストを自動化しよう E2Eテストを自動化することで、コスト削減&品質向上を狙う。 ・一度自動化すれば、次回以降のテストにマンパワーは必要なし。 ・常に同じ操作、同じ確認を行うため、ムラが無い。 様々なE2Eテストツール 8
Cypressとは CypressとはWebテスト用に構築されたJava Scriptライブラリである。 特徴: ・単体テストからE2Eテストまで広く使える。 ・テスト構築、実行、バグ検知まで全て行える。 ・コマンドごとに画面のスナップショットを見返せる。 ・テスト一連の様子をビデオとして保存できる。 ・各種CIとの連携が可能である。 9
Cypressを試してみる インストール Cypressを構築したい任意のディレクトリで、 npm install cypress を実行するだけ。 5~10分くらいで完了する。 起動 同ディレクトリで、
npx cypress open を実行。 管理画面が開き、初回は自動でサンプルの テストファイル(.spec.js)を生成してくれる。 テスト実行 任意のspecファイルを押下すると、 記述されたテストが順に実行される。 10
specファイルの構成 Cypressでは以下のような構成でspecファイルにテストを記述していく。 例 context(‘カテゴリ名’, () => { it(‘シナリオ名1’, () =>
{ Cypressコマンドによる処理入力 ┋ }) ┋ }) 11
Cypressコマンド例 ・webサイトにアクセスする ・操作したいDOMを取得する つまずきポイント💡 cy.contains()を使う方が楽。 ただし、同じ文字列が複数存在する場合は注意!文字が少し変更されても壊れる。 面倒だが、各コンポーネントに一意となるタグを振り、cy.get()を用いるのが確実である。 12
Cypressコマンド例 ・DOMを操作する cy.get()などでDOMを取得して使用する。 ・クリック ・入力 例)検索フォームに文字を打ち込んで検索する 13
Cypressコマンド例 ・チェックを行う 例)指定の文字列が表示されていることをチェックする 各チェック項目ごとに、Cypressが成否を判断して教えてくれる。 成功の場合 失敗の場合 14
テストの動画を見返す ユーザ登録を行うことで、テストの動画を見返す/共有するなどができる。 1. 管理画面の’Runs’タブを押し、ユーザ登録を行う。 2. Record Keyが生成される。表示されたコマンドで実行する。 3. 管理画面の’Runs’タブに、テストシナリオごとの実行ビデオが表示される。 各ビデオファイルごとに保存や共有が可能である。
15
テストの動画を見返す 16
まとめ Cypressを用いたE2Eテストの基本的な実行&管理方法を紹介した。 ・CypressはWebテスト用に構築されたJava Scriptライブラリである。 ・インストールから実行までの一連の流れを紹介した。 ・specファイルの書き方の基本、コマンド例について紹介した。 ・テストの実行ビデオを保存/共有できる。 17
おわりに Cypressにもまだまだできることがたくさんあります。 本日の紹介で、 E2Eテストに気軽に踏み出せる方が一人でも多くいれば幸いです。 ぜひ快適なテストライフを! ご清聴ありがとうございました。 18