serveって
serveはこのnpmパッケージです。
静的なhtmlを閲覧するのに便利なwebサーバをコマンド一つで立ち上げてくれます。
※ワンライナーWebサーバ感覚で使用できます。
本題
最近cssを書くことが多いので、自分が試し書きした、htmlやcssのファイルをgithub上に揚げてました。
ですが、これってどんな見た目になるんだっけ？というのを確認する場合はやっぱりローカルでserveを使って確認していました。
そこで、スクリーンショットも一緒に確認したくなったので、Playwrightを使って撮ってみました。
GitHub Pagesで良さそうですが、Playwrightを使ってみたかったので試しました。
手順
初期設定など
まずは、一番上の階層にゴチャと置いてあった、htmlをpublicとno_screenshotsのディレクトリに分けました。
no_screenshotsには、プレーンな環境で、javascriptの動きを確かめたいもの(スクリーンショットを撮っても真っ白になるだけのもの)などが入ってます。
それから、公式の手順通り npm init playwright@latestを実行します。
そうすると大体こんな感じの構成になるかと思います。リポジトリはここ
playwright.config.ts修正
下記のように設定しています。
ポイントは、
baseURL: 'http://127.0.0.1:3000',
// 中略
webServer: {
command: 'npx serve public',
url: 'http://127.0.0.1:3000',
reuseExistingServer: !process.env.CI,
},
の部分です。
Playwrightでスクリーンショットを撮る対象は、serveによって立ち上げたローカルのwebサーバなので、スクリプト実行前に、webサーバが立ち上がるようにしておきます。
スクリプト作成
下記のように作成してみました。
expectなどが無いので、テストコードとはかけ離れてます(もはやスクレイピングツールです)が、やってることは単純で、publicディレクトリを再起的に辿っていきながら、パスを組み立てて行って、スクリーンショットを撮っているだけです。
実行
npx playwright testを実行するだけです。
上記で生成された画像ファイルをgit pushすれば完成です。
github上ではここから見ることができます
Discussion