mint-prompt

byKONDURI VARUN

# Prompt: Generate E2E specs with Playwright MCP Use this in Claude Code (or any MCP client) with the Playwright MCP server connected and your app running locally. Copy everything in the code block below, fill in the bracketed placeholders, and send it as-is. ## One-time setup (before using the prompt) ```bash claude mcp add playwright npx @playwright/mcp@latest ``` Make sure your app is running locally (e.g. `npm run dev`) and that this repo's `e2e-suite/` (or wherever you placed it) is open in the working directory, so the agent can see `tests/pages/`, `tests/utils/test-data.ts`, and the existing spec conventions. --- ## The prompt ``` You are extending an existing Playwright E2E suite. Before writing anything, read tests/pages/BasePage.ts, tests/pages/LoginPage.ts, tests/pages/DashboardPage.ts, tests/utils/test-data.ts, and one existing spec in tests/e2e/ so you match this repo's conventions exactly (Page Object Model, @smoke/@regression tags, getByRole/getByLabel/getByTestId selector preference, storageState auth reuse). Do not invent a different structure or style. App under test: [BASE_URL, e.g. http://localhost:3000] Login credentials for exploration: [email] / [password] Flow(s) to cover: [describe the flow in plain language, e.g. "the invoice creation flow: create a draft invoice, add line items, apply a discount, send it, and confirm it moves to the Sent tab"] Do this in order: 1. EXPLORE. Use Playwright MCP to actually navigate the running app and walk through the flow(s) above yourself, step by step, as a real user would. Note the actual routes, the actual accessible names/roles/labels/testids on every interactive element you touch, and the actual UI feedback after each action (toast text, URL changes, new elements appearing). Do not guess or reuse selector names from the existing demo pages if the real app differs -- read what's actually there. 2. IDENTIFY GAPS. Compare what you found against tests/pages/*.ts. If a page object for a screen you visited doesn't exist yet, or is missing methods for elements you interacted with, tell me before writing specs, then create or extend that page object following the same class shape and naming conventions as the existing ones. 3. FLAG MISSING TEST HOOKS. If you find interactive elements with no accessible name, no label, and no data-testid -- meaning there is no reasonably stable way to select them -- list those elements and the file/line where the underlying component is defined, so I can add a data-testid. Do not write a selector based on CSS classes or text content that looks likely to change; flag it instead and move on. 4. WRITE THE SPEC(S). Add one new file under tests/e2e/ (or extend an existing one if the flow clearly belongs there) covering: - The happy path, tagged @smoke - At least one validation/error case (e.g. required field, invalid input), tagged @regression - Any state-dependent branch you observed during exploration (e.g. an item that behaves differently once a limit is reached), tagged @regression Use uniqueTaskTitle-style helpers from test-data.ts (or add an equivalent generator) for anything that creates data, so parallel runs and repeat CI runs never collide on the same record. Wait on real signals you observed while exploring (a toast appearing, a network response settling, a specific element becoming visible) -- never a fixed page.waitForTimeout(). 5. RUN IT. Execute the new spec(s) with `npx playwright test <path> --project=chromium`. If anything fails, use Playwright MCP to re-inspect the live page at the point of failure, determine whether the spec or the selector is wrong, fix it, and re-run until it passes. Do not hand me a spec you haven't actually run. 6. REPORT BACK. Summarize: which files you created/changed, which page objects you extended, any data-testid gaps you're flagging for me to add, and the final passing test output. ``` --- ## Notes on using this well - **Run it flow by flow, not "test my whole app" in one shot.** A focused flow description gets you an agent that explores carefully and writes specs that match what's actually there. A vague, broad ask gets you specs that guess at selectors and fail on the first real run. - **The exploration step is the point.** Skipping straight to "write a spec for X" without letting the agent drive the real app first is what produces brittle, hallucinated selectors. Always let it look before it writes. - **Feed back the data-testid gaps.** Step 3 is designed to surface the actual product-code changes needed for stable tests. Treat that list as a small follow-up PR, not something to work around with fragile selectors. - **Reuse this prompt as your suite grows.** Swap the "Flow(s) to cover" line for each new feature and rerun -- the first three steps (read conventions, explore, identify gaps) are what keep the suite consistent as different people/agents add to it over time.

LandingDocs
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks

26
#1

Setup Database Schema

Backlog

As a developer, I want to set up the database schema for storing specs, page objects, and test hooks using Alembic migrations.

AI 70%
Human 30%
High Priority
2 days
Data Engineer
#6

Setup CI/CD Pipeline

Backlog

As a DevOps engineer, I want to set up a CI/CD pipeline for automated testing and deployment of the mint-prompt application.

AI 50%
Human 50%
High Priority
3 days
DevOps Engineer
#7

Implement LandingHeroVisual for Landing Page

Backlog

