Cypressで自動テストを試してみた

##はじめに
会社ではSelenide + Cucumberを使っていたのですが、いろいろと悩ましいところが出てきたので別のテストツールを検討しました。
とりあえずチームで言われていたのは以下のような点。
######軽減できた点
・開発自体はVisual Studioを使っているので、Eclipseも使うとPCが重い。
・テストプロジェクトのビルドに時間がかかりすぎ
・ログが読みにくい／どこでエラーが発生しているかわかりづらい
・テスト結果が安定しない

######軽減できなかった点
・学習コストがかかる
・工数がかかる

##やったこと
######Cypressのインストール・テスト実装・実行
まずは普通に使ってみました。
######Cypressダッシュボードの利用
大事ですよね。運用かえるにはどうしても工数がかかるので、目に見えてわかりやすくマネジメントに訴えかけてくれるダッシュボード機能が必要。あるとテンション上がるし。
######Cypress Recoderの利用
学習コストが・・・、工数が・・・という話があったので、レコーディングできるツールがないか探して使ってみました。（結果はうまく使えませんでした。）

##Cypressのインストール・テスト実装・実行
参考にしたページ：[【入門】はじめての Cypress](https://qiita.com/eyuta/items/a2454719c2d82c8bacd5"【入門】はじめての Cypress")

####前提
Node.jsとnpmがインストールされていること
インストールしてない人は[ここ](https://qiita.com/mk185/items/7ad004bf202f400daea1"Node.js・npmのインストール方法")を参考に入れてください。

####Cypressのインストール

```msshell:
npm init -y
npm install -D cypress typescript
npx tsc --init --types cypress --lib dom,es6
```

####テストの作成
成功するテストと失敗するテストを作ります。
以下はいずれもQiitaの会社概要ページを開き、h1の文言をチェックするコードです。
作成してcypress/integration直下に格納してください。

```Javascript:test_success.spec.js
// 成功するコード
context('Next.js test', () => {
  it('should access localhost', () => {
    cy.visit('https://corp.qiita.com/company/');
    cy.get('h1.pageTitle').should('have.text', '会社概要')
  });
});
```

```Javascript:test_fail.spec.js
// 失敗するコード
context('Next.js test', () => {
  it('should access localhost', () => {
    cy.visit('https://corp.qiita.com/company/');
    cy.get('h1.pageTitle').should('have.text', 'かいしゃがいよう')
  });
});
```

####テスト実施
まずCypressを起動します。

```msshell:
npx cypress open
```
以下のような画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/0b3eb047-17ee-069e-ed03-0f17f60a3914.png)

先ほど作成した「test_success.spec.js」をクリックするとテストが実行されます。
以下のようにテスト結果が表示され、テストが成功していることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/0c66ef74-f18e-23fc-9773-6c79af7e266c.png)

同じく「test_fail.spec.js」をクリックするとテストが実行され、失敗します。
期待値が何で、ソースコードのどこでエラーが発生しているかが非常にわかりやすいですね。
実行もGUIからできるので非常に使い勝手がいいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/5a80a3d4-983e-6293-5e7b-87ea0fd3a89d.png)

##Cypressダッシュボードの利用
ダッシュボードを利用するにはまず[Cypressのサイト](https://www.cypress.io/"Cypress")でアカウントの登録を行います。
サイトにアクセスし、右上のSign upからアカウントを作成してください。

######プロジェクトの作成
アカウントを作成したら、ログインしてProjectsから「Create New Project」を選択してください。
![スクリーンショット 2022-02-01 011028.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/1b359d41-7d05-533d-416d-730d8b20d380.gif)

プロジェクトの作成画面が表示されるので必要な項目を入力してプロジェクトを作成してください。
CI providerは未入力でもよいです。

######テストの実行
プロジェクト作成後の画面に表示されている通りcypress.jsonを修正してください。

```json:cypress.json
{
    "projectId": "プロジェクトID"
}
```

プロジェクト作成後の画面に表示されているコマンドを実行します。
Cypressインストール時に自動で作成されるサンプルコードも実行されるためそこそこ時間がかかります。

```msshell
npx cypress run --record --key キー
```
テスト実行中もCypressのサイトで処理状況を確認できます。
実行が終わると以下のような画面を確認できます。
![スクリーンショット 2022-02-01 014526.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518616/ed9b5f34-6613-3fbe-c388-fafb67a3a815.gif)

Failed Testを選択すると画面上で具体的なエラー個所のソースも確認できますし、エラー時の画面キャプチャも確認できます。
また分析ツールも充実しているのでいろいろと触ってみてください。

##Cypress Recorderの利用
Cypress RecorderはChrome拡張機能で、Chrome上の操作を記録してCypressのソースを生成してくれます。
ただうまくいかなかったので詳細は割愛します。

以下の操作をレコーディングしてみました。
１．Qiitaのトップページを開く
２．Javascriptタグのリンクを押下
３．Javascriptのページにある「Javascript」という文言をクリック

生成されたコードは以下です。
２．のリンク押下をうまく拾ってくれませんでした。
いくつかのサイトで試しましたが、うまく動かず諦めました。
またKatalon Recoderと異なり、Assertのソースを生成できないこともネックでした。

```Javascript:
cy.visit('https://qiita.com/');
cy.url().should('contains', 'https://qiita.com/tags/javascript');
cy.get('.css-j6hlwq').click();
```

##総括
総じて言えるのは手軽／使いやすいです。環境のセットアップも容易で実行も早い。UIも分かりやすく、悩むところが少なかったです。
半面JUitやMybatisなど、関連するライブラリと組み合わせてリッチな機能を持たせられるSelenideとある程度、手が届かないところもあるかと思います。ただ自動テストは全部やろうとするとコストが洒落にならなくなるので、手軽にできる範囲・重要なケースを自動化するというもありかなと思いました。