Canyon

Introduction

Overview

Canyon is a JavaScript code coverage collection platform. It tackles the problems developers and QA engineers face when they need per–test-case coverage during end-to-end (E2E) and UI automation runs.

It is made up of three main parts:

• A set of plugins that integrate with common CI setups and read environment variables.
• A full-stack application (Node.js + React) that ingests and processes coverage data, exposes backend APIs, and renders coverage reports in the browser.

Why Canyon?

Canyon splits hit data and map data at compile time, so it can handle the large volumes of coverage produced by UI automation efficiently.

It also integrates with common CI providers: instrumentation is injected at build time, and coverage can be collected and reported while UI automation runs.

That way teams can see accurate, near–real-time coverage per test case in UI automation, and use it to judge and improve code quality.

Features

• Accurate and efficient — separate hit and map; initial coverage data is produced at compile time for reliable, efficient collection.
• Source maps — map coverage back to real source code.
• Build tooling — coverage flows for stacks such as Next.js, Vite, and Webpack.
• Automation frameworks — integration patterns for common UI automation stacks.
• CI providers — GitHub Actions, GitLab CI, and similar runners; CI env detection where applicable.

Self-hosting

If you want full control over coverage and test metadata, you can self-host Canyon on your own infrastructure.

Ecosystem

Architecture

High-level flow:

1. A Babel (or compatible) plugin instruments code in your CI/CD pipeline.
2. The app is deployed to a test environment; UI automation or manual testing runs the instrumented code.
3. Coverage hits are reported to the Canyon server.
4. The server stores and processes data, and together with SCM source metadata (e.g. GitLab) builds coverage reports.

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#FFF7ED",
    "primaryBorderColor": "#FB923C",
    "lineColor": "#9CA3AF",
    "fontFamily": "Inter, system-ui"
  }
}}%%

flowchart LR
  classDef client fill:#EEF2FF,stroke:#6366F1,color:#1E1B4B;
  classDef test fill:#F1F5F9,stroke:#94A3B8,color:#020617;
  classDef core fill:#FFF7ED,stroke:#FB923C,color:#7C2D12;
  classDef storage fill:#ECFEFF,stroke:#06B6D4,color:#083344;
  classDef infra fill:#F0FDF4,stroke:#22C55E,color:#14532D;
  classDef external fill:#FAFAFA,stroke:#D1D5DB,color:#111827;

  %% Clients
  UI[UI Automation]
  WebUI[Canyon Web UI]
  API[API Client]

  class UI,WebUI,API client

  %% Test
  Test[Test Environment]
  Pipeline[CI / CD Pipeline]

  class Test,Pipeline test

  UI --> Test
  Pipeline --> Test

  %% Canyon Core
  subgraph Canyon["Canyon Server"]
    MQ[Message Queue]
    DB[(Postgres)]
    HTTP[HTTP Server]
  end

  class MQ,HTTP core
  class DB storage

  Test --> MQ
  MQ --> DB
  DB --> HTTP

  %% Infra
  subgraph Deploy["Service Deployment"]
    K8s[Kubernetes]
    Node[Node.js]
  end

  class K8s,Node infra

  Canyon --> Deploy

  %% External
  GitLab[GitLab]
  class GitLab external

  Canyon -.-> GitLab

  WebUI -.-> HTTP
  API -.-> HTTP

WeChat Group

Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License — see the LICENSE file for details.