Blog Smoke Tests Skill
Run Playwright smoke tests against the Denser blog application.
Features
- 15 smoke tests organized by priority (P0-P4)
- Retry logic - max 3 attempts per failing test
- Headed/headless modes - choose visible or background execution
- Artifact collection - screenshots and trace.zip on failures
- HTML report - comprehensive test results report
- Tracing - Playwright traces for debugging failures
Workflow
Step 1: Ask User Preferences
Before running tests, ask user:
-
Target environment:
-
Browser mode:
- Headed (default) - visible browser, good for debugging
- Headless - faster, for CI/CD
-
Test scope:
- All - run all 15 tests
- P0 - critical tests only (SMOKE-01, 04, 08)
- P1 - important tests (SMOKE-05, 06, 07)
- P2 - tooltip tests (SMOKE-02, 03, 09)
- P3 - navigation tests (SMOKE-10, 11, 12)
- P4 - additional tests (SMOKE-13, 14, 15)
Step 2: Prepare Directories
bash
1# Create temp and report directories
2mkdir -p /storage1/denser/apps/blog/playwright/temp_ai_script_tests
3mkdir -p /storage1/denser/apps/blog/playwright/temp_ai_report_tests
4
5# Copy test scripts
6cp /storage1/denser/.claude/skills/blog-smoke-tests/scripts/smoke-*.mjs /storage1/denser/apps/blog/playwright/temp_ai_script_tests/
Step 3: Run Tests with Retry Logic
For each test:
- Run test script with
REPORT_DIR set
- If FAIL, retry up to 2 more times (max 3 attempts total)
- Wait 2 seconds between retries
- Collect JSON result from output (line starting with
__RESULT__)
- On failure: artifacts saved automatically (screenshot + trace.zip)
Command to run single test:
bash
1cd /storage1/denser/apps/blog
2BASE_URL=https://blog.openhive.network HEADLESS=false REPORT_DIR=./playwright/temp_ai_report_tests pnpm exec node playwright/temp_ai_script_tests/smoke-XX-name.mjs
Replace:
BASE_URL=https://blog.openhive.network with chosen environment URL
HEADLESS=false with HEADLESS=true for headless mode
Parsing JSON result:
Each test outputs a JSON line prefixed with __RESULT__:
__RESULT__{"id":"SMOKE-01","name":"Homepage Posts","priority":"P0","passed":true,"error":null,"artifacts":[]}
Step 4: Generate HTML Report
After running all tests, collect results and generate HTML report:
bash
1# Option 1: Using generate-report.mjs script
2cd /storage1/denser/apps/blog
3pnpm exec node /storage1/denser/.claude/skills/blog-smoke-tests/scripts/generate-report.mjs '[results-json-array]'
Alternatively, create report manually based on collected results.
Report location: ./playwright/temp_ai_report_tests/report.html
Step 5: Cleanup
After all tests complete:
bash
1rm -f /storage1/denser/apps/blog/playwright/temp_ai_script_tests/smoke-*.mjs
Keep report directory with:
report.html - HTML test report
SMOKE-XX-failure.png - screenshots of failures
SMOKE-XX-trace.zip - Playwright traces for failures
Step 6: Summary
Present results:
========================================
SMOKE TEST SUMMARY: X/Y PASSED
========================================
✓ [P0] SMOKE-01: Homepage Posts
✓ [P0] SMOKE-04: Post Navigation
✓ [P0] SMOKE-08: User Profile
✓ [P1] SMOKE-05: Votes API
...
✗ [P3] SMOKE-11: Categories (3 attempts)
...
========================================
HTML Report: ./playwright/temp_ai_report_tests/report.html
Artifacts: ./playwright/temp_ai_report_tests/
To view traces: npx playwright show-trace ./playwright/temp_ai_report_tests/SMOKE-XX-trace.zip
Artifacts on Failure
When a test fails, the following artifacts are saved:
| Artifact | Description | Location |
|---|
| Screenshot | Full page screenshot at failure | SMOKE-XX-failure.png |
| Trace | Playwright trace with snapshots | SMOKE-XX-trace.zip |
Viewing Traces:
bash
1cd /storage1/denser/apps/blog
2npx playwright show-trace ./playwright/temp_ai_report_tests/SMOKE-04-trace.zip
Test Catalog
| Priority | ID | Name | Script |
|---|
| P0 | SMOKE-01 | Homepage Posts | smoke-01-homepage-posts.mjs |
| P0 | SMOKE-04 | Post Navigation | smoke-04-post-navigation.mjs |
| P0 | SMOKE-08 | User Profile | smoke-08-profile.mjs |
| P1 | SMOKE-05 | Votes API | smoke-05-votes-api.mjs |
| P1 | SMOKE-06 | Comments | smoke-06-comments.mjs |
| P1 | SMOKE-07 | Payout | smoke-07-payout.mjs |
| P2 | SMOKE-02 | Votes Tooltip | smoke-02-votes-tooltip.mjs |
| P2 | SMOKE-03 | Payout Tooltip | smoke-03-payout-tooltip.mjs |
| P2 | SMOKE-09 | Followers | smoke-09-followers.mjs |
| P3 | SMOKE-10 | Tags | smoke-10-tags.mjs |
| P3 | SMOKE-11 | Categories | smoke-11-categories.mjs |
| P3 | SMOKE-12 | Communities | smoke-12-communities.mjs |
| P4 | SMOKE-13 | Static Pages | smoke-13-static-pages.mjs |
| P4 | SMOKE-14 | Theme Toggle | smoke-14-theme.mjs |
| P4 | SMOKE-15 | Login Button | smoke-15-login.mjs |
Retry Logic Pattern
javascript
1const MAX_RETRIES = 3;
2const results = [];
3
4for (const test of tests) {
5 let passed = false;
6 let attempts = 0;
7 let lastError = null;
8 let artifacts = [];
9
10 for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
11 attempts = attempt;
12 const output = await runTest(test);
13
14 // Parse __RESULT__ from output
15 const resultLine = output.match(/__RESULT__(.+)/);
16 if (resultLine) {
17 const result = JSON.parse(resultLine[1]);
18 passed = result.passed;
19 lastError = result.error;
20 artifacts = result.artifacts;
21 }
22
23 if (passed) break;
24
25 if (attempt < MAX_RETRIES) {
26 console.log(`Retry ${attempt + 1}/${MAX_RETRIES} in 2 seconds...`);
27 await sleep(2000);
28 }
29 }
30
31 results.push({
32 id: test.id,
33 name: test.name,
34 priority: test.priority,
35 passed,
36 attempts,
37 error: lastError,
38 artifacts
39 });
40}
Environment Variables
| Variable | Description | Default |
|---|
BASE_URL | Target environment URL | https://blog.openhive.network |
HEADLESS | Run browser in headless mode | false (headed) |
REPORT_DIR | Directory for artifacts and report | ./playwright/temp_ai_report_tests |
Available Environments
| Environment | URL |
|---|
| Production | https://blog.openhive.network |
| Dev | https://blog.dev.openhive.network |
| Localhost | http://localhost:3000 |
Reference Documentation
- Test patterns and selectors: See references/test-selectors.md
- Full documentation:
/storage1/denser/docs/playwright-testing-notes.md
- Blog architecture:
/storage1/denser/docs/denser-blog-architecture.md
Directories