JetBrains Aqua + Cypress で E2Eテスト（起動〜動作確認）
株式会社プラミナスの清水です。
弊社ではWEBシステムをメインに開発を行っています。開発用ツールとして、Jetbrainsのツールを多用していますが、検証は主にE2Eテストとして、Cypressを使用し、Chromeの自動記録ツールなどを組み合わせて、ある程度のシナリオを作成し、画面ごとの機能テストを細かく調整するなどして効率化を図っています。
さて、今回紹介するJetBrains Aquaですが、Jetbrains社が2022年11月にプレビュー版として提供していたテスト自動化用の強力なQAツールで、Seleniumを主にサポートしていました。リリース当初からCypressの将来的なサポートを謳っており、ようやく正式なサポートが発表されましたので早速触ってみることにしました。なお、EAP（早期アクセスプログラム）であるため正常に動作しないかもしれないので、その点ご了承ください。
ダウンロードページはこちらです。
実行環境は以下の通り
- OS: macOS 13.4.1
- NodeJS: v18.12.1
- JetBrains Aqua: 2023.1 EAP
起動後の画面はこちらになります。
New Project をクリックすると、プロジェクト作成画面が表示されます。今回はとりあえず動作確認用にデフォルトで登録されているサンプルが動作するところまでを確認しようと思うので、設定周りは余りイジらず進めようと思います。
- 左側のメニューから
Cypressを選択 -
Nameにプロジェクト名を記入 -
Createを押下
プロジェクト作成直後の画面です。cypressのデフォルトサンプルコード付きでターミナルではcypressの自動インストールも行っているようです。
（ちなみに弊社では、レガシーなプロダクトの保守も行っており、Windows環境のNode.js v8の環境ではnpmのインストールにコケているようでした。Cypressのシステム要件はNode v14以降となっているためご注意ください。）
さて、正常にインストールできたら、早速Cypressのサンプルコードを動かしてみましょう。
手順は、以下の通り
- Aqua IDE 右上にある
(Cy)のアイコンをクリック - Cypressのコンソールが起動するので、
E2E Testingをクリック - ブラウザに
Chromeを選択して、Start E2E Testing in Chromeをクリック - テスト実行用の画面が起動するので、
Specsページにある検証内容一覧の何れかをクリック（わかりやすい例としては2-advanced-examples > actionsがオススメ - テストを実行
という流れになります。
検証方法としては以上になります。
いかがでしたでしょうか？
ドキュメントがまだプレビュー版であまり充実していないため、Aqua をエディタとして活用し、利便性の恩恵を得られるまでには至っていませんが、少なくとも起動して検証するまでの流れは掴めたかと思います。
次回は、Aqua をエディタとして活用する方法を挙げられればなぁと思っています。
Discussion