playwrightでVRT
運用イメージ
PR open時に差分比較のテスト実行、レポートのURLをPRにコメント
PR merge時にキャプチャ更新を実行する
擬似的にスクロールさせる
画面スクロールするとアニメーションするページ
window.scrollTo()を使うとなぜか部分的にアニメーションが動いていない
scrollIntoView()を使うと綺麗にキャプチャがとれた
code:js
await page.evaluate(
() =>
document.getElementById('copyright')?.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest',
})
);
await sleep(1000); // 少し待たないとアニメーションが途中で終わってしまう
キャプチャサイズの調整
toHaveScreenshotshot()のclipオプションで指定できるが、幅だけの指定ができない
configのviewportSizeを指定する方法もあるが、こちらも幅だけの指定はできない
htmlをpreviewする
下記サイトを利用する（actionsもある）
privateなrepoではURLでは404になる
https://raw.githubusercontent.com/xxx/xxx/main/index.html?token=GHSAT0AAAAAACFSTVM5OOHBHUEGJ5E74BZWZKIXNOAのように、rawデータのリンクをコピペすれば表示可能
ただしactions版では上記手段はとれない
下記の方法で代用？
PRコメントにindex.htmlのリンクとpreview用のサイトのリンクを貼っておく
⇨レポートの一覧画面には飛べたけど、詳細ページはrawデータのhtmlのままなのでそこもpreview化が必要。流石に辛い
そもそもテストがfailしない限りは毎回レポートを見る必要はないので、fail時に手動でDLして見るでもいいか
artifactのDLリンクをPRにコメントさせたい
→DLリンクは1分で有効期限が切れるらしい
実行結果のリンクを送りたいが、当然だが実行中には送れない
レポート生成とコメント追加のワークフローを分ける
最初のWFでレポート生成し、次のWFでPRにコメントする
WFの順番を指定するためにはworkflow_runオプションで指定する
WFからコメントするにはPRとの紐付けが必要
最初のWFから次のWFにデータを渡す方法はある？artifact以外で
改善点
3m以上かかってるので高速化する
playwright自体の高速化
CI上では2回ずつretryしている。いらないか？
WFの高速化
キャッシュヒットしない問題
後処理のステップでcache savedが出てる＆cachesタブ上でも確認できている
PRをトリガーとしたWFで作成したキャッシュは、別のPRのWFでは参照できないらしい
gptに同様の質問をしたらartifactの利用を勧められた
main（デフォルトブランチ）のpushをトリガーにして、package-lock.jsonに変更が生じていたらcache更新するWFを別に用意しておく？
playwrightのバージョン変更（browserの再インストール）はどう拾うか
artifactsにバージョン情報を残しておく
→他WFのartifactsは参照できないっぽい。のでgit管理にする
処理イメージ
mainのpushがトリガー
package-lock.jsonの変更をチェック
変更なしなら終了。変更有りなら再インストールしてcache更新
インストール後のplaywrightのバージョンとartifactsのplayrightのバージョンを突き合わせる
同じなら終了。変更があればbrowserを再インストールしてcache更新。artifactsを再アップロード
push時に複数コミット存在する場合の考慮必要
コミットの配列でループ⇨changed filesでループ
マージ時のWF作成
手動実行も可能にする