1. Habit
  2. Skills
  3. UI4 Convert Tests skill
payloadcms · 66 installs

UI4 Convert Tests skill
Runs by itself, UI change ready.

E2E tests follow UI changes.

Install the UI4 Convert Tests skill and make it a habit: follow https://gethabit.dev/skills/payloadcms/ui4-convert-tests.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

66 installs45K starsMIT licenceSource on GitHub ↗

UI4 Convert Tests

by payloadcms · 66 installs

The skill

The ui4 convert tests skill helps Payload developers find and fix e2e tests broken by UI changes, by analyzing the diff for selector, structure and text changes and updating helpers first.

Only when you ask.

The habit

E2E tests follow UI changes.

↻ Runs by itselfUI change ready

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

UI change ready. Runs in GitHub Actions or Claude Code routine.

  • ↻ UI change ready
  • e2e CI fails after changes in packages/ui/src

02

It checks its work

affected e2e tests pass. If a check fails, it tries again.

  • ✓affected tests fail before fixes
  • ✓PORT=3150 pnpm test:e2e <suite> --max-failures=1 passes after fixes
  • ✓tests that already passed were not changed

03

It remembers

selector changes log. The next run reads it first: selector and helper changes from earlier runs.

loops/ui4-test-fix-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one test suite per run, with at most 2 fix rounds.

  1. 01

    Analyze the diff

    Run git diff main on packages/ui/src .tsx and .css files and build a change summary.

  2. 02

    Find tests

    Grep test/ for component names, selectors and changed text.

  3. 03

    Read the tests

    Read each test and check for shared helpers in test/<feature>/helpers/.

  4. 04

    Confirm failures

    Run the affected suite on PORT=3150 with --max-failures=1.

  5. 05

    Fix

    Fix helpers first, then tests: selectors, popup steps and text assertions.

  6. 06

    Verify

    Re-run the same tests and commit only when they pass.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the UI4 Convert Tests skill helps.

Use it when

  • ✓ CI fails after UI changes
  • ✓ You finished a UI change and need tests updated
  • ✓ Buttons moved into a popup

Skip it when

  • – You do not work in the Payload repo
  • – Your tests are unit tests only

Questions

UI4 Convert Tests skill, answered.

Why run tests before fixing?

The skill says to change only tests that actually fail.

How does it avoid port clashes?

It runs each suite on its own PORT in the 3100-3199 range.

How do I install the UI4 Convert Tests skill?

Copy the prompt at the top into your agent. It installs the skill from payloadcms/payload and sets up the habit. Or run npx skills add payloadcms/payload --skill ui4-convert-tests.

Is the UI4 Convert Tests skill free?

Yes. It is published under MIT. Habit is free too.

UI4 Convert Tests. Now as a habit.

Install the UI4 Convert Tests skill and make it a habit: follow https://gethabit.dev/skills/payloadcms/ui4-convert-tests.md

  • Free
  • No account
  • Undo in one line

All payloadcms skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by payloadcms, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.