Claude Code in Playwright

Appearance

Exercise 1.1: Create a Playwright Project ​

Overall ​

Learn how to use Claude Code to scaffold a complete Playwright project with TypeScript through natural language instructions. You'll see how Claude Code can automatically handle project setup, dependencies, and configuration.

Download Exercise Files

📦 Download Exercise 1 Starter Files

Extract the ZIP file to get started with this exercise.

Project Structure ​

1-create-playwright-project/
└── (empty folder - you'll create the project here)

Steps ​

Step 1: Open the Exercise Folder ​

Open the exercise folder in your preferred IDE (VSCode, IntelliJ, or any other):

Once the folder is open in your IDE, open the terminal within the IDE and start Claude Code:

bash
claude

What to Expect: This will launch Claude Code in interactive mode, ready to accept your instructions.

Step 2: Ask Claude Code to Create the Project ​

Use natural language to instruct Claude Code to set up a Playwright project. Copy and paste the following prompt:

Prompt:

Create a Playwright test project using TypeScript with all required dependencies.

What to Expect: Claude Code will:

  • Initialize a new Node.js project with package.json
  • Install Playwright and TypeScript dependencies
  • Create a playwright.config.ts configuration file
  • Set up example test files
  • Configure npm scripts for running tests

Step 3: Verify the Installation ​

Once Claude Code completes the setup, verify that everything is working correctly by running the Playwright UI mode:

Run in a New Terminal

Important: Open a new terminal window to run this command. Do NOT run it in your Claude Code conversation, as it will launch an interactive UI that keeps the terminal busy.

Command:

bash
npm run test:ui

What to Expect: This will:

  • Launch the Playwright test UI in your browser
  • Display the example tests that were created
  • Allow you to run and debug tests interactively

Step 4: Explore the Generated Files ​

Take a moment to explore what Claude Code created:

What to Expect:

  • A complete project structure in your file explorer
  • Configuration files at the root level
  • Test files in organized folders
  • All necessary dependencies installed

What to Observe:

  • package.json - Lists all project dependencies and npm scripts
  • playwright.config.ts - Configures browsers, test settings, and timeouts
  • tests/ folder - Contains example test files showing best practices
  • node_modules/ folder - Houses all installed packages
  • package-lock.json - Locks dependency versions for consistency

Why This Matters: Understanding the project structure is crucial for maintaining and expanding your test suite. The configuration files control how tests run, while the test folder structure helps organize tests logically. This foundation makes it easy to add more tests and customize settings as your project grows.

Expected Outcome ​

You should see:

  • A fully configured Playwright project with TypeScript
  • Example tests running successfully in UI mode
  • A working test automation environment ready for development