最速で Cypress で E2Eテスト を試してみる

世の中、WebシステムのE2Eテストに興味はあるものの、何から始めたら良いかお悩みの方ばかりだと思います。
でも、まずはツールを試してみましょう。実際に手を動かすとテストのイメージが描けるようになると思います。
そこで今回は、Windows環境で実際にE2Eテストを動かすまでを最速で試してみたいと思います。


# 最速で トレンドを確認してみる
[The State of JS](https://2021.stateofjs.com/ja-JP/libraries/testing) でテストツールのトレンドを確認してみます。
（あれ、Playwrightのほうが満足度高い...）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/0570317f-3394-4dfd-d57e-365f0f1e4f19.png)
E2Eテストツールとしては、CypressやPlaywrightなどが挙げられます。Angularなら[Protractor](https://www.protractortest.org)というのもありますが、こちらは来年夏でサポートが終了してしまいます。
「利用率」としては、Cypressのほうが圧倒的ですし、今回はCypressでE2Eテストを試してみたいと思います。

# 最速で Node.js をインストールしてみる
Node.js入ってますよね？
Node.jsが無い、またはバージョンがすごく古いなら最速でインストールしましょう。
- [ダウンロードページ](https://nodejs.org/ja/download/) で Windows Binary (.zip) の 64-bit を押してZipをダウンロードします。
- Zipを解凍してパスに追加します。
例：`C:\node-v18.12.1-win-x64`
- IDEのターミナルやコマンドプロンプトで `node -v` でバージョンが表示されればOKです。


# 最速で Cypress をインストールしてみる
IDEのターミナルやコマンドプロンプトで下記のコマンドを実行します。
- npm install cypress
```
【コマンドプロンプトでの実行例】
C:\example>npm install cypress

added 165 packages, and audited 166 packages in 3m

28 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
カレントフォルダに、右記のフォルダとファイルが作られます。node_modules、package-lock.json、package.json


# 最速で Cypress の起動からE2Eテスト実行までを試してみる
IDEのターミナルやコマンドプロンプトで下記のコマンドを実行します。
- npx cypress open
```
【コマンドプロンプトでの実行例】
C:\example>npx cypress open
It looks like this is your first time using Cypress: 12.1.0

√  Verified Cypress! C:\Users\xxxxx\AppData\Local\Cypress\Cache\12.1.0\Cypress

Opening Cypress...
```
- 画面が起動しますので、`Continue > ` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/d37fb798-d69a-e682-cf1a-ff7b0266cd13.png)

- `Component Testing` も気になりますが、今回は最速を目指しているので `E2E Testing` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/bb5f9473-4003-45d0-0e86-80e2b29d64eb.png)

- 設定ファイルの説明が表示されます。後で読む、と心でつぶやいて、`Continue` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/ae697683-5da8-6bbd-8e10-f19f1d4942cf.png)

- 準備中...ワクワク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/23a6a998-ff52-e0af-8e20-aa5526b64e3a.png)

- お好きなUIを選択して、`Start E2E Testing in xxxxx` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/7d9453e6-e956-301f-a019-647e66ccba8b.png)

- ブラウザが起動するので、`Create new empty spec` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/7ec083e9-989b-01d8-a294-5c24d6f836ce.png)

- `Create spec` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/cea963f9-6662-52db-899f-519d9ecaccac.png)

- `Okay, run the spec` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/ff53d553-2482-0ad3-d00d-a9c013db4bdd.png)

- ブラウザが起動して、テストが実行されます。
`empty spec` の `passes` というテストケースが実行され、グリーンになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/4783c138-8c7f-1ed5-038b-155fc22af45d.png)
実行されたテストは、Cypressをインストールしたフォルダ（コマンドを実行した場所）の cypress\e2eフォルダにある spec.cy.js に記載されています。IDEやテキストエディタで開いて確認してみてください。
```typescript
describe('empty spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})
```
describe、it はテストの大項目名、項目名です。cy.visit(～)でCypressのコマンドを使って画面遷移の確認をしています。
シンプルですが、指定のぺージに遷移できることを検証している、立派なE2Eテストとなります。

# 最速で Cypress でE2Eテストを作ってみる
先ほどの spec.cy.js にテストを追加してみましょう。
弊社のHULFT製品ページに遷移して、右上に検索ボックスが存在するかをテストしてみたいと思います。
6行目以降に下記の内容を追記します。
```typescript
describe('HULFT.comのトップページ', () => {
  it('右上に検索ボックスが存在する', () => {
    cy.visit('https://www.hulft.com');
    cy.get('[type="text"]').should('exist');
  })
})
```
ありがたいことに Cypress のセレクタはjQueryと同じです。`cy.get('[セレクタ]')` で要素を取得できます。
ファイルを保存すると再テストが実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/bd831f30-6e5f-da80-a01e-54d9ee3ccd0a.png)
右上に検索ボックスの存在がテストされ、グリーンになりました。

今度は検索ボックスに文字を入力して、検索を実行してみましょう。
下記の内容をテストします。
  - 検索ボックスに検索する文字列 `事例` を入力
  - 検索アイコンをクリック
  - 検索結果のボックスに検索する文字列が表示されている

先ほどのテストに it として追加してみます。
```typescript
describe('HULFT.comのトップページ', () => {
  it('右上に検索ボックスが存在する', () => {
    cy.visit('https://www.hulft.com');
    cy.get('[type="text"]').should('exist');
  }),
  it('検索が行える', () => {
    cy.visit('https://www.hulft.com')
    cy.get('[type="text"]').type('事例');
    cy.get('[type="submit"]').click();
    cy.get('#search-word').should('have.value', '事例');
  })
})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60568/b458cb2d-117e-bfb5-60e6-b03c3daf2d2d.png)
数行で検索の動作をテストすることができました。セレクタやIDはブラウザの検証ツールで確認できるので、開発したアプリも実機を使って簡単にE2Eテストが行えます。

# まとめ
- 2行で始められます。
  - npm install cypress
  - npx cypress open
- Cypressは多くのブログで取り上げられていますし、[Cypressのドキュメントページ](https://docs.cypress.io/)も充実しており、チュートリアルビデオも沢山あります。 
- 実際に動かして、少し慣れてきたら [Best Practices](https://docs.cypress.io/guides/references/best-practices) を実践して、E2Eテストをさらに快適なものとしてください。