🐼

「VSCodeでいいじゃん」に抗う。Neovim + neotest で作る最強のPlaywright環境

ryo_tsukada

2025/12/15に公開

Vim

Playwright

tech

!この記事はLITALICO Engineers Advent Calendar 2025 カレンダー1 の16日目の記事です

 はじめに株式会社LITALICOでQAエンジニアをしている塚田です！

昨年度までは手動テストをメインで担当していましたが、今年度からE2Eテストの実装、つまり 「コードを書く」タスクを担当することになりました。

弊社ではノーコードツールのmablも使用していますが、今回僕がアサインされたプロジェクトではPlaywrightを採用することになりました。
正直なところ、プログラマ出身ではない自分が一人で実装していけるか不安もありました。しかし、そんな僕でも自力でコードを書けるようになったのは、Playwrightの 「直感的な使いやすさ」と「圧倒的な情報の多さ」 のおかげです。
公式ドキュメントやYouTubeが充実しているのはもちろん、日本語の書籍も出版されています。多くのエンジニアがブログ等でノウハウを発信してくれているため、詰まってもすぐに解決策が見つかる環境は本当に心強いです。
さらに開発も積極的に行われており、2025年3月にはPlaywright MCPが公開され、同年10月にはPlaywright Agentも発表されました。今後も開発が進んでいく可能性は高いと思います。
このようにPlaywright自体は素晴らしいツールですし、僕も今後使い倒していきたいと考えています。ですが、一つだけどうしても我慢できない不満があります。

それは世の中のPlaywrightに関する情報がVSCodeの使用を前提にしていることです。 PlaywrightとVSCodeはどちらもMicrosoftで開発されているためか、VSCode用のPlaywrightの拡張機能がとても充実しています。実際に使ってみると分かると思いますが、かなり使い心地もいいです。
「便利に使えるならいいじゃないか」と思いましたよね？それがダメなんです。なぜなら僕はVimが大好きなんです。 Playwrightの情報を探すのに苦労はしませんが、どれもこれもVSCodeを使用している。Vimで快適にPlaywrightを使うための情報はほとんどありません。

そのため僕も最初は諦めてVSCodeで実装をしていました。VSCodeをVimのコマンドで操作できるようにしてみました。それでも満たされませんでした。「なんだかなー」と思いながら実装を続けていました。
特にきっかけがあったわけではないのですが、「やっぱりVimが使いたい！！」と思いVimでPlaywrightを快適に実装する方法を模索しました。その結果、今はVimだけでPlaywrightを実装できるようになりました。今回はVimで快適にPlaywrightを実装するための環境構築をお伝えしていきます。
!VSCodeを否定する意図は全くありません。ただただVimを使いたいだけです

 neotest-playwright を入れればVimでもPlaywrightを有効に使える！「環境構築」と大げさに言いましたが、実はプラグイン一つでほぼほぼ解決します。

必要なプラグインは以下の2つです。

neotest: Neovimのテスト実行基盤。

neotest-playwright: 今回の主役。
このプラグインを導入すれば、テスト実行と結果確認、オプションの選択が簡単にできるようになります。

 快適なテスト実装ワークフロー
 キーマッピング最初に僕のneotest-playwrightのキーマッピングを紹介します。
-- neotestのキーマッピング
map('n', '<leader>tt', '<Cmd>lua require("neotest").run.run()<CR>', { desc = 'Run nearest test' })
map('n', '<leader>tf', '<Cmd>lua require("neotest").run.run(vim.fn.expand("%"))<CR>', { desc = 'Run current file tests' })
map('n', '<leader>td', '<Cmd>lua require("neotest").run.run({strategy = "dap"})<CR>', { desc = 'Debug nearest test' })
map('n', '<leader>ts', '<Cmd>lua require("neotest").summary.toggle()<CR>', { desc = 'Toggle test summary' })
map('n', '<leader>to', '<Cmd>lua require("neotest").output.open({enter = true})<CR>', { desc = 'Open test output' })
-- neotest-playwright専用のコマンド群
map('n', '<leader>tp', '<Cmd>NeotestPlaywrightProject<CR>', { desc = 'Playwright project settings' })
map('n', '<leader>tpr', '<Cmd>NeotestPlaywrightPreset<CR>', { desc = 'Playwright preset' })
map('n', '<leader>tra', '<Cmd>NeotestPlaywrightRefresh<CR>', { desc = 'Playwright refresh' })
-- プリセットをheadedに設定（ブラウザ表示）
map('n', '<leader>th', '<Cmd>NeotestPlaywrightPreset<CR>', { desc = 'Set headed preset' })
このキーマッピングを使って実際に操作している画面を共有します。

