💻

Playwrightの環境構築

2024/06/17に公開

久しぶりの投稿です。
Flutterは趣味のまま1年が過ぎました。

FlutterFlowというノーコードツールを知り途中からそちらで開発をしていました。
しかし、進んでいくうちにカスタマイズが結構必要でノーコードがあまり役に立たないと判断。
また、毎月の費用もかかるのでFlutterFlowを断念。
結構な期間触っていたのでもっと早く気がつくべきだった。。。
とりあえず、少しずつ開発できればと思います。

話は変わり、今回はPlaywrightの環境構築について書いていきます。
仕事で使うことになり、知識もないことから学習も踏まえて記述していきます。

  • Playwrightの環境構築

インストール

PlaywrightはNode.jsの上で動作します。
まず、Node.jsをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"


Node.jsのインストール

Homebrewを使ってNode.jsをインストールします。これにより、npmも一緒にインストールされます。

brew install node


インストールの確認

正しくインストールが完了しているか確認します。

node -v
npm -v


Playwrightのインストール

npm init playwright@latest


インストールをすると以下の選択肢が表示されるので使用する環境に合わせて選択します。

#TypeScript か JavaScript のどちらかを選択
✔ Do you want to use TypeScript or JavaScript? · TypeScript

#テストファイルを格納するフォルダの名前を入力
✔ Where to put your end-to-end tests? · tests

#Github Action のワークフロー追加を確認
✔ Add a GitHub Actions workflow? (y/N) · true

#Playwrightで使用するブラウザをインストールするか確認
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true


成功するとターミナルに以下の表示がされます。
Happy hacking! 🎭

以上が環境構築です。
エラーも出なくてスムーズに終わった。。。。


これからもPlaywrightで学んだことを書いていきます!

Discussion