explaingit

wizenheimer/canary

★ 25TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

TLDR

Canary is a browser-based QA tool that plugs into AI coding agents, automatically testing your app's UI after code changes and saving reusable test scripts so you never have to write them by hand.

Mindmap

mindmap
  root((canary))
    What It Does
      Browser-driven QA
      Triggered by code changes
      No manual scripting
    Reports
      Screen recording
      Console logs
      Network requests
      Playwright trace
    Outputs
      Reusable Playwright scripts
      Self-contained report file
    Integrations
      Claude Code plugin
      Cursor plugin
      Codex plugin
    Setup
      Two npm packages
      One-time browser download
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Run automated browser tests on any UI flow after a Claude Code change without writing test scripts yourself.

USE CASE 2

Generate a self-contained test report with screen recordings and network logs that opens in any browser with no server needed.

USE CASE 3

Reuse the Playwright scripts Canary generates in your CI pipeline so the AI does not have to rediscover test steps each time.

USE CASE 4

Attach Canary to an already-open Chrome session that is logged into your app to test authenticated flows.

Tech stack

TypeScriptNode.jsPlaywright

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a one-time browser download step and a background process running to manage browser sessions.

In plain English

Canary is a quality-assurance tool designed to work alongside AI coding agents like Claude Code. When you make code changes, Canary reads those changes, figures out which parts of your app's interface might be affected, and then tests those flows by driving a real browser. The agent does the clicking and navigating for you, rather than requiring you to do it manually or write testing scripts by hand. Every session Canary runs produces a self-contained report file. That report includes a screen recording of everything the browser did, a log of all console messages and errors, a record of every network request made, and a full Playwright trace showing the exact sequence of browser actions. You can open this report file in any browser without a server or build step. Nothing is summarized or reconstructed after the fact: it is the actual run, captured as it happened. The part the README emphasizes most is that Canary also saves a reusable Playwright script from each session. Playwright is a standard browser automation tool used in software testing. Once the agent has figured out how to test a particular user flow, Canary keeps that script so you can re-run the same test later in your automated pipeline without paying the AI to rediscover the steps again. You get both the agent-driven exploration and the reproducible artifact it produces. Setup involves installing two npm packages and running a one-time install command that downloads a browser. The tool runs a background process that manages browser sessions. You can start a session, run one or more scripts against it with named steps, end the session, and then open a viewer to browse all recorded sessions. It also supports attaching to an already-open Chrome browser, which is useful when you need to test against a browser that is already logged in somewhere. Plugins for Claude Code, Cursor, and Codex are included. In Claude Code specifically, Canary registers as a plugin with slash commands like /canary:verify so you can describe what changed and have Claude plan and run the QA flow.

Copy-paste prompts

Prompt 1
Use Canary with Claude Code to automatically test the checkout flow after I modify the cart component. Show me the /canary:verify command and how to describe what changed.
Prompt 2
Set up Canary so every Claude Code session saves a Playwright test script I can add to my existing CI pipeline.
Prompt 3
Open a Canary report file and explain what the screen recording and network request log are showing for a failed test session.
Prompt 4
Configure Canary to attach to an existing Chrome browser that is already logged into my staging environment rather than launching a new one.
Open on GitHub → Explain another repo

← wizenheimer on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.