As a frontend developer, implement the LandingHeroVisual section using the provided JSX and CSS. This section includes an animated SVG illustrating a testing pipeline with motion effects. Ensure the animation respects reduced motion settings. Acceptance criteria: The Landing page must render the LandingHeroVisual component exactly once. The SVG must animate as specified, with particles moving along defined paths. The design must match the provided CSS, including responsive behavior. No backend integration is required. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#8

Implement LandingHeroCopy for Landing Page

Backlog

As a frontend developer, implement the LandingHeroCopy section using the provided JSX and CSS. This section includes a title, description, and call-to-action buttons with motion animations. Acceptance criteria: The Landing page must render the LandingHeroCopy component exactly once. The text and buttons must animate as specified, with responsive design matching the provided CSS. The 'Get Started' button must link to the Quick Start section, and the 'View Documentation' button must link to the Docs page. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#9

Implement PipelineStageBreakdown for Landing Page

Backlog

As a frontend developer, implement the PipelineStageBreakdown section using the provided JSX and CSS. This section displays a three-step process with animated cards. Acceptance criteria: The Landing page must render the PipelineStageBreakdown component exactly once. Each stage card must animate into view as specified, with responsive design matching the provided CSS. No backend integration is required. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#10

Implement CapabilityCardsGrid for Landing Page

Backlog

As a frontend developer, implement the CapabilityCardsGrid section using the provided JSX and CSS. This section displays a grid of capability cards with animations. Acceptance criteria: The Landing page must render the CapabilityCardsGrid component exactly once. Each card must animate into view as specified, with responsive design matching the provided CSS. No backend integration is required. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#11

Implement QuickStartSteps for Landing Page

Backlog

As a frontend developer, implement the QuickStartSteps section using the provided JSX and CSS. This section includes interactive steps with copyable code snippets. Acceptance criteria: The Landing page must render the QuickStartSteps component exactly once. Each step must animate into view as specified, with responsive design matching the provided CSS. The copy button must function correctly, copying the code to the clipboard. No backend integration is required. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#12

Implement FeatureComparisons for Landing Page

Backlog

As a frontend developer, implement the FeatureComparisons section using the provided JSX and CSS. This section displays feature comparison blocks with animations. Acceptance criteria: The Landing page must render the FeatureComparisons component exactly once. Each block must animate into view as specified, with responsive design matching the provided CSS. No backend integration is required. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#13

Implement DocsCTA for Landing Page

Backlog

As a frontend developer, implement the DocsCTA section using the provided JSX and CSS. This section includes a call-to-action card with links to documentation. Acceptance criteria: The Landing page must render the DocsCTA component exactly once. The card must animate into view as specified, with responsive design matching the provided CSS. The 'Go to Documentation' button must link to the Docs page. Access is shared with all User personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#23

Implement DocsFAQ for Docs Page

Backlog

As a frontend developer, implement the DocsFAQ section on the Docs page. This section includes a list of frequently asked questions, each with a question and an answer that can be toggled open or closed. The component uses a state hook to manage which FAQ is open. Each FAQ item includes a link to relevant documentation sections. The design must adhere to the provided CSS, ensuring the FAQ items transition smoothly when opened or closed, and the layout is responsive. Acceptance criteria: 1) The DocsFAQ component must render exactly once on the Docs page. 2) Each FAQ item must toggle open and closed when clicked, with the correct aria-expanded state. 3) The design must match the provided CSS, including colors, fonts, and spacing. 4) Links within FAQ answers must navigate to the correct sections on the page. 5) The section must be accessible to all users, as the page is shared by all personas. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#2

Implement Spec Generation API

Backlog

As a developer, I want to implement the API endpoints for spec generation, ensuring they interact correctly with the database and follow business rules.

Depends on:#1
Waiting for dependencies
AI 60%
Human 40%
High Priority
3 days
Backend Developer
#3

Implement Gap Flagging API

Backlog

As a developer, I want to implement the API endpoints for flagging gaps in page objects and test hooks, ensuring they are stored and retrievable.

Depends on:#1
Waiting for dependencies
AI 60%
Human 40%
Medium Priority
2.5 days
Backend Developer
#14

Implement Navbar for Docs

Backlog

As a frontend developer, implement the Navbar section for the Docs page. This component includes a toggleable navigation menu that opens and closes when the button is clicked. It should link to the Landing and Docs pages, and the navigation state should be managed using a useState hook. Ensure the Navbar is fixed at the top of the page and styled with a backdrop filter for a modern look. Acceptance criteria: The Navbar must render exactly once on the Docs page, with links to Landing and Docs pages. The toggle button must open and close the menu, updating the aria-expanded attribute. The design must match the provided CSS, including the fixed position and backdrop filter. The Navbar should be accessible to all users. This section depends on the Landing page's Navbar implementation. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#7
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#4

Create API Client Service

Backlog

As a developer, I want to create a frontend API client service to interact with the backend spec generation and gap flagging APIs.

Depends on:#3#2
Waiting for dependencies
AI 50%
Human 50%
Medium Priority
1.5 days
Frontend Developer
#5

