Zenn
🌲

Cypressを実際のプロジェクト向けにセットアップしてみる

2023/01/28に公開
TypeScript
Test
Cypress
tech

この記事でできること

  • Cypressを使ってE2Eテストをセットアップができる

前回の記事

セットアップ手順

プロジェクト作成

  1. 空のプロジェクトを作成する
    a. 任意のディレクトリを作成して移動

    cd ~/git/ && mkdir project && cd project

    b. Cypressのインストール

    npm install cypress --save-dev

    c. (任意)package.jsonに以下を追記し、Cypressのコマンドをscript化する

    package.json
    "scripts": {
  "cypress:open": "cypress open"
}

    d. cypressを開く

    npm run cypress:open

    e. E2E Testing -> Start E2E Testing in Chrome -> New spec -> Create new empty spec -> (一旦そのまま)Create spec

    f. 以下のように勝手にディレクトリやconfigを追加してくれる

    .
├── cypress
│   ├── e2e
│   │   └── spec.cy.js
│   ├── fixtures
│   │   └── example.json
│   └── support
│       ├── commands.js
│       └── e2e.js
├── cypress.config.js
├── package-lock.json
└── package.json

TypeScript化

  • CypressはデフォルトだとJavaScriptですが、TypeScript化することで以下のメリットが得られます。
    • 型安全性が高い
    • エディタ上で補完が効く

補完についてイメージがつかない場合、以降のイメージを参照いただければと思います。
以下はデフォルトのJavaScriptを用いている状況で、cy.と打った後、visitとかは候補に上がりますが、getとかは候補に上がりません。

インストール

npm install --save-dev typescript

セットアップ

  1. tsconfig.jsonをリポジトリの直下に作成
touch tsconfig.json
  1. 内容を一旦公式docに合わせて修正
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}
  1. リポジトリ内の.jsを全て.tsに変更する
    1. 変更対象が合っているか確認
    find . -name "*.js" -not -path "./node_modules/*" | sed -e s/\.js// | awk '{print $1 ".js " $1 ".ts"}'
    1. 大丈夫そうなら更新
    find . -name "*.js" -not -path "./node_modules/*" | sed -e s/\.js// | awk '{print $1 ".js " $1 ".ts"}'  |xargs -n 2 mv
  2. 開き直すと、この時点で補完が効くようになる

型安全なカスタムコマンドのお試し実装

  1. ひとまず型定義ファイルを、cypress/support/helpers.d.tsとして作成し、以下のような定義を追加する
cypress/support/helpers.d.ts
declare namespace Cypress {
  interface Chainable {
    getByTestKey(value: string): Chainable<JQuery<HTMLElement>>;
  }
}
  1. cypress/support/helpers.tsというファイルを作成し、以下のようなコマンドを追加する
cypress/support/helpers.ts
import "./helpers.d";

Cypress.Commands.add("getByTestKey", (value) => {
  return cy.get(`[test-key=${value}]`);
});

  1. tsconfig.jsonで**/*.tsと.tsファイルを全てincludeされるようになっているので、2の時点でエディタ補完が効く形で利用ができる

  2. 型定義があるので、引数はstring以外受け付けない形となる

  3. お試し実装の紹介なので、一旦追加したファイルは削除する

rm -f cypress/support/helpers.*

baseUrlの設定

cy.visit('http://localhost:8080/index.html')
  • baseUrlを設定することで、以下のように省略することが可能です。これにより、テストコード上で、FQDN(Fully Qualified Domain Name)を意識する必要性がなくなります。
cy.visit('index.html')
  1. cypress.config.tsにbaseUrlを追記
cypress.config.ts
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "http://localhost:8484",
  },
});

ついでにconfigを追加する（任意）

  • 個人的に設定しておいた方が良さそうなものを紹介させていただきます
  • Screenshot関連
    • screenshotsFolder（スクリーンショットの保存ディレクトリパス）
      → デフォルト設定だと若干煩雑に置かれるので、実行結果としてのディレクトリを切ってそこの中で管理したいため
  • Video関連
    • videosFolder（録画ムービーの保存ディレクトリパス）
      → screenshotsFolderと同様の理由
    • videoCompression（圧縮設定（0〜51））
      → 小さいに越したことないため
cypress.config.ts
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "http://localhost:8484",
    screenshotsFolder: "cypress/results/screenshots",
    videosFolder: "cypress/results/videos",
    videoCompression: 15,
  },
});

参考資料

Discussion