laravel sailで構築したプロジェクトにplaywrightを入れた時のメモ
環境
- windows 11
- wsl2
- ubuntu 22.04
- laravel 11
- laravel sail
とりあえずインストール
sail起動
WSL
sail up -d
エイリアスを登録していない場合はsailを./vendor/bin/sailに適宜読み替えて実行してください
プロジェクトが起動しているコンテナの中にはいる
WSL
sail root-shell
playwrightをインストール
dockerコンテナ
npm init playwright@latest
いろいろきかれる
dockerコンテナ
Need to install the following packages:
create-playwright@1.17.133
Ok to proceed? (y)
> npx
> create-playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Where to put your end-to-end tests? · e2e
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · true
インストールがはじまって、この表示がでたらOK
dockerコンテナ
✔ Success! Created a Playwright Test project at /var/www/html
Inside that directory, you can run several commands:
npx playwright test
Runs the end-to-end tests.
npx playwright test --ui
Starts the interactive UI mode.
npx playwright test --project=chromium
Runs the tests only on Desktop Chrome.
npx playwright test example
Runs the tests in a specific file.
npx playwright test --debug
Runs the tests in debug mode.
npx playwright codegen
Auto generate tests with Codegen.
We suggest that you begin by typing:
npx playwright test
And check out the following files:
- ./e2e/example.spec.ts - Example end-to-end test
- ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
- ./playwright.config.ts - Playwright Test configuration
Visit https://playwright.dev/docs/intro for more information. ✨
Happy hacking! 🎭
sailがplaywrightを実行できるように権限を変更する
dockerコンテナ
chown -R sail:sail /var/www/html
コンテナから抜ける
dockerコンテナ
exit
とりあえず動かしてみる
デフォルトではいっているやつをうごかしてみる
WSL
npx playwright test
とりあえずとおった
WSL
Running 6 tests using 6 workers
6 passed (18.7s)
To open last HTML report run:
npx playwright show-report
実行結果を表示してみる
WSL
npx playwright show-report
WSL
Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.
URLをコピペしなくても勝手に表示されました
テストコードを生成してみる
ポート番号はご自身の環境に合わせて変えてください(私の場合は8080)
WSL
npx playwright codegen localhost:8080
あとはお好きに～