Cypressの導入 | 全国個人事業主支援協会

COLUMN コラム

Cypressの導入

2022年03月31日
Cypressの導入
- プログラマー
- システムエンジニア

最近、現場でCypressを使い始めたので導入方法を記しておきます。

⒈Cypressのライブラリをインストールする。

yarn add -D cypress

⒉package.jsonにCypressを起動するためのスクリプトを追加する。

"scripts": {//追加 "cy:open": "cypress open" }

⒊下記のコマンドを実行する

yarn run cy:open

コマンドを実行するとデフォルトのディレクトリとファイルが作成され、テストランナーが起動します。

cypress
├── fixtures
│   └── example.json
├── integration
├── plugins
│   └── index.js
├── screenshots
├── support
│   ├── commands.js
│   └── index.js
└── videos

⒋tsconfig.jsonを作成する

TypeScriptの場合は、tsconfig.jsonを追加し、各種ファイルの拡張子を変更します。

cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": [
      "cypress"
    ]
  },
  "include": [
    "../node_modules/cypress",
    "./**/*.ts"
  ]
}


⒌デフォルトのファイルを変更した場合は、cypress.jsonでもパスを修正します。

cypress.json

{
  "baseUrl": "http://localhost:8082",
  "pluginsFile": "cypress/plugins/index.ts",
  "supportFile": "cypress/support/index.ts",
  "video": false,
  "screenshotOnRunFailure": false
}