QA checklist 0001: Documentation pages visual verification
Scope
Use this checklist to verify that documentation pages are visually correct, navigable, and interactive. It is intended for manual QA on desktop and mobile widths.
Preconditions
- Open the docs home page and at least one page from each major section.
- Test in one Chromium-based browser and one WebKit browser when possible.
- Run checks in both light and dark theme modes.
Checklist by page sections
| Section | What to verify | Expected result |
|---|---|---|
| Top navigation | Project links, Code links, active page highlight, search input visibility. | Links open correct pages, active state is correct, search opens and returns results. |
| Breadcrumbs | Hierarchy for current page, clickable parent items. | Breadcrumb path matches page location and parent links are valid. |
| Main content cards | Titles, paragraphs, tables, and lists alignment. | No clipping, overlap, broken spacing, or unreadable contrast. |
| On this page sidebar | Auto-generated anchors from H2/H3, active section highlight while scrolling. | Anchor list is present and active state follows current section. |
| Footer | Footer links and informational text block. | Links are valid and footer remains readable in both themes. |
Interactive controls checklist
| Control | Where it is located | What to check |
|---|---|---|
| Flashlight theme toggle | Top navigation, theme button area (flashlight icon). | Cycles modes in order: system → light → dark, tooltip and aria-label are updated. |
| Rocket back-to-top button | Bottom-right area after scrolling near page end (rocket icon). | Appears near page bottom, scrolls to top on click, animation does not break layout. |
| Sidebar menu button | Near page title in drawer mode. | Opens and closes documentation drawer, keyboard Escape closes it. |
| Docs search | Top navigation search field. | Handles empty states, keyboard navigation, and result click navigation correctly. |
Screenshots required for QA report
Attach screenshots to make each verification point explicit. Use clear marks (rectangle or arrow) to show the exact UI element under test.
- Screenshot 1: top navigation with flashlight icon visible.
- Screenshot 2: bottom-right rocket button visible near page end.
- Screenshot 3: opened “On this page” sidebar with active section highlight.
- Screenshot 4: mobile/drawer menu state with navigation opened.
- Screenshot 5: search result list with at least one matched query.
Pass/fail rules
- Pass: all rows in this checklist are verified with no blocking UI defects.
- Fail: any broken navigation, inaccessible control, or severe visual regression is found.
- Needs follow-up: minor visual issue exists but does not block content access.
Page history
| Date | Change | Author |
|---|---|---|
| Added required Page history section to satisfy docs design baseline checks. | Ivan Boyarkin |