Cypressでサクッと始めるE2Eテスト / Start E2E Test easily using Cypress

オールインワンE2EテストツールのCypressの紹介です。
experimental(実験的機能)のCypress Studioを使って簡単にブラウザ操作記録とアサーション作成する手順を説明しています。

自動化大好きエンジニアLT会 - vol.4で発表した内容です。
https://rakus.connpass.com/event/217909/

TVISION INSIGHTS株式会社ではエンジニア大募集中です！
https://www.wantedly.com/companies/tvisioninsights
https://www.tvisioninsights.co.jp/

Transcript

1. Cypressでサクッと始める E2Eテスト 2021.8.12 自動化大好きエンジニアLT会 - vol.4
2. 　 自己紹介 　片岡　基 Kataoka Motoi 　　テクノロジーとサッカーを愛するエンジニア 　　　TVISION INSIGHTS株式会社所属 　　　　SIer → スポーツデータ会社 → テレビデータ会社 　　　　　フルサイクルエンジニア（企画-要件定義-設計-実装-テスト-運用） 　　　　　　AWS大好き、浦和レッズ大好き（iOS/Androidアプリ出してます） ティービジョン インサイツ
3. Cypressとは 　・オールインワンのE2Eテストツール 　　・エンドツーエンド ＝ 端から端まで ＝ ブラウザからサーバサイドまで 　　　・設定したシナリオ通りにブラウザを自動操作してテストできる 　　　　　・Chrome、Firefox、Edgeでテスト可能 　　　　　　・Mac、Windows、Linuxにインストールして使用 　　　　　　　・OSS、フリー、活発な開発
4. 特徴 　① 内部的にSeleniumを使用していない 　② エンドツーエンドのテストを本当にうまく行うことに焦点を当てている 　③ あらゆるフロントエンドフレームワークまたはWebサイトで動作する 　④ テストはJavaScriptでのみ記述される 　⑤ オールインワン 　⑥ 開発者とQAエンジニア向け 　⑦ 非常に高速に動作 https://www.cypress.io/how-it-works/
5. オールインワン 　ああああ https://www.cypress.io/how-it-works/
6. % yarn add cypress --dev　←インストール yarn add v1.22.10 info No lockfile found. [1/4] 🔍 Resolving packages... warning cypress > @cypress/request > har-validator@5.1.5: this library is no longer supported warning cypress > @cypress/request > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. warning cypress > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 149 new dependencies. info Direct dependencies └─ cypress@8.2.0 info All dependencies ├─ @cypress/request@2.88.5 ├─ @cypress/xvfb@1.2.4 ├─ @types/node@14.17.9 ├─ @types/sinonjs__fake-timers@6.0.3 ・・・中略・・・ ├─ verror@1.10.0 ├─ which@2.0.2 └─ wrap-ansi@7.0.0 ✨ Done in 8.55s. % npx cypress open　←起動 インストール & 起動
7. サンプルのテストファイル integrationディレクトリに サンプルのテストファイル cypressディレクトリが作成さ れる
8. テスト実行 - GUI テストファイルをクリック ブラウザが起動して 自動テスト
9. Cypress Studio 　ブラウザ上で簡単にテストコード作成できる機能。 　v8.2現在、experimental（実験的）扱い。 　cypress.jsonで有効化して使用。{ "experimentalStudio": true } 　ブラウザ操作とアサーションのテストコードを生成してくれる。 　実演。 STUDIO
10. シナリオ作成 新規テストファイル作成
11. シナリオ作成 作成されたファイルをクリック
12. シナリオ作成 Cypress Studioでテスト作成へ
13. シナリオ作成 テスト対象URLを入力して 「Go→」
14. シナリオ作成 右の画面で行った操作が記録され る 保存
15. シナリオ作成 生成されたテストコード
16. テスト実行 - CUI npx cypress run 実行の様子が動画として 自動的に保存される（便利！）
17. 小ネタ：テスト時のシステム時刻を固定化 テストコード内で上記を実行することで固定化できる。 あくまでクライアント側（ブラウザ側）のみ。 サーバサイドはlibfaketime等で対応。 const now = new Date(2021, 7, 23).getTime() cy.clock(now);
18. 豊富な機能 　① テスト実行の様子をスクリーンショット・動画で出力 　② クラウド上に結果を保存・共有できるDashboard（有償サービス） 　③ CI対応（GitHub Actions、CircleCI、GitLab CI、etc） 　④ Gitホスティング対応（GitHub、GitLab、BitBucket） 　⑤ スクリーンショット前後比較テスト 　⑥ コンポーネントテスト（Angular、Vue、React対応。experimental）
19. 活発な開発 2020.8 2020.11 2021.4 2021.7
20. Enjoy your E2E Life!!
21. 参考 https://www.cypress.io/ https://user-first.ikyu.co.jp/entry/2019/04/23/090000 https://future-architect.github.io/articles/20200115/ https://blog.ecbeing.tech/entry/2021/04/08/114500 https://www.testim.io/blog/puppeteer-selenium-playwright-cypress-how-to-choose/
22. TVISION INSIGHTS ではエンジニアを大募集中です！ ティービジョン 　インサイツ 自社サービスをフルサイクルに開発したい方、是非！ https://www.wantedly.com/companies/tvisioninsights