Claude Code & Playwright MCP によるブラウザの操作を tmux で並列実行し git worktree でブランチを切って作業する

llmgit

Playwright MCP は クロスブラウザで Web アプリの E2E テストを行える Playwright のMicrosoft 公式 MCP 実装。

$ claude mcp add playwright npx @playwright/mcp@latest
$ time claude -p "Access sambaiz.net and get 5 genres. \
Access each {genre} page, take a screenshot, and copy it to the screenshot/{genre}/ directory."
...
claude -p   2.64s user 0.96s system 2% cpu 2:53.38 total

$ tree screenshot 
screenshot
├── aws
│   └── screenshot-aws-aws-page.png
├── golang
│   └── screenshot-golang-golang-page.png
├── kubernetes
│   └── screenshot-kubernetes-kubernetes-page.png
├── machinelearning
│   └── screenshot-machinelearning-machinelearning-page.png
└── python
    └── screenshot-python-python-page.png

git worktree は対象の branch を指すディレクトリを作成する。これによって複数のブランチで同時に作業することができる。同じブランチの worktree は作ることができない。

$ git branch -c aaa
$ git worktree add worktree_aaa/ aaa
Preparing worktree (checking out 'aaa')
HEAD is now at d977ff9 initial                                     │HEAD is now at d977ff9 initial

$ git branch
* main
+ aaa

$ cd worktree_aaa && git branch
+ main
* aaa

$ git worktree remove worktree_aaa

tmux で window を分割して worktree を作り Claude Code を並列に実行させてみる。それまでのコンテキストが考慮されないので、単に Access each page のように指示してもうまくいかない。それ以外にも変なことをやり始めたり再現性がなかったりすることに手を打っていたら結局コマンドを書くことになってしまった。スクリプトを書かせて実行させた方がコントロールしやすくて良さそうだ。なお Playwright を並列に実行するには —-isolated フラグが必要。

tmuxのメモ - sambaiz-net

$ claude mcp add -s user playwright npx -- @playwright/mcp@latest --isolated
$ claude "Access sambaiz.net and get 5 genres. \
Don't create a new script. \

Do tasks in parallel for each {genre}. \

To do it, run a following command. Don't edit the command.

tmux split-window -h \"git branch -c {genre} && \
git worktree add worktree_{genre} {genre} && \
cd worktree_{genre} && \
claude \"Access https://www.sambaiz.net/tags/{genre} page with playwright MCP, take a screenshot, and copy it to the screenshot/{genre}/ directory. Don't do other things.\""

$ tree
.
├── worktree_aws
│   └── screenshot
│       └── aws
│           └── aws-tags-page.png
├── worktree_golang
│   └── screenshot
│       └── golang
│           └── sambaiz-golang-page.png
├── worktree_kubernetes
│   └── screenshot
│       └── kubernetes
│           └── kubernetes-page.png
├── worktree_machinelearning
│   └── screenshot
│       └── machinelearning
│           └── machinelearning-page.png
└── worktree_python
    └── screenshot
        └── python
            └── page-2025-07-14T02-05-42-589Z.jpeg