こんにちは！みなさん、テストしてますか？
この連載では、モダンなE2Eテストの考え方をマスターするために、実践的なハンズオンから始まり、歴史的な背景や理論的な知識、そして実際のプロジェクトで活用するためのベストプラクティスまでを幅広くカバーしていきます。
E2Eテストのアイディアそのものは普遍的なものですが、いざ学ぼうとすると様々な時代のプラクティスが混在しており、どれを取り入れるべきか迷うことも多いと思います。この連載を通じて、現代的で実用的なE2Eテストの知識を体系的に身につけていただければと思います。
初回となる第1回では、理論よりもまず「動くもの」を作ることを重視し、Playwrightを使った実践的なハンズオンを通じてE2Eテストの基本的な流れを体験していきます。ちょっと長めなので前後編に分け、前編ではまず環境構築などの事前準備を進めていきます。
出来るだけプログラミングなどの知識が無くてもついていけるように書いていますので、初学者の方も怖がらずにトライしてみてください。あ、でも、みんな苦手なあの文字だらけの黒い画面のヤツはちょっとだけ出てきますから、頑張って克服しましょう！
必要な環境
Playwrightはクロスプラットフォーム（Windows、Mac、Linux）で動作しますが、いくつかシステム制約が存在します。2025-08月時点の動作環境は次の通りです。
- Node.js 20、22、または24の最新版。
- Windows 10以降、Windows Server 2016以降、またはWindows Subsystem for Linux（WSL）。
- macOS 14 Ventura以降。
- Debian 12、Ubuntu 22.04、Ubuntu 24.04（x86-64およびarm64アーキテクチャ対応）。
また、本記事ではPlaywrightのコードを作成する際に Visual Studio Code （以下 VSCode）の拡張機能を使いますので、VSCodeの最低動作環境も満たす必要があります。
- 1.6 GHz以上のプロセッサ
- 1 GB以上のRAM
- Windows 10および11（64ビット）
- macOS（Appleのセキュリティアップデートが提供されているバージョン。通常は最新バージョンとその2つ前まで）
- Linux（Debian系）：Ubuntu Desktop 20.04、Debian 10
- Linux（Red Hat系）：Red Hat Enterprise Linux 8、Fedora 36
この記事では、WindowsとMacでの操作を説明します。
事前準備: Node.jsのインストール
PlaywrightはNode.jsというランタイム（プログラミング言語を実行するための土台）の上で動作します。
CLI（コマンドラインインターフェース）を使う
まずは、お使いの環境でCLI（コマンドラインインターフェース）を起動しましょう。CLIとは、普段みなさんが使っているグラフィカルユーザーインターフェース（GUI）とは異なり、テキストベースでコマンドを用いてコンピューターを操作するためのUIです。Windowsの場合はPowershell、Macの場合はターミナルというCLIアプリを使います。
Windows:
- スタートメニューを開き、「powershell」と入力してEnter（PowerShell）
- または「Windowsキー + R」を押して「powershell」と入力しEnter
Mac:
- 「command（⌘） + スペース」を押して「ターミナル」と入力し、Enter（Spotlight検索でターミナルを起動）
Node.jsのインストール
PlaywrightはNode.js上で動作するため、まずNode.jsをインストールする必要があります。Node.jsは、JavaScriptをブラウザ外で実行できるようにするランタイム環境です。
公式サイト https://nodejs.org/ja/download に、各OS向けにインストール方法が記載されていますので、そちらにならってインストールしましょう。
参考までに、MacOSにNode.jsとnpm（パッケージマネージャー、後述します）を、nvmというNode.jsのバージョン管理ツールを使ってインストールする方法を記載しておきます。こちらは上記の公式サイトから転載したものです。
# nvmをダウンロードしてインストールする：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# シェルを再起動する代わりに実行する
\. "$HOME/.nvm/nvm.sh"
# Node.jsをダウンロードしてインストールする：
nvm install 22
# Node.jsのバージョンを確認する：
node -v # "v22.19.0"が表示される。
# npmのバージョンを確認する：
npm -v # "10.9.3"が表示される。CLIからのインストールがうまく行かない場合は、公式サイト下部にインストーラーへのリンクがあるので、そちらを使ってもOKです。
インストールの確認
インストールが完了したら、以下のコマンドで正しくインストールされたか確認しましょう。バージョン情報が表示されればOKです。
Windows/Mac共通
# Node.js のバージョンを確認
node --version
# v22.x.x のような出力が表示されればOK
# npm のバージョンを確認（Node.js と一緒にインストールされます）
npm --version
# 10.x.x のような出力が表示されればOK事前準備: Visual Studio Code (VSCode) のインストール
次に、VSCodeをインストールします。VSCodeはオープンソースのエディターで、プログラミングをするときに使いますが、Playwrightのテストを簡単に記録・実行できる拡張機能なども用意されています。
VSCodeのインストール
公式サイトからインストールします。
https://code.visualstudio.com/Download
ここは特に難しいところも無いので省略します。公式サイトに記載された手順に従って進めてください。
Playwright 拡張機能のインストール
次に、Playwright拡張機能をインストールします。VSCodeは様々な拡張機能をインストールすることで機能を追加できるのが大きな特徴です。Playwright拡張機能をインストールすることで、ブラウザのインストールなどの準備やテストの記録、管理などをVSCode上で出来るようになります。
以下のURLから拡張機能をインストールしましょう。
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
Install をクリックするとVSCodeが開くので、ここでもInstallをクリックします。
Playwrightのインストール
続いて、Playwrightをインストールします。一つ上の節でインストールしたのはVSCodeの拡張機能でしたが、今度はPlaywright本体をインストールします。なお、VSCodeやNode.jsなどは一般的なアプリケーションと同様に一度インストールすればOKですが、Playwrightはプロジェクト（フォルダ）ごとにインストールする必要があります。
VSCodeで File > Open Folder の順にクリックし、フォルダを選択します。このフォルダの中にPlaywrightをインストールします。慣れていない人は、なるべく新しいフォルダを作って作業するようにし、うっかり大事なファイルが消えてしまわないようにしましょう。
インストールはVSCode上で行います。Windowsの場合は Ctrl + Shift + P、Macの場合は Cmd + Shift + P を押し、コマンドパレットを開きます。
コマンドパレットからは、VSCodeの様々な機能にアクセスできます。まずは Install Playwright と入力し、Enterを押します。
次に、インストールするブラウザを選択します。特に好みがなければデフォルトのままで良いでしょう。
前編のまとめ
前編では、Node.jsとVSCode、それからPlaywrightをインストールして、自動化に必要な準備を一通り終えました。慣れている方はスムーズに行くと思いますが、不慣れな方は結構時間が掛かったんじゃないでしょうか。もし分かりにくいところがあったら、筆者のXアカウント https://x.com/tsueeemura などで遠慮なく聞いてくださいね。
続く後編「テスト自動化編」では、さっそく最初のテスト自動化に挑戦してみますよ！
▼後編はこちら