Develop Integration Tests

Backlog

As a QA engineer, I want to develop integration tests for the spec generation and gap flagging APIs to ensure they function correctly.

Depends on:#3#2
Waiting for dependencies
AI 40%
Human 60%
High Priority
2 days
QA Engineer
#15

Implement DocsHero for Docs

Backlog

As a frontend developer, implement the DocsHero section for the Docs page. This component includes a search input that filters quick links based on user input, using useState and useMemo hooks. It should display a title, tagline, and quick links to various documentation sections. Acceptance criteria: The DocsHero must render exactly once on the Docs page, with a functional search input that filters links in real-time. The design must match the provided CSS, including the gradient background and centered text. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#16

Implement DocsNav for Docs

Backlog

As a frontend developer, implement the DocsNav section for the Docs page. This component includes a toggleable drawer navigation that highlights the active section based on scroll position, using useState, useEffect, and useRef hooks. Acceptance criteria: The DocsNav must render exactly once on the Docs page, with a functional toggle button that opens and closes the drawer. The active section should update based on scroll position. The design must match the provided CSS, including the sticky position and drawer animation. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#17

Implement SetupInstructions for Docs

Backlog

As a frontend developer, implement the SetupInstructions section for the Docs page. This component displays a list of setup steps with expandable details, using useState to manage the open state of each step. Acceptance criteria: The SetupInstructions must render exactly once on the Docs page, with expandable steps that reveal additional information and code snippets. The design must match the provided CSS, including the callout and step styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#18

Implement PlaywrightMCPGuide for Docs

Backlog

As a frontend developer, implement the PlaywrightMCPGuide section for the Docs page. This component includes expandable best practices and selector examples, using useState to manage the open state of each practice. Acceptance criteria: The PlaywrightMCPGuide must render exactly once on the Docs page, with expandable practices that reveal additional information. The design must match the provided CSS, including the practice styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#19

Implement PromptTemplate for Docs

Backlog

As a frontend developer, implement the PromptTemplate section for the Docs page. This component includes a tabbed interface to switch between a template and an example, using useState to manage the active tab. Acceptance criteria: The PromptTemplate must render exactly once on the Docs page, with a functional tabbed interface that switches between the template and example. The design must match the provided CSS, including the tab styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#20

Implement AppDetailsWorkflow for Docs

Backlog

As a frontend developer, implement the AppDetailsWorkflow section for the Docs page. This component includes a checklist and flow steps, using useState to manage the checked state of each item. Acceptance criteria: The AppDetailsWorkflow must render exactly once on the Docs page, with a functional checklist that allows users to mark items as complete. The design must match the provided CSS, including the flow and checklist styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#21

Implement SpecGeneration for Docs

Backlog

As a frontend developer, implement the SpecGeneration section for the Docs page. This component includes a list of steps and troubleshooting tips, using useState to manage the open state of each issue. Acceptance criteria: The SpecGeneration must render exactly once on the Docs page, with expandable troubleshooting tips that reveal additional information. The design must match the provided CSS, including the step and issue styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#22

Implement ReportingResults for Docs

Backlog

As a frontend developer, implement the ReportingResults section for the Docs page. This component includes a report template and debugging steps, using useState to manage the open state of the debugging steps. Acceptance criteria: The ReportingResults must render exactly once on the Docs page, with a functional report template and expandable debugging steps. The design must match the provided CSS, including the report and checklist styling. The component should be accessible to all users. Page access: shared by all personas (User). This is verification context and does not request role-specific implementation.

Depends on:#14
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#24

Integrate Spec Generation

Backlog

As a Tech Lead, verify the end-to-end integration between the Spec Generation frontend implementation and the Spec Generation backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#2
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
1 day
Tech Lead
#25

Integrate Gap Flagging

Backlog

As a Tech Lead, verify the end-to-end integration between the Gap Flagging frontend implementation and the Gap Flagging backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#3
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
1 day
Tech Lead
#26

Develop E2E Tests

Backlog

As a QA Engineer, develop end-to-end tests for the mint-prompt application using Playwright MCP. Ensure tests cover all core user flows, including spec generation and gap flagging, and validate both happy paths and error cases.

Depends on:#24#25
Waiting for dependencies
AI 0%
Human 100%
High Priority
2 days
QA Engineer
Landing design preview
Landing: View Test Journey Map
Landing: Explore Testing Stages
Landing: Copy Setup Command
Docs: Read Playwright MCP Instructions
Docs: Copy Prompt Template
Docs: Fill In App Details and Flow
Docs: Run Prompt in Claude Code
Docs: Review Generated Spec Report
Landing design preview
Landing: View Test Journey Map
Landing: Explore Testing Stages
Landing: Copy Setup Command
Docs: Read Playwright MCP Instructions
Docs: Copy Prompt Template
Docs: Fill In App Details and Flow
Docs: Run Prompt in Claude Code
Docs: Review Generated Spec Report