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
510
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
710
Other Decks in Programming
See All in Programming
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
8
2.2k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
110
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
510
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
870
Featured
See All Featured
Building Adaptive Systems
keathley
29
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Optimizing for Happiness
mojombo
369
69k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Thoughts on Productivity
jonyablonski
57
3.8k
The Language of Interfaces
destraynor
150
23k
Fireside Chat
paigeccino
19
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Faster Mobile Websites
deanohume
296
30k
Automating Front-end Workflow
addyosmani
1353
200k
KATA
mclloyd
14
11k
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