はじめに結論
おとなしくCypressを使っておけ！！！
隙あらば自分語り
あけましておめでとうございます、やぐちはるおと申します。最近SIerを退職して起業しました。
起業先でしこしこアプリを作っていますが、タイトルの通り失敗したので内容を共有します。
この記事を見た出来杉君が解決策を提示してくれるのを待っています。それだけが私の望みです。
前置き
軽くAmplifyとPlayWrightについて触れておきます。
AWS Amplifyとは
AWS Amplifyはアプリ開発のためのツールで、AWSの認証やAPI、ホスティングサービスを
一言管理できるサービスになっています。これを使うことで、AWSの各サービスを一つ一つ
細かく調べなくても(※1)、簡単に(※2、※3)アプリに機能を追加することができます。
※1 嘘です。結局調べる必要があります。
※2 嘘です。AWS慣れていないと難しいです。
※3 個人の感想であり、効果・効能を示すものではありません。
FirebaseやSupabaseを知っていれば、それのAWS版だと思ってください。
最近はローコード向けのツールも提供されているので、本当に簡単になっているのかもしれません。
参考
AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた
PlayWrightとは
Microsoftが開発したE2Eテスト用のツールです。これを適切に設定することで(※4)
ページにアクセスしてログインするとか、マイページに遷移したときの画面が崩れてないかとかを
自動でテストすることができるようになります。
本題
AmplifyはGitHubなどのリポジトリと連携して、ソースコードが更新されたら
Webページに更新がかかるような設定が可能になっています。以下のような設定画面になります。
ソースコードの変更を検知すると「プロビジョン → ビルド → デプロイ → 検証」というように
処理が流れていきますが、このビルドとデプロイの間に「テスト」を挟むことができます。
そしてPlayWrightを挟んだら見事処理が落ちました。
失敗 その1 PlayWright をインストールしようとしてタイムアウト
エラー文を見てみるとPlayWrightをインストールしている途中で落ちているっぽいです。
いろんな記事をググってみても時間がかかることに言及されています。
PlayWright を使ってE2Eテストを書いてみた
Chromium, Firefox, WebKit のダウンロードが行われるため、結構時間かかります。
Playwrightも知らないで開発してる君たちへ
あと個人的にはnpm installがやたら長かったことも気になりました。。
firefoxとsafariのインストールに時間がかかってました。
書いてあるとおりなんですが、つまるところいろんなブラウザでテストできるようにダウンロードが走って
そのダウンロードにやたらめったら時間がかかってAmplifyの30分という制限時間を過ぎてしまいます。
失敗 その2 インストールするブラウザを減らしたけどタイムアウト
ブラウザのダウンロードに時間がかかるならブラウザをダウンロードしなければいいじゃない
って古事記に書いてあるってアメリカの研究所が発表してるってNHKで放送してたって誰かが言ってたので
ブラウザをダウンロードしないでPlayWrightをインストールしてみます。
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn add -D @playwright/test
こうするとPlayWrightのインストールは通りました。
しかしブラウザが無いと何もテストできないので、この上でchromiumだけインストールします。ややこしい。
yarn add -D playwright-chromium
結果は……
ここまで言って30分が過ぎタイムアウトで落ちました。もう俺はほんと何やってもダメ。
結論
おとなしくCypressを使っておけ！！！
PlayWrightはブラウザのインストールにめっちゃ時間かかるからCI/CDに乗っけるもんじゃなさそう。
というかソースコード更新するたびデプロイまでに30分以上かかるCI/CDは存在してはいけない生き物だ。
そもそもドキュメントなどを見てると基本的にCypress使うことを想定してあるっぽいので
おとなしくCypressを使うのが良さそうです。そこんとこよろしく。
あとがき
Amplify + Next.js 使った開発を日々つぶやいていますので良かったらtwiiterフォローしてくだちい。
https://twitter.com/haruo2177