【2023年】世界一やさしいCypress環境構築手順

概要

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

手順

準備

作業用ディレクトリ作成し移動

mkdir cypress
cd cypress

Cypressのインストール

yarn add cypress

npm install cypress --save-dev

初期設定＆起動

yarn run cypress open

npx cypress open

初期起動画面

スクリーンショット 2023-02-11 1.33.48.png 「Continue」を選択

E2Eを選択

ファイルの確認

Continueを選択

Chromeを選択

空のspecを作成

勝手に実行される

コーディングに関して

コーディング方法

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

ターミナルでの実行方法

下記のような形でファイルを指定することで実行できます。ただ、GUIが充実しているのでそっちで実行の方がいい気がします。コード編集したら自動でまた流れてくれますし。

yarn run cypress run --spec cypress/e2e/test.cy.js

npx cypress run --spec cypress/e2e/test.cy.js

出力

ターミナル実行の場合ログの出力をしたくなるとおもうので紹介 cypress.config.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 検索のコード

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の記事なのにスクレイピングっぽいのだけでは怒られそうなので

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                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

以上

概要

手順

準備