How to Install Claude Code (CLI + VS Code Extension) for Playwright MCP

Before You Start: Installing Claude Code

The lectures in this section use Claude Code to drive the Playwright MCP server. Before the next video, take five minutes to install it and sign in. Everything else in this section builds on these steps.

Read this first

Course URL playwright.testautomationtv.com

Claude Code requires a paid Anthropic account — a Pro, Max, Team, or Enterprise Claude subscription, or a Claude Console (API) account. The free Claude.ai plan does not include Claude Code access.

I am telling you this up front so it is not a surprise halfway through an install. If you would rather not subscribe, read the section "If you are using a different AI tool" at the bottom of this article — the Playwright MCP is an open protocol and it is not tied to Claude.

You already installed Node.js in Section 1. If you skipped that lecture, install the Node.js LTS version now — the npm install option below needs Node.js 22 or later.

Step 1 — Install the Claude Code CLI

Open a terminal and run the command for your operating system.

macOS, Linux, or WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

If you are in PowerShell, your prompt starts with PS C:\. If it starts with C:\ without the PS, you are in the older Command Prompt — open PowerShell instead and run the command above.

If you prefer npm (any operating system, Node.js 22 or later):

npm install -g @anthropic-ai/claude-code

Do not put sudo in front of the npm command. It causes permission problems later.

Step 2 — Confirm the install worked

claude --version

You should see a version number printed back, something like 2.1.211 (Claude Code). If you see command not found, close the terminal, open a new one, and try again — the installer adds Claude Code to your PATH, and an already-open terminal will not have picked that up.

If it still fails, run this command, which prints a diagnostic report:

claude doctor

Step 3 — Sign in

From your project folder, start Claude Code:

claude

The first run opens your browser and asks you to authorise the account. Complete that, return to the terminal, and you are logged in. You only do this once per machine.

Step 4 — Install the VS Code extension

You need VS Code 1.94.0 or higher.

1. In Visual Studio Code, press Ctrl+Shift+X on Windows and Linux, or Cmd+Shift+X on Mac, to open the Extensions view.

2. Search for Claude Code.

3. Click Install on the extension published by Anthropic.

4. If the extension does not appear afterwards, restart VS Code, or open the Command Palette and run Developer: Reload Window.

Open the panel by clicking the Claude Code icon in the Activity Bar on the left, or by clicking Claude Code in the status bar at the bottom right. Sign in when prompted — same account as Step 3.

An important point about the extension

The VS Code extension and the command-line tool are two separate things. The extension gives you the chat panel inside the editor. It does not give you the claude command in your terminal.

In the next lecture we register the Playwright MCP server by running a terminal command that starts with claude. That command comes from the CLI you installed in Step 1, so please do not skip Step 1 and install only the extension.

Your checklist before the next lecture

• claude --version prints a version number

• Running claude in a terminal opens an interactive session

• The Claude Code panel opens inside VS Code and shows you as signed in

If all three are true, you are ready.

One thing that will save you time later

When you register an MCP server, an already-open Claude session will not always see it. If claude mcp list shows the server as connected but your assistant cannot reach it, close the session and start a new one. This comes up again later in the section, and it is almost always the explanation.

If you are using a different AI tool

The Model Context Protocol is an open standard, and Playwright's MCP server is not tied to Claude. Other agentic coding tools support MCP as well — some register a server with a single command like the one you will see in the next lecture, and others expect you to edit a configuration file directly.

The concepts in this section — what the MCP server does, how it reads the accessibility tree, how to turn an exploration into a real test file — apply the same way regardless of which assistant you use. The commands on screen are the Claude Code versions, so check your own tool's documentation for its equivalent registration step.

Official documentation

Installation steps change from time to time. If a command in this article does not work, the current instructions are always here:

• Claude Code setup: https://code.claude.com/docs/en/setup

• Claude Code in VS Code: https://code.claude.com/docs/en/vs-code

See you in the next lecture.

Naeem Malik — Course URL playwright.testautomationtv.com