画面右下のScreenkeyには実際に入力したコマンドを表示させています。ちなみに<leader>はspaceキーのことです。
!下記のキャプチャではテストコードが表示されていますが、弊社のコードではありません。Playwright Agentを使ってテスト自動化練習サイト - HOTEL PLANISPHEREのテストコード作ってもらったものです

 <leader>ts（Summary）：テストファイル一覧の表示右側のウィンドウにテストファイルが階層構造で表示されています。

テストファイルを選択するとテスト名が表示されるようになっています。ここにはPlaywrightのテストケース（describeやtestブロック）がツリー構造で一覧表示されます。

テストファイル一覧を右側のウィンドウに表示

 <leader>tt（Test Nearest）：カーソル付近のテストだけを実行するテストコードの行番号横に実行中のテストはサークルが表示されていて、実行中はクルクル回っています。それに連動して右側のウィンドウでも実行中のテストがわかるようになっています。

テストを1つだけ指定して実行

 <leader>tf（Test File）：ファイル全体でテスト実行現在開いているファイルのテストをすべて実行します。キャプチャでは3行目と10行目のサークルがクルクル回っています。

ファイル内のテストをすべて実行

 <leader>to（Output）：テスト結果の詳細確認実行結果はテストコード横に成功なら☑、失敗なら✖が表示されます。失敗時に✖が表示されただけでは原因がわからないため、詳細ウィンドウを開きます。

失敗したテストに✖が表示されるだけで、詳細は表示されない

<leader>toでテスト実行結果の詳細表示

 <leader>tp：プロジェクト選択（Chromium, Webkitなどのブラウザを選択する）Playwrightは複数のブラウザを使用することができます。とても役に立つ機能ではありますが、常に複数のブラウザで実行すると時間がかかってしまいます。とりあえずchromiumだけで確認したいなーというときはプロジェクト選択のコマンドを実行します。

使用するブラウザの表示

 <leader>tpr：Preset選択機能について（headless, headモードの選択をする）Presetの選択もコマンドで対応することができます。

ヘッドレスモードやデバッグモードを指定したいときはこちらを使います。

テストの実行方法を選択

 codegen、uiモードについてcodegenやuiモードについては自分でショートカットを設定することもできます。

ただcodegenはPlaywright MCPが発表されてからはあまり使わなくなりました。なのでキーマッピングの登録はしていません。

 生成AIの活用Playwrightの便利コマンドだけでなく、AI活用も欠かせません。弊社ではGitHub Copilotを導入しているので、Vimでもその恩恵を最大限に受ける設定にしています。

avante.nvim(Star:16.7k）、CodeCompanion（Star:5.8k）あたりがよく使われているようですが、僕はCopilotChatNvim（5.7k）とGitHubCopilotCLIを使用しています。

 ライトな相談はCopilotChatNvimGitHubCopilotCLIが使用できるようになってからは使用機会が減りましたが、CopilotChatNvimは使いやすいプラグインです。起動とレスポンスが早いので気軽に使うことができます。参照ファイルの指定が少し面倒なのが玉に瑕です。

<leader>ccでチャットを開くことでVSCodeと同じように使うことができます。ただしAgentモードを使うことはできないです。MCPHubを併用することでAgentモードを使えるようです。ただ設定が面倒だったので、僕はGitHubCopilotCLIでAgentモードを使っています。

左側のウィンドウがチャット画面。関西弁を使ってもらってます

 GitHubCopilotCLI上述したようにAgentモードを使いたいときはGitHubCopilotCLIを使っています。もちろんMCPも使うことができます。それ以外にもコード全体を調べてもらいたいときにも使っています。

GitHubCopilotCLIだけでも十分だと思います。

copilotの表記が好きなので毎回表示させてます

 おわりに最後まで読んでくださり、ありがとうございます。

僕はプログラマではないのでエディタに関する詳しい知識や歴史についてはあまり知りません。ただ生成AIが台頭してきてからはVSCodeの勢いがさらに強くなってきたと思います。

VSCodeの勢いに負けずにVimが発展していくのを見守っていきたいと思います。