[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-84152":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":9,"trendingCount":14,"starSnapshotCount":14,"syncStatus":13,"lastSyncTime":25,"discoverSource":26},84152,"ui-regression-recorder-skill","xuxh21\u002Fui-regression-recorder-skill","xuxh21","基于playwright cli页面测试自动化脚本",null,"TypeScript",79,3,2,0,10,23,43,1.81,false,"main",true,[],"2026-06-12 02:04:38","# UI Page Automation Testing Skill\n\n[![Release v0.1.4](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Frelease-v0.1.4-blue)](https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Freleases\u002Ftag\u002Fv0.1.4)\n\n[中文](.\u002FREADME.zh-CN.md)\n\nTurn one human UI page flow into reusable automation capabilities, then assemble new testing flows from those capabilities instead of recording everything again.\n\n> This skill is not about saving a one-off screen recording script. It decomposes a full business flow into reusable capabilities, splits the script into maintainable parts, and assembles the smallest runnable regression for a new request.\n>\n> Latest stable release: [v0.1.4](https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Freleases\u002Ftag\u002Fv0.1.4)\n>\n> All releases: [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Freleases)\n\n## Overview\n\nUI regression usually breaks down in two places:\n\n- the original recording is too raw to maintain\n- every new request starts from a brand new script\n\nThis skill is designed to solve both.\n\nIt preserves the first complete recording, extracts reusable capabilities from it, registers them in `flows.json`, and later uses those capabilities to assemble new business flows with a visible browser by default.\n\n## Core Idea\n\nThe core idea is not \"record once, replay forever\".\n\nThe real idea is:\n\n1. record one complete business flow\n2. decompose that flow into stable business capabilities\n3. decompose the script into raw recording, cleaned specs, and shared helpers\n4. register those capabilities in a machine-readable map\n5. assemble new business flows from old capabilities\n\nIn other words, this skill treats UI regression as workflow compilation, not script storage.\n\nOne recording can contain many reusable pieces:\n\n- open the target module\n- open the list page\n- create a record\n- edit a record\n- verify duplicate-name rejection\n\nOnce these pieces exist, a later request does not need a brand new end-to-end script. The skill can plan the new target flow, match each step to existing capabilities, and assemble a new runnable flow from them.\n\n## What This Skill Solves\n\nNormal Playwright recording solves only the first question: \"can we record clicks?\"\n\nReal UI regression work needs more:\n\n- plan from the business goal before choosing a script\n- extract reusable capabilities from a full recording\n- reuse the same helper repeatedly for duplicate-validation or batch scenarios\n- run regression in a headed browser by default so the operator can see what happened\n- backtrack failures by checking the previous capability postcondition before patching the current selector\n\nThis skill focuses on that full workflow.\n\n## Core Workflow\n\nThe working loop is:\n\n1. record one complete business flow\n2. preserve the raw Playwright codegen output\n3. clean it into stable specs and shared helpers\n4. register operations and capabilities in `flows.json`\n5. plan later requests from business steps first\n6. match each step to existing capabilities\n7. record again only when a capability is truly missing or stale\n8. run the regression in a visible browser unless the user explicitly wants CI or headless mode\n\n## How The Skill Works\n\nThis skill behaves like a four-stage system.\n\n### 1. Business Decomposition\n\nThe skill first converts the user request into ordered business steps.\n\nExample:\n\n```text\nGoal: validate duplicate-name rejection on a list page\nSteps:\n1. open target module\n2. open the list page\n3. create a record once\n4. create the same record again\n5. verify duplicate rejection\n```\n\nThis happens before selecting any script.\n\n### 2. Capability Matching\n\nEach business step is matched against the capability registry in `flows.json`, shared helpers, and known specs.\n\nThe skill does not start by picking the most similar full spec. It starts by asking:\n\n- which step already exists as a capability\n- which step can be reused with different parameters\n- which step is missing and must be recorded\n\n### 3. Script Decomposition and Assembly\n\nA full recording is never treated as the only final artifact.\n\nThe skill splits it into:\n\n- raw recording\n- cleaned spec\n- shared helpers\n- capability metadata\n\nThen, for a new business request, it assembles a new runnable flow from those reusable pieces.\n\nThat means the system can do both:\n\n- split one old script into smaller capabilities\n- combine several old capabilities into one new script\n\n### 4. Visible Execution and Feedback\n\nAfter assembly, the skill runs the smallest valid flow in a headed browser by default. If the run fails, it backtracks through previous capability postconditions instead of blindly patching the current selector.\n\nThe loop is:\n\n```text\nrecord -> split -> register -> reuse -> assemble -> run -> refine\n```\n\n## Why It Is Different\n\nThis skill does not treat a recorded spec as the final deliverable.\n\nThe final deliverable is a capability map:\n\n- `login`\n- `open-module`\n- `open-list-page`\n- `create-record`\n- `edit-record`\n- `verify-table-row`\n\nOnce these are extracted, later flows become compositions of existing capabilities instead of fresh recordings.\n\nThis is why the skill can support \"new business from old building blocks\":\n\n- old business flow A gives capabilities `a`, `b`, `c`\n- old business flow B gives capabilities `c`, `d`, `e`\n- new business flow C may be assembled as `a + c + e`\n\n## Safe Example\n\nA real refinement thread behind this skill is Codex session `019e8904-5b39-7120-9aa4-48c3fd312123`.\n\nThat session pushed the skill toward four concrete rules:\n\n- flow-first planning before script selection\n- repeated-capability reuse for duplicate validation\n- headed browser by default for human-visible regression\n- failure backtracking through previous postconditions\n\nGeneric example:\n\n- first run: record `create-record`\n- later run: validate `duplicate-name rejection`\n\nThe second run is not a brand new flow. It is:\n\n1. plan the target business flow\n2. reuse `open-list-page`\n3. call `createNamedRecord(... expected: success)`\n4. call `createNamedRecord(... expected: duplicate)`\n5. run in a visible browser\n\n## Repository Layout\n\n```text\n.\n├── README.md\n├── README.zh-CN.md\n├── SKILL.md\n├── agents\u002F\n│   └── openai.yaml\n└── assets\u002F\n    ├── flows.template.json\n    └── playwright-common-flows.template.ts\n```\n\n## Included Files\n\n- `SKILL.md`\n  The full operating guide for initialize, record, clean, compose, rerun, and debug workflows.\n\n- `agents\u002Fopenai.yaml`\n  Basic display metadata for the skill.\n\n- `assets\u002Fflows.template.json`\n  Starter registry for operations, capabilities, and history.\n\n- `assets\u002Fplaywright-common-flows.template.ts`\n  Starter helper library for shared Playwright flows such as overlay cleanup, page checks, generic record creation, and current-page actions.\n\n## Quick Install\n\n### Option A. Install with the built-in skill installer\n\nRecommended when the target agent already has the built-in Codex skill installer:\n\n```bash\npython3 ~\u002F.codex\u002Fskills\u002F.system\u002Fskill-installer\u002Fscripts\u002Finstall-skill-from-github.py \\\n  --repo xuxh21\u002Fui-regression-recorder-skill \\\n  --ref v0.1.4 \\\n  --path . \\\n  --name ui-regression-recorder\n```\n\nThis keeps the install pinned to a known release instead of drifting with `main`.\n\n### Option B. Give an agent the GitHub link directly\n\nExample prompt:\n\n```text\nUse $skill-installer. Install https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Ftree\u002Fv0.1.4 as ui-regression-recorder.\n```\n\n### Option B2. Copy-and-send prompt\n\nIf you want a ready-to-send message for another agent, copy this:\n\n```text\nUse $skill-installer.\n\nInstall the skill from:\nhttps:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Ftree\u002Fv0.1.4\n\nInstall name:\nui-regression-recorder\n\nAfter installation, restart Codex and verify the skill is available in a fresh session.\n```\n\n### Option C. Manual install\n\n```bash\ngit clone --branch v0.1.4 --depth 1 https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill.git\nmkdir -p ~\u002F.codex\u002Fskills\ncp -R ui-regression-recorder-skill ~\u002F.codex\u002Fskills\u002Fui-regression-recorder\n```\n\n### Verify installation\n\n```bash\nls ~\u002F.codex\u002Fskills\u002Fui-regression-recorder\nsed -n '1,20p' ~\u002F.codex\u002Fskills\u002Fui-regression-recorder\u002FSKILL.md\n```\n\nAfter installation or update, restart Codex so it reloads skill metadata.\n\n## Full Setup\n\nThis section is intentionally beginner-friendly. If you want to use the skill with both Playwright recording and current Chrome sessions, follow the full sequence below.\n\n### 1. Install Node.js\n\nCheck whether Node.js is already available:\n\n```bash\nnode -v\nnpm -v\n```\n\nIf these commands fail, install Node.js 18+ first.\n\nExamples:\n\n- macOS with Homebrew: `brew install node`\n- other platforms: install from [nodejs.org](https:\u002F\u002Fnodejs.org\u002F)\n\n### 2. Install the skill\n\nInstall the skill itself before configuring Playwright:\n\n```bash\npython3 ~\u002F.codex\u002Fskills\u002F.system\u002Fskill-installer\u002Fscripts\u002Finstall-skill-from-github.py \\\n  --repo xuxh21\u002Fui-regression-recorder-skill \\\n  --ref v0.1.4 \\\n  --path . \\\n  --name ui-regression-recorder\n```\n\nVerify it exists:\n\n```bash\nls ~\u002F.codex\u002Fskills\u002Fui-regression-recorder\n```\n\n### 3. Install Playwright packages\n\nInstall the packages used by this skill:\n\n```bash\nnpm install -g playwright @playwright\u002Fmcp @playwright\u002Fcli@latest\n```\n\nVerify each command:\n\n```bash\nplaywright --version\nplaywright-cli --help\nnpx @playwright\u002Fmcp@latest --help\n```\n\nWhat each package is for:\n\n- `playwright`: provides `playwright codegen`, `playwright test`, and `playwright install`\n- `@playwright\u002Fmcp`: lets Codex connect to Playwright or Chrome through MCP\n- `@playwright\u002Fcli`: the official Playwright CLI toolchain, useful when you also want the standalone `playwright-cli` workflow\n\nOptional extra:\n\n```bash\nplaywright-cli install --skills\n```\n\n### 4. Install Playwright browsers\n\nInstall at least one Playwright browser runtime:\n\n```bash\nplaywright install chromium\n```\n\nIf you want the broadest local compatibility, you can also run:\n\n```bash\nplaywright install\n```\n\n### 5. Install the Playwright Chrome Extension\n\nIf you want the skill to reuse your existing Chrome login state, cookies, and open tabs, install the official Playwright Chrome Extension:\n\n- Chrome Web Store: [Playwright Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fplaywright-extension\u002Fmmlmfjhmonkocbjadbfplnigmagldckm)\n\nRecommended steps:\n\n1. open the Chrome Web Store link\n2. click `Add to Chrome`\n3. pin the extension so it is easy to find\n4. click the extension icon once after installation\n5. if you want automatic connections, copy the `PLAYWRIGHT_MCP_EXTENSION_TOKEN` shown by the extension\n\nIf you do not configure the token, the browser may ask you to approve each connection manually.\n\n### 6. Configure Codex MCP\n\nCreate or edit `~\u002F.codex\u002Fconfig.toml` and add:\n\n```toml\n[mcp_servers.playwright]\ncommand = \"npx\"\nargs = [\"@playwright\u002Fmcp@latest\", \"--extension\"]\nenv = { PLAYWRIGHT_MCP_EXTENSION_TOKEN = \"paste-your-token-here\" }\n```\n\nIf you prefer manual approval and do not want to use a token yet:\n\n```toml\n[mcp_servers.playwright]\ncommand = \"npx\"\nargs = [\"@playwright\u002Fmcp@latest\", \"--extension\"]\n```\n\n### 7. Restart Codex\n\nRestart Codex after:\n\n- installing the skill\n- installing the MCP server\n- editing `~\u002F.codex\u002Fconfig.toml`\n\nWithout a restart, the agent may not load the new skill or MCP configuration.\n\n### 8. Smoke-test everything\n\nOpen Chrome and keep any normal web page open.\n\nThen start a fresh Codex session and try these checks:\n\n```text\nUse Playwright MCP to inspect the current Chrome tab.\n```\n\n```text\nUse $ui-regression-recorder. Initialize the current project for UI regression.\n```\n\nIf everything is configured correctly:\n\n- Codex should be able to connect to Chrome\n- you may be asked to approve the connection once\n- the agent should be able to inspect the current tab structure\n- the installed skill should be available in a fresh session\n\n## First Tutorial\n\n### Tutorial A. First full-flow recording\n\nUse this path when you want your first reusable baseline.\n\n1. install the skill\n2. install Playwright packages and browsers\n3. initialize the current project:\n\n```text\nUse $ui-regression-recorder. Initialize the current project for UI regression.\n```\n\n4. open the target site\n5. start a full recording from the first stable page of the business flow\n6. keep `Record` on and `Pick locator` off during recording\n7. stop and save the raw recording\n8. ask the skill to clean it, extract helpers, and update `flows.json`\n\n### Tutorial B. Continue from the current page\n\nUse this path when login is fragile or you are already on the target page in Chrome.\n\n1. open Chrome manually\n2. log into the target site yourself if needed\n3. navigate to the exact page you want to validate\n4. ask Codex to continue from the current page:\n\n```text\nUse $ui-regression-recorder. I am already on the target page. Continue from the current page and do not log in again.\n```\n\nThis is often the safest mode for single-session SSO environments.\n\n## Operating Principles\n\n### 1. Plan before replay\n\nDo not start by picking the most similar script.\n\nStart by answering:\n\n- what business outcome is being validated\n- what the ordered steps are\n- which capabilities already exist\n- which step is missing\n\n### 2. Reuse capabilities, not whole scripts\n\nIf a full script contains the needed behavior, extract and reuse the relevant helper instead of cloning the whole spec.\n\n### 3. Reuse the same capability repeatedly\n\nIf the task is duplicate validation, batch creation, or repeated submit, prefer calling one existing helper multiple times with different expectations instead of building a brand new flow.\n\n### 4. Headed browser by default\n\nFor user-facing regression, the browser should be visible.\n\nHeadless is only for CI or when the user explicitly wants unattended execution.\n\n### 5. Preserve raw, clean separately\n\nRaw recordings stay untouched.\n\nCleaned specs and helpers are the maintainable layer.\n\n### 6. Backtrack failures\n\nIf step N fails, first validate whether step N-1 actually completed. The visible failure point is often not the root cause.\n\n## Versioning and Upgrade\n\n### Why the install is pinned\n\nInstall from a release tag such as `v0.1.4`, not from `main`.\n\nThat gives you:\n\n- reproducible installs\n- a clear rollback point\n- release notes that match the installed files\n\n### How to upgrade safely\n\nThe built-in installer does not overwrite an existing destination directory. For upgrades, replace the old skill directory first, then reinstall the new tag.\n\nSafe upgrade example:\n\n```bash\nexport UI_REG_SKILL_VERSION=v0.1.4\nmv ~\u002F.codex\u002Fskills\u002Fui-regression-recorder ~\u002F.codex\u002Fskills\u002Fui-regression-recorder.bak.$(date +%Y%m%d%H%M%S)\npython3 ~\u002F.codex\u002Fskills\u002F.system\u002Fskill-installer\u002Fscripts\u002Finstall-skill-from-github.py \\\n  --repo xuxh21\u002Fui-regression-recorder-skill \\\n  --ref \"${UI_REG_SKILL_VERSION}\" \\\n  --path . \\\n  --name ui-regression-recorder\n```\n\nThen:\n\n1. restart Codex\n2. open a fresh session\n3. verify the skill is available\n\n### Where to check versions\n\n- latest stable release: [v0.1.4](https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Freleases\u002Ftag\u002Fv0.1.4)\n- all releases: [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fxuxh21\u002Fui-regression-recorder-skill\u002Freleases)\n\n## Typical Use Cases\n\n- initialize a project for UI regression\n- record a named business operation\n- convert raw Playwright codegen output into stable regression specs\n- extract shared helpers from multiple flows\n- execute a known flow with new test data\n- start from the current logged-in page instead of replaying login\n- update only the changed capability after a page revision\n\n## Example Prompts\n\n```text\nUse $ui-regression-recorder. Initialize the current project.\n```\n\n```text\nUse $ui-regression-recorder. I want to record a \"create record\" operation from the first stable page.\n```\n\n```text\nUse $ui-regression-recorder. Validate duplicate-name rejection on the list page.\nRequirements:\n- plan the flow first\n- reuse existing helpers if possible\n- use a visible browser by default\n```\n\n```text\nUse $ui-regression-recorder. I am already on the target page. Continue from the current page and do not log in again.\n```\n\n## Privacy Notes\n\nThis repository intentionally uses generic examples such as:\n\n- module\n- list page\n- record\n- detail page\n- duplicate-name rejection\n\nThe documentation and templates avoid business-specific nouns so the public repository can be shared safely.\n\n## Status\n\nThis repository publishes the current local version of the skill used in real Codex sessions and refined through actual UI regression work, not just a conceptual template.\n","2026-06-11 04:12:24","CREATED_QUERY"]