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 ファイルを実行すると、下記のようにダークカラーのテーマで表示されます。
require('cypress-dark/src/halloween') を指定すると、ハロウィーンテーマにも変更できます。試していませんがテスト失敗時に魔女の笑い声が出るらしいので、サウンド設定にはご注意ください。