DEV Community: Anirban Majumdar

Building a React Habit Tracker with Claude Code - Part 1: From Idea to MVP

Anirban Majumdar — Sat, 25 Apr 2026 04:59:44 +0000

Building a Full-Stack Habit Tracker with Claude Code - Part 1: From Idea to MVP

Introduction: Why Another Habit Tracker?

I started this a demo project to learn how can claude code help as an AI dev partner , I used this demo project to understand and learn different ways to effectively use Claude code and its feature

Here are some important topics that I learned while making this project

Claude.md file
context window
Tools and permission
Planning and Thinking
Slash Command
Custom Slash command
MCP Server
Sub Agents

Follow along to see how I used this learning while creating this Habit Tracker app in React.

Here is what the app does:

🚀 Fast - No login, no setup, just start tracking
🎨 Beautiful - A UI I'd actually want to use daily
📊 Insightful - Show me trends, not just checkboxes
🔒 Private - My data stays in my browser

I built this entire app with Claude Code as my AI pair programmer. And I'm going to show you exactly how.

But first lets start with basics

What is Claude Code?

Before we dive in, let me explain what made this project possible. Claude Code is Anthropic's official CLI tool that brings Claude AI directly into your development workflow. Think of it as an AI pair programmer that can:

Read and understand your entire codebase
Write, edit, and refactor code
Run terminal commands
Debug issues
Suggest architecture improvements

It's not just a chatbot - it's a full development partner.

The Game Plan

Here's what I wanted to build:

Core Features (MVP):

✅ Add, edit, and delete habits
✅ Track habits by date
✅ Four status types: Completed, To Do, Not Completed, Skipped
✅ Data persistence with localStorage
✅ Dark/light theme toggle
✅ Basic analytics and trends

Tech Stack:

React (latest version)
React Router for navigation
Pure CSS (no frameworks - keeping it simple)
localStorage for data persistence (no backend needed!)

Let's build it! 🛠️

Phase 1: Project Setup (The Boring-But-Essential Part)

I started by asking Claude Code to initialize a React project:

npx create-react-app habit-tracker
cd habit-tracker
npm install react-router-dom

Claude suggested this project structure, which turned out to be perfect:

src/
├── components/       # Reusable UI components
├── pages/           # Route components (Home, Trends, About)
├── hooks/           # Custom React hooks
├── styles/          # CSS modules
└── utils/           # Helper functions

💡 Learning #1: Having a clear structure from day one saves hours of refactoring later.

Phase 2: Building the Data Model

The first real code we wrote together was the data model. I described what I wanted, and Claude helped me design a simple but extensible structure:

// Each habit entry looks like this:
{
  id: "1712345678901",           // Timestamp-based unique ID
  habit: "Morning workout",       // What you're tracking
  date: "2026-04-08",            // ISO date format
  status: "Completed"            // Completed | To Do | Not Completed | Skipped
}

Clean, simple, and stored as a JSON array in localStorage. No over-engineering!

Phase 3: State Management Strategy

Here's where Claude Code really shined. Instead of reaching for Redux or Zustand, it suggested a simple but powerful approach:

// App.js - The main component
function App() {
  // Load habits from localStorage on mount
  const [habits, setHabits] = useState(() => {
    const saved = localStorage.getItem('habit-tracker-habits');
    return saved ? JSON.parse(saved) : [];
  });

  // Auto-save to localStorage whenever habits change
  useEffect(() => {
    localStorage.setItem('habit-tracker-habits', JSON.stringify(habits));
  }, [habits]);

  // ... rest of the app
}

💡 Learning #2: You don't always need a state management library. React hooks + localStorage can handle a lot!

Phase 4: The HabitForm Component

This was our first real UI component. I asked Claude to create a form that felt intuitive, and here's what we built together:

// src/components/HabitForm.js
import { useState } from 'react';
import TextInput from './TextInput';
import DateSelector from './DateSelector';
import StatusSelector from './StatusSelector';

