CypressでE2Eの世界観にほんの少しだけ触れてみた

## 概要
Cypress初めて触ってみる人向けの資料

## 手順
### 準備
#### 作業用ディレクトリ作成し移動
```sh
mkdir cypress
cd cypress
```

#### yarnの初期化
```
yarn init -y
```
#### Cypressのインストール
```sh
yarn add cypress
```
#### 初期設定＆起動
```sh
yarn run cypress open
```

#### E2Eを選択

![スクリーンショット 2022-11-11 11.17.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/b3e9e74b-e17c-0f78-4485-8870a7e1d782.png)
![スクリーンショット 2022-11-11 11.17.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/edba444a-76d3-a119-9b71-2787dccdf387.png)

#### Chromeを選択

![スクリーンショット 2022-11-11 11.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/d69cd6bc-3a8c-927c-16d1-f0e67800063b.png)

#### 空のspecを作成

![スクリーンショット 2022-11-11 11.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/88374bc9-08e1-0aa9-629d-004bb75d46bf.png)
![スクリーンショット 2022-11-11 11.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/f6bf1ed9-86f4-c64e-bdf4-457be0011478.png)

#### 勝手に実行される

![スクリーンショット 2022-11-11 11.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/bde7efb8-3c78-0b80-da63-67a61d3d5d2b.png)

### コーディングに関して
#### コーディング方法
今まで画面上でぽちぽちしていたのですが、じゃあどうやって実際のテストとか書いてくねん？？って話なんですけど。
作成したディレクトリの中に`cypress/e2e/`というディレクトリがあり、そこを書き換えることで好きにコードが書けます。

#### ターミナルでの実行方法
下記のような形でファイルを指定することで実行できます。
ただ、GUIが充実しているのでそっちで実行の方がいい気がします。
コード編集したら自動でまた流れてくれますし。
```
yarn run cypress run --spec cypress/e2e/test.cy.js
```
#### 出力
ターミナル実行の場合ログの出力をしたくなるとおもうので紹介
cypress.config.jsを下記のように書き換え
```js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        log(message) {
          console.log(message)
          return null
        },
      })
    },
  }
})
```

テストコードの中では
```
cy.task('log', '出力したいもの')
```
という形で出力できます。

### 実例紹介
あとはもう、実例みて行った方が早い気がするので色々載せます
#### Google 検索のコード
```js
describe('empty spec', () => {
  it('Googleで検索', () => {
    cy.visit('https://www.google.com/?hl=ja')
    cy.get('input').eq(0).type('綾瀬 居酒屋 食べログ{enter}')
    // 見出しを出力
    cy.get('h3').each(h3 => {
      cy.task('log', h3.text())
    })
  })
})
```
出力
```
綾瀬駅でおすすめの美味しい居酒屋をご紹介！ - 食べログ
綾瀬で人気の居酒屋 ランキングTOP20 - 食べログ
綾瀬でおすすめの美味しい居酒屋をご紹介！ - 食べログ
足立区綾瀬でおすすめの美味しい居酒屋をご紹介！ - 食べログ
千住・綾瀬・葛飾で人気の居酒屋 ランキングTOP20 - 食べログ
綾瀬駅でおすすめのグルメ情報をご紹介！ | 食べログ
綾瀬駅でランチに使える居酒屋 ランキング | 食べログ
綾瀬市でおすすめの美味しい居酒屋をご紹介！ - 食べログ
【個室あり】綾瀬駅でおすすめの居酒屋をご紹介！ - 食べログ
綾瀬のグルメ・レストランガイド - 食べログ
```
#### Google検索結果のテスト
E2Eの記事なのにスクレイピングっぽいのだけでは怒られそうなので
```js
describe('empty spec', () => {
  it('Google検索で食べログのページが1件目に表示される', () => {
    cy.visit('https://www.google.com/?hl=ja')
    cy.get('input').eq(0).type('綾瀬 居酒屋 食べログ{enter}')
    cy.get('h3').eq(0).should('have.text', '綾瀬駅でおすすめの美味しい居酒屋をご紹介！ - 食べログ')
  })
})
```
出力
```
    ✓ Google検索で食べログのページが1件目に表示される (5587ms)


  1 passing (7s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     6 seconds                                                                        │
  │ Spec Ran:     google-search-test.cy.js                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
```