Clickmap

Your Blueprint for Automated Testing

A lightweight, open JSON-based format that describes a website's structure, UI element selectors, and user journeys. Designed for humans, AI agents, and test automation tools.

GitHub RepositoryBrowser Extension

What Problem Does Clickmap Solve?

Transforming the painful reality of test automation into a streamlined, reliable process

The Problems

Creating E2E browser tests is painful and fragile:

QA engineers waste time manually inspecting DOMs for stable selectors
Developers rarely document user flows or element identifiers
AI agents struggle with web page discovery and element targeting
Tests frequently break from UI changes and poor element identification

The Solution

Clickmap provides a comprehensive foundation:

Structured map of all application pages and their relationships
Comprehensive UI element catalog with multiple backup selectors
Clear navigation paths and page-to-page link definitions
Pre-defined user journeys for complete E2E test scenarios

Result: Human testers and AI agents can generate automation scripts for any framework (Cypress, Playwright, Selenium, etc.) — completely programmatically.

Key Use Cases

Discover how Clickmap transforms testing workflows across teams and tools

AI Test Generation

Generate automation test cases using AI agents like GPT-4 and Claude with structured context.

Framework-Agnostic

Drive Playwright, Cypress, Selenium, and other testing frameworks using Clickmap as universal input.

Collaboration Layer

Shared test flow definition that bridges communication between developers, QAs, and automation tools.

Scaffold Test Suites

Define comprehensive test coverage from shared JSON specifications across teams and CI pipelines.

Enhanced Robustness

Reduce test flakiness and improve reliability by defining robust selectors and clear navigation paths.

CI/CD Ready

Seamlessly integrate with CI pipelines to automatically generate and execute test coverage from Clickmap files.

How It Works

Clickmap uses a simple JSON structure with two main components that work together seamlessly

1

Pages Array

pages[]

Each page defines the structure and interactive elements:

Unique identifier for reference
URL (absolute or relative paths)
Interactive elements with multiple selectors
Navigation links to other pages
2

Journeys Array

journeys[]

Define complete user flows through your application:

High-level E2E user scenarios
Sequential steps with page references
Element interactions by name
No complex logic or loops required

Complete Example

See how pages and journeys work together in practice

Tooling Support & Goals

Built for flexibility, designed for collaboration, optimized for the future of testing

Comprehensive Tooling

Human-authored JSON specifications
Browser extension auto-generation
AI agent interpretation & test generation
Custom test runners & CI pipeline integration

Core Principles

Simple & Lightweight

Easy to write, read, and maintain

Team Collaboration

Bridges QAs, developers, and AI tools

Version Control Friendly

Git-friendly format for code reviews

Zero-Setup Automation

Instant test creation without manual setup