Automated testing doesn't have to be complicated. In this guide, Chris Harbert walks you through setting up a complete Cucumber-style Playwright testing project using Claude Code—with minimal manual configuration required.

Video available on YouTube.

Why Cucumber and Playwright?

Before diving into the setup, let's address the "why." I've been a longtime advocate of BDD (Behavior-Driven Development), but its value has become even more apparent in the age of AI-assisted development. Feature files provide clear descriptions of system behavior that anyone can understand—whether it's an intern, an experienced developer new to your codebase, or an AI agent that may lose context over time.

Playwright is an excellent choice for browser automation, and when combined with Cucumber's readable syntax, you get tests that serve as both documentation and validation.

Setting Up Your Project

Starting from Scratch

Begin with an empty directory. In this example, I created a folder called "playwright-example" and launched Claude Code by simply typing claude in the terminal.

After accepting the terms and policies (a new requirement at the time of recording), Claude Code greets you with a simple prompt: "Welcome to Claude Code. Type to let us know what you want."

The Initial Prompt

Here's what I asked Claude Code to do:

Create a cucumber-style playwright project.
This project needs to run on Windows.
This only needs to run on Chromium.
Create a scenario that navigates to the testery homepage 
"https://testery.com" and verifies that the page title is correct.

A few tips on this prompt:

• Specify your OS: Mentioning Windows prevents Claude from suggesting Mac or Linux-specific commands
• Limit browsers: By specifying Chromium only, you avoid unnecessary cross-browser configuration for Firefox and Safari
• Include a real test: Starting with an actual scenario gives you something to work with immediately

How Claude Code Works

Claude Code operates by creating a plan—a sequence of steps it believes are necessary to accomplish your task. You can review each step before execution, which gives you control over what happens in your project.

For this project, Claude Code's plan included:

1. Initialize npm project
2. Install Playwright and Cucumber dependencies
3. Create Cucumber configuration file
4. Set up Playwright configuration
5. Create TypeScript configuration
6. Generate feature files
7. Implement step definitions
8. Set up world file and hooks
9. Add npm scripts for running tests

Interactive Approval

Claude Code asks for permission before running commands. You have three options:

• Yes: Allow the command once
• Yes and don't ask again: Automatically approve similar commands
• No: Reject the command

For learning purposes, approving each step individually helps you understand what's happening under the hood.

What Gets Created

Project Structure

After Claude Code completes its work, you'll have:

playwright-example/
├── features/
│   ├── testery-website.feature
│   └── support/
│       ├── steps.ts
│       ├── world.ts
│       └── hooks.ts
├── cucumber.js
├── playwright.config.ts
├── tsconfig.json
└── package.json

The Feature File

Your feature file will look something like this:

Feature: Testery Website
  As a user
  I want to navigate to the testery website
  So I can verify the page loads correctly

  Scenario: Verify Testery homepage
    Given I navigate to "https://testery.com"
    Then the page title should be correct

Step Definitions

Claude Code generates the step definitions with proper imports and implementations:

import { given, then } from '@cucumber/cucumber';
import { CustomWorld } from './world';

given('I navigate to {string}', async function(this: CustomWorld, url: string) {
  await this.page.goto(url);
});

then('the page title should be correct', async function(this: CustomWorld) {
  const title = await this.page.title();
  expect(title).toContain('Testery');
});

NPM Scripts

The package.json includes helpful scripts:

"scripts": {
  "test": "cucumber-js",
  "test:headed": "cucumber-js --headed"
}

The distinction between headed and headless modes:

• Headless: Browser runs in the background (default, faster)
• Headed: Browser window is visible (useful for debugging)

Running Your Tests

Once setup is complete, you have several options for running tests:

From the Terminal

npm test

From Visual Studio Code

If you have the Playwright extension installed, you can click the play button next to your tests in the editor for immediate execution and inline results.

From Claude Code

You can click on commands that Claude suggests directly in the interface to execute them.

Why This Approach Works

The combination of Cucumber and Playwright, set up through Claude Code, provides several advantages:

1. Fast setup: What would typically take 30-60 minutes of configuration happens in minutes
2. Best practices: Claude Code follows current conventions for project structure
3. Complete working example: You get a functioning test immediately, not just boilerplate
4. Human-readable tests: Feature files serve as living documentation
5. AI-friendly: The structured format helps AI tools understand and modify tests more effectively

Next Steps

From this foundation, you can:

• Add more scenarios to your feature file
• Create additional feature files for different parts of your application
• Expand step definitions to cover more complex interactions
• Integrate with CI/CD pipelines
• Add visual regression testing or accessibility checks

Conclusion

Claude Code dramatically simplifies the setup of sophisticated testing frameworks. By combining natural language prompts with intelligent code generation, you can focus on defining what you want to test rather than wrestling with configuration files.

Whether you're starting a new project or modernizing your testing approach, this workflow demonstrates how AI-assisted development tools can handle the tedious setup work while you concentrate on building great software.

Have questions about getting started with Cucumber and Playwright? Feel free to reach out—I'm always happy to help fellow developers improve their testing practices.