見出し画像

Cypress テストランナーのカラーテーマをダークモードにする

本記事では、Cypress のプラグイン「cypress-dark」を利用して、Cypress のテストランナー(GUI モード)のカラーテーマを変更する方法について記載しています。
白いカラーテーマだと目が疲れる方は、どうぞ。
簡単に設置できましたので、Cypress のプラグイン設置の練習にもおすすめです。

cypress-dark のインストール

npm install --save-dev cypress-dark

モジュールを読み込む

support/index.js に cypress-dark モジュールを読み込む指定を書きます。

// Alternatively you can use CommonJS syntax:
// require('./commands')
require('cypress-dark')

Cypress テストランナーを起動する

Cypress テストランナーを起動します。

npx cypress open

Spec ファイルを実行すると、下記のようにダークカラーのテーマで表示されます。

画像1

require('cypress-dark/src/halloween') を指定すると、ハロウィーンテーマにも変更できます。試していませんがテスト失敗時に魔女の笑い声が出るらしいので、サウンド設定にはご注意ください。