function HabitForm({ onAddHabit }) {
  const [habit, setHabit] = useState('');
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
  const [status, setStatus] = useState('To Do');

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!habit.trim()) return; // Basic validation

    onAddHabit({
      id: Date.now().toString(),
      habit: habit.trim(),
      date,
      status
    });

    // Clear form
    setHabit('');
    setStatus('To Do');
  };

  return (
    <form className="habit-form" onSubmit={handleSubmit}>
      <h2>➕ Add New Habit</h2>

      <TextInput
        label="Habit"
        value={habit}
        onChange={(e) => setHabit(e.target.value)}
        placeholder="Enter habit (e.g., Morning workout, Read 30 mins)"
      />

      <div className="form-row">
        <DateSelector
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />

        <StatusSelector
          value={status}
          onChange={(e) => setStatus(e.target.value)}
        />
      </div>

      <button type="submit" className="btn-primary">
        ➕ Add Habit
      </button>
    </form>
  );
}

Key Design Decisions:

Composition over monolith: Breaking the form into smaller components (TextInput, DateSelector, StatusSelector) made it easier to maintain and reuse.
Emojis as icons: Instead of icon libraries, we used emojis. Lightweight and universally supported!
Immediate feedback: The form clears immediately after submission, giving users a sense of accomplishment.

💡 Learning #3: Small, focused components are easier for AI (and humans!) to understand and modify.

Phase 5: Displaying Habits - The HabitList Component

Now came the fun part - displaying habits in a beautiful, organized way. I wanted habits grouped by date, with special labels for "Today" and "Yesterday".

Claude Code helped me build this smart grouping logic:

