PlaywrightのHermetic Install
ankdPlaywright is 何
もっぱらE2Eテストに使われるテストツール。
クロスブラウザに対応してたりなんなりで、競合と比べても今選ぶなら基本これなんじゃないかなと思ってる。
例としてpuppeteerとの比較。2年単位とかで見た時のPlaywrightの上がり方がすごい。
ankdクロスブラウザテストどうやってんの
ブラウザのインストール・アンインストール
普通は初回セットアップ時にブラウザもインストールするか聞いてくれるので、そこでYesと答えておけば普通やることない（はず、やってないのでわからん）。
あとから追加・削除したくなったらCLIから両方できる。
どこに入る？
基本的にはOSごとに決められたディレクトリにインストールされる。
- %USERPROFILE%\AppData\Local\ms-playwright on Windows
- ~/Library/Caches/ms-playwright on macOS
- ~/.cache/ms-playwright on Linux
つまりはPlaywrightを入れたプロジェクトを走らせてる環境にぶっこまれる。
人によって変わるの嫌だなぁ...
インストールって必要？普段使ってるやつ使えないの？
設定ちょろっとだけ変えればローカルに元から入っているやつも使える。
export default defineConfig({
// ...
projects: [
// ...
{
name: 'Google Chrome',
use: { ...devices['Desktop Chrome'], channel: 'chrome' },
},
]
});
channel: 'chrome'でうまいこと探してくれる。
まぁこれも人によって変わるのは一緒。
ankdHermetic Install is 何
"Hermetic" is 何
hermetic
- 密封した
- 外部から影響されない
"Hermetic install" =「外部から影響されないインストール」（？）。
Hermetic Install is 何
ブラウザをnode_modules内にインストールしてくれる。
マシンの環境汚染しないし、同じプロジェクトであればみんな同じ環境でテストできる。
みんなハッピー。
どうやるの
ブラウザのパスを指定する環境変数に0を設定する。
PLAYWRIGHT_BROWSERS_PATH=0
VSCodeの拡張機能だと通らない
マシン側で環境変数を設定してからVSCodeの拡張機能でテストを実行。
→「ブラウザいないからインストールしてね」とエラーを吐きテストが通らない。
これ、拡張機能の設定で環境変数を設定してやると通った。
{
"playwright.env": {
"PLAYWRIGHT_BROWSERS_PATH": 0
}
}
これだけ設定すれば良かったりする？未検証（今後やる予定もなし）。
ankd元々何したかったか
実はE2Eテストをしたかったわけではなく、単にプロジェクトの環境でchromium使いたかっただけ。
storycapでキャプチャを撮るのにブラウザが必要だったけど、自環境がWSLでWindows側に入ってるchromeにパスが通ってなかったのでエラーになった。
これを通せばいい話ではあるけど、チーム開発で導入するならそういう環境による差分はなくした方が基本は嬉しいはず。
というわけでプロジェクトの外に依存しない形の方法を考えた結果、今回の話に行き着いた。
実際のところ、storycapはローカルに入ってるものの他に、puppeteerを一緒に入れてればそこに同梱されてるchromiumを見に行くからそちらを使えば良かったりする。
ただ冒頭に書いた通り、今入れたもので今後E2EテストするようになるならPlaywright入れたいと思ったので調べてみた。
ankdまぁ結局そんな微妙な環境で開発してるの自分だけだったのでパス通して終わりでええかってなってるところ。
調べ物自体は面白かったので後で記事にまとめるかも。たぶん。