Skip to main content

Author from a recording (primary)

Recording a flow in the browser and feeding it to the AI pipeline is the fastest and most reliable way to write a PACE e2e test. The AI does the heavy lifting — cleaning the raw recording, building the spec, generating TypeScript, and checking it against the project rulebook — while you stay in control at each step.

What you need before you start​

  • The VS Code Playwright extension installed (see below).
  • A PACE environment you can log into (credentials in .env).
  • A few minutes to walk through the feature you want to test.

Step 1 — Install the VS Code Playwright extension​

Open VS Code, press Ctrl+Shift+X (or Cmd+Shift+X on macOS) to open the Extensions panel, and search for "Playwright Test for VS Code" (publisher: Microsoft). Click Install.

Once installed you will see a testing flask icon in the activity bar. The extension adds the Record new command that drives the browser recorder.

Step 2 — Record the flow​

  1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run "Test: Record new" (or click Record new inside the Playwright Test panel).
  2. A Chromium window opens pointed at the configured baseURL. Log in and navigate to the feature you want to test.
  3. Walk through the exact flow — clicks, form fills, waits — at a deliberate pace. The extension writes raw Playwright code as you go.
  4. Close the browser when you are done. The extension shows the generated test code.

Step 3 — Save the recording​

Save the generated file to:

tests/recordings/<name>.spec.ts

Choose a name that describes the scenario in kebab-case (e.g. create-deliverable, assign-cost-code, submit-estimate). Do not save it anywhere else — the pipeline looks here by convention.

Step 4 — Write paired English steps​

Before running the AI pipeline you must write a plain-English companion file that describes the intent of each action in the recording:

tests/recordings/<name>.steps.md

Write one numbered step per logical action. Use plain language — these steps become the source of truth that the Stabilizer uses to understand the recording. Vague or missing steps will cause the Stabilizer to halt.

Model — excerpt from tests/recordings/create-deliverble.steps.md:

1. Log in as the standard user
2. Navigate to the portfolio dashboard
3. click on 'search for project/Programs'
4. enter project number '5192'
5. and click on suggestion '5192 (testgk0306)'
6. Click on execution and control tab
7. click on Deliverbles tab
8. Click on create '+new deliverble' button
9. enter delverble number as '1'
10. enter name as 'del1'
11. Select any task
12. Select any costcode
13. enter progress weitage as '40'
14. select any work item from suggestions
15. enter planned qunatity as 10'
16. enter work item unit rate '4'
17. click on 'create and go to deliverbles button'
18. and validate error message

Notice that each step is one action or one assertion — short, concrete, unambiguous. Your steps do not need to be perfect prose; they just need to be clear enough for the AI to map each line to the corresponding click or fill in the recording.

Step 5 — Run /e2e-from-recording​

With both files in place, hand them to the AI pipeline:

/e2e-from-recording tests/recordings/<name>.spec.ts

On Antigravity, the slash command takes no inline argument — run /e2e-from-recording, then provide the recording path when prompted.

Replace <name> with the actual filename stem (e.g. tests/recordings/create-deliverable.spec.ts).

The pipeline runs three agents in sequence:

AgentWhat it produces
StabilizerA canonical spec at tests/specs/<feature>/<name>.md + data entries
GeneratorA runnable test at tests/e2e/<feature>/<name>.spec.ts (smoke-run included)
ReviewerA PASS / FAIL verdict with line-precise findings

For a full description of what each agent does, see the /e2e-from-recording command reference.

Step 6 — Review the output​

After the pipeline finishes, check three things:

  1. Spec file (tests/specs/…/<name>.md) — does the Background section describe your intent? Are all the steps numbered and each one sensible? See Specs for the expected shape.
  2. Generated test (tests/e2e/…/<name>.spec.ts) — skim the TypeScript for obvious mistakes, especially around selectors and data references.
  3. Reviewer verdict — if the Reviewer returned FAIL, read the findings and decide whether to accept the AI's auto-revision or edit the spec yourself and re-run /e2e-from-recording.

Step 7 — Run the test locally​

pnpm run test --grep "<name>"

Watch the test run (set HEADLESS=false in .env to see the browser). A green result confirms the test is stable.

Step 8 — Commit​

Stage the three new files and commit:

git add tests/recordings/<name>.steps.md \
        tests/specs/<feature>/<name>.md \
        tests/e2e/<feature>/<name>.spec.ts
git commit -m "test: add <description> e2e test"

You do not need to commit the raw recording (tests/recordings/<name>.spec.ts) unless you want to preserve it for future reference.

Tips​

  • Two files are required. The pipeline halts if <name>.steps.md is missing or has fewer steps than the recording has logical actions.
  • Keep steps atomic. One action per step. "Fill form and submit" is two steps.
  • Use real data. If the recording hard-codes values (a project number, a user name), make a note in the steps file. The Stabilizer will move those values into tests/data/ so the test stays environment-neutral.