explaingit

xuxh21/ui-regression-recorder-skill

Analysis updated 2026-05-18

26TypeScriptAudience · developerComplexity · 2/5Setup · moderate

TLDR

A Codex agent skill that breaks recorded browser test flows into reusable named steps, so future tests reuse existing capabilities instead of recording from scratch.

Mindmap

mindmap
  root((ui regression recorder))
    What it does
      Records browser flows
      Extracts reusable steps
      Reuses capabilities in new tests
    Tech stack
      TypeScript
      Playwright
      Codex
    Use cases
      Build capability library
      Compose new tests
      Debug failing selectors
    Audience
      Developers
      QA engineers

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

What do people build with it?

USE CASE 1

Turn a one-off recorded browser test into a library of reusable named actions

USE CASE 2

Compose new UI regression tests from existing capabilities instead of re-recording everything

USE CASE 3

Automatically backtrack through earlier steps to locate a broken selector when a test fails

USE CASE 4

Give an AI coding agent a repeatable process for maintaining Playwright test suites

What is it built with?

TypeScriptPlaywrightOpenAI Codex

How does it compare?

xuxh21/ui-regression-recorder-skillantonp29/sylvasignerdevagrawal09/specter
Stars262626
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity2/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires an existing Codex setup and familiarity with Playwright.

In plain English

This project is a skill for AI coding agents (specifically OpenAI Codex) that changes how you record and reuse automated browser tests. Most browser testing tools let you record clicks once and replay them, but that one recording is hard to maintain and every new test starts from scratch. This project takes a different approach: it treats each recorded flow as a source of reusable building blocks. When you give the skill a completed recording, it breaks that recording into smaller named capabilities, such as "open the list page", "create a record", or "verify duplicate rejection". Those capabilities get saved to a registry file called flows.json. The next time you need a new test, the skill plans it from the business goal first, matches each required step to an existing capability, and only records new footage when a step is genuinely missing. The repository includes a template for the capability registry (flows.template.json) and a starter helper library for common Playwright browser actions (playwright-common-flows.template.ts). There is also a full operating guide (SKILL.md) that describes how to initialize, record, clean, compose, rerun, and debug test workflows using this system. The project is written in TypeScript and targets teams already using the Playwright testing library. Installation is done through a companion skill installer if you already have one configured in Codex, or by cloning the repository manually and copying it into the Codex skills folder. The current stable release is v0.1.4. Once installed, the skill runs tests in a visible browser window by default so a human can watch what happens, and if a test fails it backtracks through earlier steps to find where a selector or postcondition went wrong rather than patching blindly. The core value here is that the first recording is not thrown away or treated as a fixed script. It becomes a library of known actions that new tests can combine in different ways, reducing how often you need to record from the beginning.

Copy-paste prompts

Prompt 1
Show me how to install this skill in Codex and record my first browser flow.
Prompt 2
Explain how flows.json stores reusable capabilities and how new tests reuse them.
Prompt 3
Help me use the playwright-common-flows template to write a new capability.
Prompt 4
Walk me through what happens when a test fails and the skill backtracks to find the broken step.

Frequently asked questions

What is ui-regression-recorder-skill?

A Codex agent skill that breaks recorded browser test flows into reusable named steps, so future tests reuse existing capabilities instead of recording from scratch.

What language is ui-regression-recorder-skill written in?

Mainly TypeScript. The stack also includes TypeScript, Playwright, OpenAI Codex.

How hard is ui-regression-recorder-skill to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is ui-regression-recorder-skill for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.