// src/components/HabitList.js
function HabitList({ habits, onEdit, onDelete }) {
  // Group habits by date
  const groupedHabits = habits.reduce((groups, habit) => {
    const date = habit.date;
    if (!groups[date]) {
      groups[date] = [];
    }
    groups[date].push(habit);
    return groups;
  }, {});

  // Sort dates in descending order (newest first)
  const sortedDates = Object.keys(groupedHabits).sort((a, b) =>
    new Date(b) - new Date(a)
  );

  // Format date labels
  const formatDateLabel = (dateString) => {
    const date = new Date(dateString);
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);

    if (dateString === today.toISOString().split('T')[0]) {
      return 'Today';
    } else if (dateString === yesterday.toISOString().split('T')[0]) {
      return 'Yesterday';
    } else {
      return date.toLocaleDateString('en-US', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    }
  };

  if (habits.length === 0) {
    return (
      <div className="empty-state">
        <span className="empty-icon">📝</span>
        <h2>No habits tracked yet</h2>
        <p>Add your first habit to get started!</p>
      </div>
    );
  }

  return (
    <div className="habit-list">
      <h2>Your Habits</h2>
      {sortedDates.map(date => (
        <div key={date} className="date-group">
          <div className="date-header">
            <h3>{formatDateLabel(date)}</h3>
            <span className="habit-count">
              {groupedHabits[date].length} {groupedHabits[date].length === 1 ? 'habit' : 'habits'}
            </span>
          </div>

          <div className="habits-grid">
            {groupedHabits[date].map(habit => (
              <HabitCard
                key={habit.id}
                habit={habit}
                onEdit={onEdit}
                onDelete={onDelete}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Why this works:

Smart date grouping: Uses reduce() to organize habits efficiently
User-friendly labels: "Today" and "Yesterday" are more intuitive than dates
Empty state: Always handle the zero-state gracefully
Responsive grid: CSS Grid makes the layout adapt to any screen size

Phase 6: The Theme System (Making It Pretty)

I'm a sucker for dark mode. I asked Claude to implement a theme system that would:

Toggle between light and dark
Remember user preference
Apply smoothly without flashing

Here's the elegant solution we built:

// src/hooks/useTheme.js
import { useState, useEffect } from 'react';

function useTheme() {
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('habit-tracker-theme');
    return saved || 'light';
  });

  useEffect(() => {
    // Apply theme to root element
    document.documentElement.setAttribute('data-theme', theme);
    // Save to localStorage
    localStorage.setItem('habit-tracker-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return { theme, toggleTheme };
}

export default useTheme;

And the CSS magic:

/* src/index.css */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --shadow: rgba(0, 0, 0, 0.1);
  --button-bg: #4a90e2;
  --button-hover: #357abd;
}

:root[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #404040;
  --shadow: rgba(0, 0, 0, 0.5);
  --button-bg: #4a90e2;
  --button-hover: #357abd;
}

/* Now all components just use CSS variables */
.habit-card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow);
}

💡 Learning #4: CSS custom properties + the data-theme attribute = the cleanest theme system.

Phase 7: Analytics & Trends

This is where the app went from "useful" to "actually cool". I wanted to show users:

Current streaks
Completion rates
Trends over time

Claude helped me build a utility file for all the calculations:

// src/utils/habitAnalytics.js

// Calculate current streak for a habit
export const calculateCurrentStreak = (habitEntries) => {
  if (!habitEntries.length) return 0;

  // Sort by date descending
  const sorted = [...habitEntries].sort((a, b) =>
    new Date(b.date) - new Date(a.date)
  );

  let streak = 0;
  const today = new Date().toISOString().split('T')[0];
  let checkDate = new Date(today);

  for (const entry of sorted) {
    const entryDate = entry.date;
    const expectedDate = checkDate.toISOString().split('T')[0];

    if (entryDate !== expectedDate) {
      break; // Streak broken
    }

    if (entry.status === 'Completed') {
      streak++;
      checkDate.setDate(checkDate.getDate() - 1);
    } else {
      break; // Not completed = streak broken
    }
  }

  return streak;
};

// Calculate completion rate for a habit
export const calculateCompletionRate = (habitEntries) => {
  if (!habitEntries.length) return 0;

  const completed = habitEntries.filter(h => h.status === 'Completed').length;
  return Math.round((completed / habitEntries.length) * 100);
};

// Group habits by name (case-insensitive)
export const groupHabitsByName = (habits) => {
  return habits.reduce((groups, habit) => {
    const name = habit.habit.toLowerCase();
    if (!groups[name]) {
      groups[name] = [];
    }
    groups[name].push(habit);
    return groups;
  }, {});
};

These pure functions made testing easy and the code maintainable.

Phase 8: Routing with React Router

Finally, I wanted to organize the app into multiple pages:

Home: Main tracker interface
Trends: Analytics dashboard
About: Info about the app

// src/App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import Trends from './pages/Trends';
import About from './pages/About';

function App() {
  // ... state management code ...

  return (
    <Router>
      <div className="App">
        <header className="app-header">
          <h1>Habit Tracker</h1>
          <Navigation />
          <ThemeToggle />
        </header>

        <main>
          <Routes>
            <Route path="/" element={
              <Home
                habits={habits}
                onAddHabit={handleAddHabit}
                onUpdateHabit={handleUpdateHabit}
                onDeleteHabit={handleDeleteHabit}
              />
            } />
            <Route path="/trends" element={<Trends habits={habits} />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

💡 Learning #5: Keep routing simple. Pass data as props instead of reaching for context too early.

Working with Claude Code: What I Learned

After spending hours pair programming with Claude Code, here are my biggest takeaways:

1. Be Specific About What You Want

❌ Bad: "Add a form"
✅ Good: "Create a form component that accepts habit name, date, and status, with validation and clear button"

2. Let Claude Suggest Architecture

I often asked: "What's the best way to structure this?" Claude's suggestions were consistently better than my first instincts.

3. Iterate in Small Steps

Instead of "build the entire app", I worked feature by feature. This made reviewing code easier and kept momentum high.

4. Ask for Explanations

When Claude wrote code I didn't understand, I asked "Why did you do it this way?" The explanations taught me new patterns.

5. Review Everything

AI is powerful, but not infallible. I read every line of code Claude wrote and tested thoroughly.

The MVP After One Day

After about 6-8 hours of focused development with Claude Code, I had:

✅ A fully functional habit tracker
✅ Clean, maintainable code
✅ Dark/light theme support
✅ Data persistence with localStorage
✅ Responsive design
✅ Basic analytics

Lines of code written: ~1,200
Number of manual file operations: Almost zero
Time saved vs coding alone: Estimated 60-70%

What's Next?

In Part 2, I'll cover:

🎨 Adding an 8-category system with emoji icons
📊 Building comprehensive analytics with streak tracking
📈 Creating beautiful summary cards with progress bars
🚀 Deploying to Vercel with proper configuration
🧪 Testing with Playwright MCP (170+ test cases!)
📝 Generating comprehensive documentation

Try It Yourself

Want to build along? Here's the starter template we used:

npx create-react-app habit-tracker
cd habit-tracker
npm install react-router-dom
npm start

Then open Claude Code and start with: "Help me build a habit tracking app with React. Let's start with the data model."

Conclusion

Building with Claude Code felt like having a senior developer sitting next to me, ready to:

Write boilerplate instantly
Suggest better patterns
Explain complex concepts
Catch bugs before I ran the code

Is it perfect? No. I still reviewed every line and made adjustments.

Is it faster? Absolutely. What would have taken me a weekend took an evening.

Did I learn? More than I expected. Claude's explanations taught me new React patterns and best practices.

In Part 2, we'll take this MVP and turn it into a production-ready app with advanced features, comprehensive testing, and real deployment. Stay tuned!

Resources:

Questions? Drop them in the comments below! I'll be responding to all of them.

Found this helpful? Give it a ❤️ and follow me for Part 2!

Part 2 coming next week: "Advanced Features, Testing, and Deployment"

AI #React #WebDev #Tutorial #ClaudeCode #ProductivityTools

Setting Up a Java Project in VS Code - TestNG

Anirban Majumdar — Sat, 14 Mar 2026 15:55:21 +0000

Setting Up a Java Project in VS Code: A Step-by-Step Guide

Introduction

In this guide, I’ll walk you through setting up a modern Java project using Maven and TestNG in Visual Studio Code (VS Code). We’ll cover everything from project creation to running your first test, leveraging the VS Code Java Extension Pack for a seamless experience.

1. Installing the VS Code Java Extension Pack

To get started, install the Java Extension Pack by Microsoft in VS Code. This pack includes essential tools for Java development, such as language support, debugging, and Maven integration.

2. Creating a Maven Project

Open VS Code and launch the integrated terminal. Run the following command to generate a Maven project using the quickstart archetype:

mvn org.apache.maven.plugins:maven-archetype-plugin:3.1.2:generate \
  -DarchetypeArtifactId="maven-archetype-quickstart" \
  -DarchetypeGroupId="org.apache.maven.archetypes" \
  -DarchetypeVersion="1.4" \
  -DgroupId="com.example" \
  -DartifactId="tutorial"

This creates a project structure with src/main/java and src/test/java folders, and a pom.xml for dependency management.

3. Setting Up TestNG

To use TestNG for testing, add the TestNG dependency to your pom.xml:

<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>7.8.0</version>
    <scope>test</scope>
</dependency>

4. Creating a SimpleTest Class

Inside src/test/java/com/example/, create a file named simpleTest.java:

package com.example;

import org.testng.annotations.Test;

public class simpleTest {
    @Test
    public void testMethod() {
        System.out.println("TestNG is running!");
    }
}

5. Configuring testng.xml

Create a testng.xml file in your project root to specify which tests to run:

<?xml version="1.0" encoding="UTF-8"?>
<suite name="Tutorial Suite">
    <test name="SimpleTest">
        <classes>
            <class name="com.example.simpleTest"/>
        </classes>
    </test>
</suite>

6. Updating pom.xml for TestNG

Ensure your pom.xml includes the TestNG dependency and is set up for Java 21 (LTS):

<properties>
    <maven.compiler.source>21</maven.compiler.source>
    <maven.compiler.target>21</maven.compiler.target>
</properties>

7. Running Your Tests

Build and run your tests using Maven:

mvn test

You should see output from your simpleTest class, confirming TestNG is working.

Conclusion

With VS Code, Maven, and TestNG, you have a powerful setup for Java development. The Java Extension Pack streamlines your workflow, and TestNG makes testing easy. Happy coding!

Demystifying Promises, Async, and Await in JavaScript/TypeScript with Playwright and Cypress

Anirban Majumdar — Fri, 29 Aug 2025 09:54:41 +0000

One of the most common challenges for automation engineers using JavaScript/TypeScript is handling asynchronous code. Whether you’re writing tests in Playwright or Cypress, you’ll often deal with actions that don’t resolve instantly — such as page navigation, element interactions, or API calls.

That’s where Promises, async, and await come in. Let’s break them down with automation-specific examples.

What is a Promise?

A Promise represents the eventual completion (or failure) of an asynchronous operation. Think of it like a “contract” — “I’ll give you the data when it’s ready.”

Example: Fetching Data

const dataPromise = fetch('https://api.github.com/users');
dataPromise.then(response => response.json())
           .then(data => console.log(data));

In test automation, every browser action is often a Promise.

Async & Await Simplified

async marks a function as asynchronous.

await pauses the function until the Promise is resolved.

This makes code look synchronous and much easier to read.

Using Async/Await in Playwright

Playwright heavily relies on async/await. Almost every browser interaction returns a Promise.

Example: Playwright Test with Async/Await

import { test, expect } from '@playwright/test';

test('Search on Amazon', async ({ page }) => {
  await page.goto('https://www.amazon.com');
  await page.fill('#twotabsearchtextbox', 'Laptop');
  await page.click('input[type="submit"]');

  const results = page.locator('span.a-size-medium');
  await expect(results.first()).toBeVisible();
});

Notice how await makes each step sequential and readable.
Without it, you’d be chaining .then() everywhere, making tests messy.

Using Async/Await in Cypress

Cypress is slightly different — it uses built-in command chaining instead of raw async/await. Cypress commands like cy.get() and cy.click() are asynchronous but auto-managed.

Example: Cypress Test with Implicit Async Handling

describe('Search on Amazon', () => {
  it('should search for Laptop', () => {
    cy.visit('https://www.amazon.com');
    cy.get('#twotabsearchtextbox').type('Laptop');
    cy.get('input[type="submit"]').click();
    cy.get('span.a-size-medium').first().should('be.visible');
  });
});

Here, Cypress internally queues commands and resolves them without you writing await.

Mixing Promises with Playwright

Sometimes you need to handle multiple promises, e.g., waiting for API + UI events together.

Example: Waiting for Navigation and Click (Playwright)

await Promise.all([
  page.waitForNavigation(),
  page.click('text=Login')
]);

This ensures the test doesn’t miss the navigation event.

Mixing Promises with Cypress

Cypress doesn’t expose Promises directly, but you can wrap them:

cy.wrap(Promise.resolve(42)).then(value => {
  cy.log('Resolved value:', value);  // 42
});

Common Pitfalls & Tips

Forgetting await in Playwright

page.click('button#submit'); // ❌ Won’t wait  
await page.click('button#submit'); // ✅ Correct

Using async/await incorrectly in Cypress
Cypress commands don’t return raw Promises, so don’t do:

const text = await cy.get('h1').text(); // ❌ Not supported

Instead, use

.then():

cy.get('h1').then($el => {
  cy.log($el.text());
});

Parallelization with Promises
For Playwright, prefer Promise.all when waiting for multiple things.

Conclusion

Understanding Promises, async, and await is essential for writing clean, reliable automation in JavaScript/TypeScript.

In Playwright, always use async/await to control flow.

In Cypress, commands are asynchronous but automatically queued.

For advanced scenarios, leverage Promise.all (Playwright) or cy.wrap (Cypress).

Mastering these concepts makes your automation more readable, stable, and maintainable.

Using MCP Server to Supercharge Playwright Automation

Anirban Majumdar — Fri, 29 Aug 2025 09:32:45 +0000

Automation at scale often struggles with two pain points:

Slow test development (boilerplate code, selectors, retries).

Flaky tests due to fragile locators.

With Model Context Protocol (MCP), we can connect Playwright to an AI server that assists in writing, fixing, and maintaining automation tests. In this blog, we’ll set up MCP with Playwright to automate real-world scenarios on Amazon.com.

🔹 1. Prerequisites

Make sure you have the following installed:

Node.js (>=18)

Playwright

MCP server implementation (e.g., mcp-server
or custom server)

OpenAI/GitHub Copilot or another LLM provider

Install Playwright

npm init playwright@latest

Add TypeScript config if needed:

npm install -D typescript ts-node @types/node

🔹 2. Folder Structure

playwright-amazon/
 ┣ tests/
 ┃ ┣ amazon-search.spec.ts
 ┃ ┣ amazon-cart.spec.ts
 ┣ mcp/
 ┃ ┣ server.ts
 ┃ ┣ config.json
 ┣ playwright.config.ts
 ┗ package.json

🔹 3. MCP Server Setup

Your MCP server is the middleware between Playwright and the LLM. It provides structured prompts like “Suggest resilient Playwright locator for Add to Cart button”.

Example MCP Config (mcp/config.json)

{
  "name": "playwright-mcp",
  "description": "MCP server for Playwright automation",
  "capabilities": {
    "selectors": true,
    "code-gen": true
  },
  "llmProvider": "openai",
  "llmModel": "gpt-4o-mini"
}

Example MCP Server (mcp/server.ts)

import express from 'express';
import bodyParser from 'body-parser';
import { generateLocator } from './utils/locator-generator';

const app = express();
app.use(bodyParser.json());

app.post('/locator', async (req, res) => {
  const { request, context } = req.body;
  const locator = await generateLocator(request, context);
  res.json({ locator });
});

app.listen(4000, () => console.log('MCP server running on port 4000'));

🔹 4. Playwright + MCP Integration

We’ll call MCP server from within our Playwright tests whenever we need AI-assisted selectors or snippets.

Utility to Call MCP (tests/utils/mcp-client.ts)

import axios from 'axios';

export async function getLocator(request: string, context: string): Promise<string> {
  const response = await axios.post('http://localhost:4000/locator', { request, context });
  return response.data.locator;
}

🔹 5. Example Test – Amazon Search

tests/amazon-search.spec.ts

import { test, expect } from '@playwright/test';
import { getLocator } from './utils/mcp-client';

test('Amazon Search for Laptop', async ({ page }) => {
  await page.goto('https://www.amazon.com');

  // Get locator dynamically from MCP
  const searchBox = await getLocator("Search input field", "amazon-homepage");
  await page.fill(searchBox, 'Laptop');

  const searchButton = await getLocator("Search button", "amazon-homepage");
  await page.click(searchButton);

  // Validate results
  const results = page.locator('span.a-size-medium');
  await expect(results.first()).toBeVisible();
});

Here MCP generates resilient locators, so even if Amazon updates their DOM slightly, the AI can adapt.

🔹 6. Example Test – Add to Cart

tests/amazon-cart.spec.ts


import { test, expect } from '@playwright/test';
import { getLocator } from './utils/mcp-client';

test('Add product to Amazon Cart', async ({ page }) => {
  await page.goto('https://www.amazon.com');

  // Search product
  const searchBox = await getLocator("Search input field", "amazon-homepage");
  await page.fill(searchBox, 'iPhone 15');
  const searchButton = await getLocator("Search button", "amazon-homepage");
  await page.click(searchButton);

  // Click first result
  const firstResult = await getLocator("First product link", "amazon-search-results");
  await page.click(firstResult);

  // Add to cart
  const addToCart = await getLocator("Add to Cart button", "amazon-product-page");
  await page.click(addToCart);

  // Validate cart
  const cartCount = page.locator('#nav-cart-count');
  await expect(cartCount).toHaveText('1');
});

🔹 7. Benefits

✅ Resilient selectors – MCP auto-generates robust locators.
✅ Reduced flaky tests – Fewer selector breakages on UI changes.
✅ Faster automation – Engineers describe tests; AI scaffolds code.
✅ Scalable – Can plug into CI/CD for continuous improvement.

🔹 Conclusion

Using MCP with Playwright transforms how we build automation. Instead of spending hours debugging fragile selectors, engineers can focus on test strategy, while MCP + AI handles the scaffolding.