Cypress で最初からDevToolを開いておく方法

TL;DR

Configを見てください

経緯

Cypressを用いて開発環境に向けてビルドしたアプリを試していたりすると開発環境用のログ出力を確認したい場合があると思います。

Cypressを普通に立ち上げてテストを書いていく分にはCypress起動後にDevToolをひらけばいいですが、CI内にheadlessで走らせて失敗時の録画などで確認したい際には最初から開いていておいて欲しいものです。

そのためのセットアップを書いておきます。

Config

cypress.config.ts

import { defineConfig } from "cypress"

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on("before:browser:launch", ( browser, launchOptions) => {
      if (browser?.family === "chromium" && browser?.name !== "electron") {
          launchOptions.args.push("--auto-open-devtools-for-tabs")
          launchOptions.args.push("--disable-dev-shm-usage")
        }
        return launchOptions
      })
    }
  }
})

簡単な解説

e2e

defineConfigで最初に指定しているe2eはテストランナーについての設定をオーバーライドするものです。
Configuration | Cypress Documentation #e2e

setupNodeEvents

テストランナーのうちCypress自身に触れる部分になります。
引数には上記のデモに渡しているプラグインイベントであるonの他にオプショナルな引数としてconfigを渡すこともできます

Configuration | Cypress Documentation #e2e

プラグインイベントには色々なものがあります。タスクごとに処理を追加したり、テストファイルのテスト完了時のフックを拾って別のWebhook叩いたりといったことも可能になりますし便利です。

ここで設定している launchOptionはchromium系のブラウザに有効な起動時のオプションを色々なオプションがあります。
下記が参考になります

--auto-open-devtools-for-tabs が全てのタブであらかじめDevtoolを開いていてくれるものになります。
--disable-dev-shm-usageはこの記事のコンテクストとは関係ないですがブラウザクラッシュが起きにくくなるのでおすすめです。