Run a Meticulous test run after implementing a frontend change, then hands off to the `meticulous-review` skill to classify each visual change as intended or unintended. Use when implementing a feature autonomously end-to-end before creating a PR.
---
name: meticulous-test
description: Run a Meticulous test run after implementing a frontend change, then hands off to the `meticulous-review` skill to classify each visual change as intended or unintended. Use when implementing a feature autonomously end-to-end before creating a PR.
user-invocable: true
---
To test a frontend change using Meticulous, follow the workflow below step by step, using the CLI commands as described.
> Before starting, run the `meticulous-cli-update` skill to ensure the Meticulous CLI is up to date — unless it has already run earlier in this conversation, in which case skip it.
## Step 1 -- Trigger Meticulous test run
If you are already given a test run id, then skip this step.
1. If possible, find out what build artefact Meticulous expects by checking `.github/workflows/` for one of the following steps:
- `uses: alwaysmeticulous/report-diffs-action/upload-assets@v1` - build assets
- `uses: alwaysmeticulous/report-diffs-action/upload-container@v1` - docker image
2. Build the frontend following the same instructions as used in the GitHub workflow.
3. Upload the build artefact and trigger a Meticulous test run:
```
# upload-assets
meticulous ci upload-assets --appDirectory <path-to-build> --repoDirectory <path-to-repo> --waitForTestRunToComplete
# upload-container
meticulous ci upload-container --localImageTag <image-tag> --repoDirectory <path-to-repo> --waitForTestRunToComplete
```
`--appDirectory` must point to the build output directory (e.g., `dist/` subfolder), whereas `--localImageTag` must point to the local Docker image tag. The `--repoDirectory` must point to the root of the git repository (e.g., `.`). The `--waitForTestRunToComplete` flag is required.
The command will finish with status `Failure` if visual differences have been detected. Note the `testRunId` from the output.
## Step 2 -- Review the visual changes
Follow the `meticulous-review` skill, passing the `testRunId` from Step 1. It fetches the diff summary, inspects representative screenshots / DOM diffs / timelines, and produces a final report classifying each visual change as intended or unintended.
Creator's repository · alwaysmeticulous/skills