| name | visual-qa |
| description | Browser-based visual and functional QA for artstroy.net. Use when performing post-deploy smoke tests, screenshot comparisons, Lighthouse audits, Pagefind search verification, and broken link checks. |
Visual QA for ArtStroy
Browser-based testing and visual verification for artstroy.net. Used after every deploy as part of the post-merge quality gate.
Core Tasks
1. Post-Deploy Smoke Test
After each deploy, verify the site is live and the new article is accessible:
- Navigate to
https://artstroy.net
- Confirm the homepage loads (HTTP 200, no blank page)
- Navigate to the new article URL
- Confirm: title renders, cover image loads, content is visible, no JS console errors
- Navigate to
/sitemap.xml — confirm the new slug appears
- Navigate to
/rss.xml (or /feed.xml) — confirm the new article is in the feed
Report: PASS or FAIL with specific URL and symptom.
2. Lighthouse Audit
Run Lighthouse against the new article page and the homepage. Thresholds:
| Category | Minimum |
|---|
| Performance | ≥ 90 |
| Accessibility | ≥ 95 |
| Best Practices | ≥ 90 |
| SEO | ≥ 95 |
If any score falls below threshold, create a qa-regression comment on the current issue with the specific failing audit items. Do not proceed to Distribution Manager sign-off until Performance and SEO are above threshold.
Running Lighthouse:
npx lighthouse https://artstroy.net/{slug} \
--output=json \
--output-path=./lighthouse-report.json \
--only-categories=performance,accessibility,best-practices,seo \
--chrome-flags="--headless"
Parse the JSON for categories.*.score values.
3. Pagefind Search Verification
Verify the new article is indexed and appears in search results:
- Navigate to
https://artstroy.net
- Open the search UI
- Query a distinctive keyword from the new article's title
- Confirm the article appears in the top 3 results
If the article does not appear, check whether the deploy included a fresh Pagefind index build (bun run build outputs the index to dist/_pagefind/).
4. Screenshot Comparison
Take a screenshot of the article page for visual regression reference:
Compare against previous screenshots if available. Flag any regression where layout shifts >0.5% of screen area at either breakpoint.
5. Broken Link Check
Crawl the new article page for broken internal and external links:
npx broken-link-checker https://artstroy.net/{slug} \
--recursive \
--exclude "mailto:" \
--exclude "javascript:"
Any HTTP 4xx or 5xx response on a link is a FAIL. Create a broken-link issue with the specific anchor text and target URL.
Browser Automation Reference
Use whatever browser automation tool the platform provides (playwright-cli, Playwright scripts, Puppeteer, etc.). Core operations needed:
| Need | Action |
|---|
| Navigate to URL | goto <url> |
| Take screenshot | screenshot --filename=<name>.png |
| Read page snapshot (DOM refs) | snapshot |
| Click element | click <ref> |
| Read console errors | console |
| Read network requests | network |
| Set viewport size | resize <width> <height> |
QA Gate Signal
After completing all checks, post a structured comment to the current issue:
## QA Gate — {slug}
| Check | Result |
|---|---|
| Homepage loads | ✅ / ❌ |
| Article page loads | ✅ / ❌ |
| Sitemap contains slug | ✅ / ❌ |
| RSS feed contains article | ✅ / ❌ |
| Lighthouse Performance | {score} (≥90 ✅ / ❌) |
| Lighthouse Accessibility | {score} (≥95 ✅ / ❌) |
| Lighthouse SEO | {score} (≥95 ✅ / ❌) |
| Pagefind search | ✅ / ❌ |
| Broken links | ✅ none / ❌ {count} found |
| Screenshot comparison | ✅ no regression / ❌ regression |
**Gate: PASSED ✅ / FAILED ❌**
PASSED signals to CTO (and transitively to EIC) that Distribution Manager may proceed with syndication.
FAILED blocks syndication until issues are resolved.
