dockerでPlaywrightの環境を立ち上げます。
ホスト側のブラウザでdocker側の仮想ディスプレイに接続し自動テストが動いている様子も見ることができます。
また、レポートもホスト側のブラウザからアクセスできるように設定しています。
dockerをインストールし、実行してください。
また、このリポジトリをダウンロード(code→Download ZIP)するか、cloneしてください。
ターミナルなどで、ダウンロードしたデータのdocker-compose.ymlがある場所に移動してください。以下を実行するとイメージが作成されます。それで終わりです。
docker-compose build
mountフォルダの中のtestsフォルダにテストを入れてください。その中のテストが実行されるようにしています。
docker起動時は
mountフォルダがdockerコンテナと同期するようにしています。 どのフォルダの中をテストするかはplaywright.config.tsに記載しています。
以下でdockerコンテナを立ち上げます。
docker-compose up -d
以下でdockerコンテナの中に入ります。
docker exec -it playwright bash
以下で仮想ディスプレイを立ち上げます。
./start.sh
"Permission denied"と表示される方は
chmod 755 ./start.shを一度実行してから行ってみてください。
テスト実行時のブラウザが動く様子を見なくていい場合は3.と4.は必要はありません
ホスト側（dockerコンテナではなく、いつものパソコンのほう）のブラウザのアドレスに以下を入力しenterを押す。
http://localhost:8010/vnc.html
「noVNC connect」とでるので、connectをクリックする。真っ黒い画面が出たら成功です。
dockerコンテナのほうで、以下を入力すればplaywrightが実行されます。
このとき、実行の様子が4で開いたブラウザに表示されます。（--headedが実際にブラウザを表示する意味）
npx playwright test --headed
実行が完了したら、ホスト側のブラウザのアドレスに以下を入力しenterを推すとレポートが見れます。
localhost:9323
または、mountフォルダが同期しているのでplaywright-reportフォルダのindex.htmlを直接開いても結果を見ることができます。
ホスト側のmountフォルダとdockerコンテナ側の/appフォルダの中身は同期されているため、dockerを起動している状態で、ホスト側でリアルタイムで修正できます。
修正が終わったら、再度npx playwright test --headedを実行してください。（ブラウザを表示しなくていいときは--headedをとってください）
以下でdockerコンテナから抜けることができます。
exit
以下でdockerコンテナを終了させることができます。
docker-compose down
またdockerを立ち上げたいときはdockerコンテナの立ち上げとテスト実行準備から行ってください。
以下を実行すると、dockerコンテナに入らずに(docker exec -it playwright bashを実行せずに)テスト実行ができます。
docker exec playwright ./no_display_test.sh
dockerコンテナの中で以下を実行すると、特にテスト実行中のブラウザの動く様子を見ることなしに（ヘッドレスの状態で）テスト実行をします。
./no_display_test.sh
shの中身は
xvfb-run npx playwright testを実行しているだけです。