📝
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
はこの記事のコンテクストとは関係ないですがブラウザクラッシュが起きにくくなるのでおすすめです。
Discussion