Claude Code in Playwright

Appearance

Exercise 5.1: Enhanced Testing via Code Analysis ​

Overall ​

Learn how to enhance test planning by analyzing application source code with Claude Code. You'll see how examining the actual code reveals validation rules, edge cases, and business logic that aren't visible through UI exploration alone, resulting in more comprehensive and accurate test plans.

Download Exercise Files

📦 Download Exercise 5 Starter Files

Extract the ZIP file to get started with this exercise.

Project Structure ​

5-analyze-source-code/
├── package.json
├── playwright.config.ts
├── tsconfig.json
├── src/
│   └── (React application source code)
└── tests/
    ├── seed.spec.ts
    ├── smartdocs-login.spec.ts
    ├── fixtures/
    │   └── auth.ts
    └── utils/
        ├── dismiss-splash-page.ts
        └── totp.ts

Steps ​

Step 1: Open the Exercise Folder ​

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

Step 2: Update Test Credentials ​

Open .env file and update the following values:

bash
LOGIN_URL=https://sso.uat.bgl360.com.au/?app=smartdocs&&appFilter=smartdocs
USERNAME=[YOUR USERNAME FROM WORKSHOP USERS PAGE]
PASSWORD=[YOUR PASSWORD FROM WORKSHOP USERS PAGE]
TOTP_KEY=[YOUR TOTP KEY FROM WORKSHOP USERS PAGE]

Step 3: Add Playwright MCP (if not already installed) ​

Command:

bash
claude mcp add playwright npx -- @playwright/mcp@latest

Step 4: Launch Claude Code ​

Command:

bash
claude

Now verify the MCP connection:

Command to verify MCP:

/mcp

Step 5: Use Planner Agent with Source Code Analysis ​

Use the Planner Agent to explore the Entity Edit screen AND analyze the source code for comprehensive test coverage.

Prompt:

You are Playwright Test Planner Agent.
Explore the Entity Edit screen, by clicking the "pen-to-square" icon in the last column of the entities table.
Analyze the code in @src folder to understand the Entity Edit functionality.
Create a comprehensive test plan of editing an entity, and save it as a markdown file.
DO NOT generate any test code.
DO NOT read files outside this folder.

What to Observe (unique to source code analysis):

  • Code Reading: Claude examines TypeScript/React files in the @src folder
  • Validation Discovery: Test plan includes exact validation rules found in code (e.g., "Name: 3-100 characters")
  • Edge Cases Identified: Boundary conditions documented (min length, max length, required fields)
  • API Integration: Backend endpoints and error handling documented

Why This Matters: Analyzing source code allows Claude to discover validation constraints, API error handling, and business logic that aren't visible through UI exploration. This results in test plans that cover both the "happy path" and edge cases that could cause failures.

Step 6: Compare with the Test Plan Generated without Source Code Analysis ​

For learning purposes, you can create a UI-only test plan first to see the difference:

What to Compare:

  • UI-Only Plan: General validation (e.g., "test with long names")
  • Code-Aware Plan: Specific validation (e.g., "test with 50, 100, 101 characters")
  • Coverage Difference: Code-aware plan identifies more edge cases
  • Confidence Level: Code-aware plan has concrete requirements to verify

Expected Outcome ​

You should have:

  • A comprehensive test plan that includes both UI behavior and code-level validation
  • Better understanding of edge cases and boundary conditions
  • More accurate test scenarios based on actual business logic
  • Confidence that your tests will catch real bugs