visual-qa

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:

1. Navigate to https://artstroy.net
2. Confirm the homepage loads (HTTP 200, no blank page)
3. Navigate to the new article URL
4. Confirm: title renders, cover image loads, content is visible, no JS console errors
5. Navigate to /sitemap.xml — confirm the new slug appears
6. 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:

1. Navigate to https://artstroy.net
2. Open the search UI
3. Query a distinctive keyword from the new article's title
4. 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:

# Using browser automation tool available on the platform
# Navigate to the article URL
# Resize viewport to 1440×900 (desktop) and 390×844 (mobile)
# Take screenshots at both breakpoints
# Save as: {slug}-desktop-{date}.png, {slug}-mobile-{date}.png

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.