| name | visual-verification |
| description | Capture window-scoped before/after screenshots of the running poi UI over the Chrome DevTools Protocol to verify a visual change. Use when asked to screenshot poi, to show what a UI change looks like, or to confirm a CSS/layout/theme change actually renders — anything needing a picture of the app rather than a test result. |
Visual Verification of poi (CDP)
Never use desktop capture
Full-desktop capture (e.g. PowerShell CopyFromScreen) grabs unrelated windows — a privacy
problem, and useless when poi is not the foreground window. Always capture the poi renderer
directly over CDP.
Procedure
-
Launch poi with the debugging port, clearing the inherited env var (see the build-and-run
skill for why):
env -u ELECTRON_RUN_AS_NODE npx electron . --remote-debugging-port=9222
-
Poll http://127.0.0.1:9222/json/list until it responds.
-
Pick the target whose url contains index.html — that is the main renderer.
-
Connect with Node >= 22's built-in WebSocket (no dependency needed) and send
Page.captureScreenshot. Write the throwaway script into the scratchpad directory with the
Write tool and run it with node <abs-path> — do not use a bash heredoc, this session's
shell wrapper mangles the quoting.
-
Capture the baseline first (e.g. on master), then the branch, and compare the two PNGs by
reading them.
What is and is not comparable
poi restores cached redux state from localStorage on boot, so fleet and mini-ship panels
render populated without logging into the game. However, the row data can differ between
boots as the cache updates — so compare styling and layout, not content.
Single-instance lock
If the user's own poi is running, the launched instance exits immediately with "Another
instance is running". Their process may be named poi.exe rather than electron.exe. Kill
only test instances:
taskkill //F //IM electron.exe
That never touches the packaged poi.exe.
