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