導入環境
- Mac(M1) 15.3.2
- Node.js v22.19.0
- npm 10.9.3
事前準備
Playwrightをインストールする前に、Node.jsをインストールしておきます。
Node.jsインストール手順
今回はHomebrewを使用してインストールしていきたいと思います。
①Node.jsインストールコマンド
brew install node
②インストール&バージョン確認
インストールに成功していれば、下記コマンドでバージョンの確認ができます。
node -v
自分の場合 v14.21.1 だったようで、このままだとPlaywrightが動きません。
このまま動かそうとすると
You are running Node.js 14.21.1.
Playwright requires Node.js 18 or higher.
Please update your version of Node.js.
のエラーメッセージが出て、ver.18以上が必要だよ、とのことでした。
nvm ls
でどんなバージョンがあるか一覧表示させ、 LTS(Long Term Support)で長期間サポートされるバージョンの v22.19.0 をインストールしました。
nvm install v22.19.0
バージョンが切り替わらない時は、
nvm use バージョン
でバージョン指定してあげてください。
Playwrightインストール手順
それではPlaywrightをインストールしていきましょう。
npm init playwright@latest
※今回はnpmでインストールしています。
すると初期設定の質問が出てきます。
# TypeScript か JavaScript のどっちを使うのか
Do you want to use TypeScript or JavaScript?
"自分はTypeScriptを選択"
# e2e テストファイルが格納されるフォルダの名前の設定
Where to put your end-to-end tests?
"自分はデフォルトのtestsのまま"
# GitHub Actions のワークフローを追加するかどうか
Add a GitHub Actions workflow? (y/N)
"自分はNoを選択"
# Playwright で使用するブラウザをインストールするかどうか
Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n)
"Yesを選択"
インストールを待ちます、、、
インストール完了のお知らせ Happy hacking! 🎭 が表示さると成功です！
作成されるフォルダ
インストールが完了すると自動的に以下の構成のフォルダが作成されます。
│── node_modules
│── tests
│ └── example.spec.ts # 基本的なサンプルテスト
│── tests-examples
│ └── demo-todo-app.spec.ts # ToDoアプリをテストするための詳細なサンプルテスト
│── .gitignore
│── package-lock.json
│── package.json
└── playwright.config.ts #Playwrightのファイル。どのブラウザで実行するかなど設定できる
.spec.tsのファイルが実際のテストコードが記述されているので、中身を見て参考にしたり、実際に実行したりして体験してみると良いと思います。
環境構築お疲れ様でした！
