Cypressでサクッと始める E2Eテスト 2021.8.12 自動化大好きエンジニアLT会 - vol.4

　 自己紹介 　片岡　基 Kataoka Motoi 　　テクノロジーとサッカーを愛するエンジニア 　　　TVISION INSIGHTS株式会社所属 　　　　SIer → スポーツデータ会社 → テレビデータ会社 　　　　　フルサイクルエンジニア（企画-要件定義-設計-実装-テスト-運用） 　　　　　　AWS大好き、浦和レッズ大好き（iOS/Androidアプリ出してます） ティービジョン インサイツ

Cypressとは 　・オールインワンのE2Eテストツール 　　・エンドツーエンド ＝ 端から端まで ＝ ブラウザからサーバサイドまで 　　　・設定したシナリオ通りにブラウザを自動操作してテストできる 　　　　　・Chrome、Firefox、Edgeでテスト可能 　　　　　　・Mac、Windows、Linuxにインストールして使用 　　　　　　　・OSS、フリー、活発な開発

特徴 　① 内部的にSeleniumを使用していない 　② エンドツーエンドのテストを本当にうまく行うことに焦点を当てている 　③ あらゆるフロントエンドフレームワークまたはWebサイトで動作する 　④ テストはJavaScriptでのみ記述される 　⑤ オールインワン 　⑥ 開発者とQAエンジニア向け 　⑦ 非常に高速に動作 https://www.cypress.io/how-it-works/

オールインワン 　ああああ https://www.cypress.io/how-it-works/

% 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　←起動 インストール & 起動

サンプルのテストファイル integrationディレクトリに サンプルのテストファイル cypressディレクトリが作成さ れる

テスト実行 - GUI テストファイルをクリック ブラウザが起動して 自動テスト

Cypress Studio 　ブラウザ上で簡単にテストコード作成できる機能。 　v8.2現在、experimental（実験的）扱い。 　cypress.jsonで有効化して使用。{ "experimentalStudio": true } 　ブラウザ操作とアサーションのテストコードを生成してくれる。 　実演。 STUDIO

シナリオ作成 新規テストファイル作成

シナリオ作成 作成されたファイルをクリック

シナリオ作成 Cypress Studioでテスト作成へ

シナリオ作成 テスト対象URLを入力して 「Go→」

シナリオ作成 右の画面で行った操作が記録され る 保存

シナリオ作成 生成されたテストコード

テスト実行 - CUI npx cypress run 実行の様子が動画として 自動的に保存される（便利！）

小ネタ：テスト時のシステム時刻を固定化 テストコード内で上記を実行することで固定化できる。 あくまでクライアント側（ブラウザ側）のみ。 サーバサイドはlibfaketime等で対応。 const now = new Date(2021, 7, 23).getTime() cy.clock(now);

豊富な機能 　① テスト実行の様子をスクリーンショット・動画で出力 　② クラウド上に結果を保存・共有できるDashboard（有償サービス） 　③ CI対応（GitHub Actions、CircleCI、GitLab CI、etc） 　④ Gitホスティング対応（GitHub、GitLab、BitBucket） 　⑤ スクリーンショット前後比較テスト 　⑥ コンポーネントテスト（Angular、Vue、React対応。experimental）

活発な開発 2020.8 2020.11 2021.4 2021.7

Enjoy your E2E Life!!

参考 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/

TVISION INSIGHTS ではエンジニアを大募集中です！ ティービジョン 　インサイツ 自社サービスをフルサイクルに開発したい方、是非！ https://www.wantedly.com/companies/tvisioninsights