| name | ui-verification |
| description | Verify a Sensei LMS Certificates UI or behavior change end-to-end against the running WordPress site. Use after making a change that affects the certificate template designer, the generated PDF, the "View Certificate" link/block, or any admin/front-end surface, and whenever the user asks to "check it in the browser", "verify the UI", "see if it works", or "smoke-test" a change. Scopes what to check from `git diff`, drives the site via Chrome DevTools MCP, and captures screenshots. This is agent-driven manual verification, not an automated test suite — it does not run or write tests. |
Sensei LMS Certificates UI Verification
Confirm a change behaves correctly from a user's perspective by driving the real
site in a browser. Use this alongside — not instead of — writing automated tests
for the change (see AGENTS.md "Testing").
Prerequisites
- A running WordPress site with both Sensei LMS and this plugin active. This
repo has no wp-env/Docker of its own — use the local site this checkout lives
under. Confirm the site's base URL and an admin login with the user before
driving it.
- At least one course a student can complete, so a certificate gets
generated. If none exists, create a course + a student enrollment first (or ask
the user to point you at an existing completed course).
- Chrome DevTools MCP tools (
mcp__chrome-devtools__*) available.
- For changes under
assets/, run npm run build:assets first — the browser
loads the built files in assets/dist/, not the source. Hard-reload after.
Certificate surface map
Ranked by what a certificates change usually touches. Admin paths are stable;
front-end URLs depend on the site's permalinks — discover them by navigating.
| Area | Where | Verify when changing |
|---|
| Certificate Templates CPT | /wp-admin/edit.php?post_type=certificate_template | Template list, the design/write panels (background image, fonts, field placement) |
| Certificates settings | /wp-admin/admin.php?page=sensei-settings → Certificates tab | Settings save/load, "View in Learner Profile" / public-sharing options |
| Sensei Tools | /wp-admin/admin.php?page=sensei-tools | Bulk certificate generation / data cleanup actions |
| Single course (front end) | the course page, as a student who completed it | "View Certificate" button/link appears and links correctly |
| Certificate PDF | the "View Certificate" / download link | PDF renders, downloads, and the content (name, course, date) is correct |
| Learner profile | the student's public profile page | "View Certificate" link shows when enabled |
| Course List block / archive | /courses/ or a page using the block | "View Certificate" link on completed courses |
| View Certificate block | block editor + the front-end page embedding it | Editor insert/config and front-end render |
Workflow
1. Scope from the diff
git diff trunk...HEAD --name-only
Map changed files to surfaces; skip surfaces the diff doesn't touch:
admin/ or classes/class-woothemes-sensei-certificate-templates.php → template designer + write panels.classes/class-woothemes-sensei-pdf-certificate.php, class-woothemes-sensei-certificates-tfpdf.php, class-vip-tfpdf.php, lib/tfpdf/ → generate and open a certificate PDF; inspect the rendered output.assets/blocks/, classes/blocks/ → the View Certificate block, in both the editor and the front end.templates/ → front-end certificate output.classes/class-woothemes-sensei-certificates.php → the broad one: settings tab, download flow, learner-profile link, course list columns. Check whichever the diff's methods drive.
2. Confirm the site is reachable
Navigate to the base URL and confirm it loads before driving flows. If assets
changed, confirm npm run build:assets ran.
3. Drive the relevant flows
For each in-scope surface, navigate, perform the action a user would, and confirm
the expected result. The core happy path for most changes:
- As a student, complete (or open an already-completed) course.
- Confirm the "View Certificate" link/button appears where expected.
- Follow it; confirm the certificate PDF renders and downloads.
- Confirm the certificate content is correct (student name, course title, date).
For admin/template changes, exercise the template designer: edit a template's
background/fonts/field placement, save, then re-generate a certificate and confirm
the change shows.
4. Capture evidence
Screenshot each verified surface (mcp__chrome-devtools__take_screenshot).
Capture both the before/after or the final state depending on what the change
affects.
5. Report
Summarize what you verified, per surface: what you did, what you expected, what
you saw, and attach the screenshots. Call out anything that didn't match — don't
claim a flow works unless you actually drove it.
