|
| 1 | +# GraphDone-DevOps Integration Guide |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +This document describes the test data pipeline from GraphDone-Core to GraphDone-DevOps for monitoring, analysis, and alerting. |
| 6 | + |
| 7 | +## Data Collection Architecture |
| 8 | + |
| 9 | +### Test Execution Flow |
| 10 | + |
| 11 | +``` |
| 12 | +GraphDone-Core (test execution) |
| 13 | + ↓ |
| 14 | +test-reports/artifacts-{timestamp}/ |
| 15 | + ↓ |
| 16 | +test-manifest.json (structured metadata) |
| 17 | + ↓ |
| 18 | +GraphDone-DevOps (consumption & analysis) |
| 19 | +``` |
| 20 | + |
| 21 | +## Data Outputs |
| 22 | + |
| 23 | +### 1. Test Manifest (`test-manifest.json`) |
| 24 | + |
| 25 | +**Location**: `test-reports/artifacts-{timestamp}/test-manifest.json` |
| 26 | + |
| 27 | +**Purpose**: Single source of truth for all test run metadata |
| 28 | + |
| 29 | +**Structure**: |
| 30 | +```json |
| 31 | +{ |
| 32 | + "version": "1.0.0", |
| 33 | + "generated": "2025-11-13T22:00:00Z", |
| 34 | + "timestamp": "20251113_220000", |
| 35 | + "git": { |
| 36 | + "branch": "vm_multi-pass", |
| 37 | + "commit": "0bf9cb6...", |
| 38 | + "commitShort": "0bf9cb6", |
| 39 | + "author": "Developer Name", |
| 40 | + "message": "Add test monitoring tools" |
| 41 | + }, |
| 42 | + "summary": { |
| 43 | + "e2e": { |
| 44 | + "passed": 3, |
| 45 | + "failed": 0, |
| 46 | + "duration": "1.1s", |
| 47 | + "status": "passed" |
| 48 | + }, |
| 49 | + "unit": { |
| 50 | + "passed": 5106, |
| 51 | + "failed": 2, |
| 52 | + "duration": "45.2s", |
| 53 | + "status": "failed" |
| 54 | + } |
| 55 | + }, |
| 56 | + "artifacts": { |
| 57 | + "visualRegression": { |
| 58 | + "enabled": true, |
| 59 | + "screenshots": 252, |
| 60 | + "devices": 21, |
| 61 | + "path": "visual-regression" |
| 62 | + }, |
| 63 | + "playwrightReport": { |
| 64 | + "enabled": true, |
| 65 | + "path": "playwright-report" |
| 66 | + }, |
| 67 | + "coverage": { |
| 68 | + "enabled": true, |
| 69 | + "path": "coverage" |
| 70 | + } |
| 71 | + }, |
| 72 | + "logs": { |
| 73 | + "main": "../e2e-report-20251113_220000.md", |
| 74 | + "build": "../build.log", |
| 75 | + "unitTests": "../unit-tests.log", |
| 76 | + "e2eTests": "../e2e-tests.log" |
| 77 | + } |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +### 2. Visual Regression Index (`visual-regression/index.json`) |
| 82 | + |
| 83 | +**Purpose**: Catalog of all captured screenshots for diff analysis |
| 84 | + |
| 85 | +**Structure**: |
| 86 | +```json |
| 87 | +{ |
| 88 | + "generated": "2025-11-13T22:00:00Z", |
| 89 | + "totalScreenshots": 252, |
| 90 | + "devices": [ |
| 91 | + { |
| 92 | + "name": "iPhone-14-Pro-Max", |
| 93 | + "screenshots": 12, |
| 94 | + "path": "iPhone-14-Pro-Max", |
| 95 | + "files": [ |
| 96 | + {"name": "landing-page.png", "size": 125432}, |
| 97 | + {"name": "login.png", "size": 98234} |
| 98 | + ] |
| 99 | + } |
| 100 | + ] |
| 101 | +} |
| 102 | +``` |
| 103 | + |
| 104 | +### 3. Visual Regression Screenshots |
| 105 | + |
| 106 | +**Location**: `test-reports/artifacts-{timestamp}/visual-regression/{device}/` |
| 107 | + |
| 108 | +**Format**: PNG images organized by device |
| 109 | + |
| 110 | +**Devices**: 21 configurations (see VISUAL_REGRESSION_README.md) |
| 111 | + |
| 112 | +**Naming Convention**: `{screen-name}.png` |
| 113 | + |
| 114 | +### 4. Playwright Reports |
| 115 | + |
| 116 | +**Location**: `test-reports/artifacts-{timestamp}/playwright-report/` |
| 117 | + |
| 118 | +**Format**: HTML + JSON data |
| 119 | + |
| 120 | +**Contains**: Test execution traces, screenshots on failure, timing data |
| 121 | + |
| 122 | +### 5. Coverage Reports |
| 123 | + |
| 124 | +**Location**: `test-reports/artifacts-{timestamp}/coverage/` |
| 125 | + |
| 126 | +**Format**: HTML reports + `coverage.json` |
| 127 | + |
| 128 | +**Tools**: Istanbul/c8 coverage data |
| 129 | + |
| 130 | +### 6. Log Files |
| 131 | + |
| 132 | +**Location**: `test-reports/` |
| 133 | + |
| 134 | +**Files**: |
| 135 | +- `e2e-report-{timestamp}.md` - Main markdown report |
| 136 | +- `build.log` - Build output |
| 137 | +- `unit-tests.log` - Vitest output |
| 138 | +- `e2e-tests.log` - Playwright output |
| 139 | +- `visual-regression.log` - Screenshot suite output |
| 140 | +- `lint.log` - ESLint output |
| 141 | +- `typecheck.log` - TypeScript output |
| 142 | + |
| 143 | +## GraphDone-DevOps Integration Points |
| 144 | + |
| 145 | +### 1. Automated Data Ingestion |
| 146 | + |
| 147 | +**Recommended Approach**: GitHub Actions workflow or local cron job |
| 148 | + |
| 149 | +```bash |
| 150 | +#!/bin/bash |
| 151 | +# Example ingestion script for GraphDone-DevOps |
| 152 | + |
| 153 | +CORE_REPO=~/GraphDone-Core |
| 154 | +DEVOPS_REPO=~/GraphDone-DevOps |
| 155 | +LATEST_ARTIFACTS=$(find $CORE_REPO/test-reports -name "artifacts-*" -type d | sort -r | head -1) |
| 156 | + |
| 157 | +if [ -d "$LATEST_ARTIFACTS" ]; then |
| 158 | + TIMESTAMP=$(basename "$LATEST_ARTIFACTS" | sed 's/artifacts-//') |
| 159 | + |
| 160 | + # Copy artifacts to DevOps repo |
| 161 | + mkdir -p "$DEVOPS_REPO/test-data/$TIMESTAMP" |
| 162 | + cp -r "$LATEST_ARTIFACTS"/* "$DEVOPS_REPO/test-data/$TIMESTAMP/" |
| 163 | + |
| 164 | + # Trigger DevOps analysis |
| 165 | + cd "$DEVOPS_REPO" |
| 166 | + ./analyze-test-run.sh "$TIMESTAMP" |
| 167 | +fi |
| 168 | +``` |
| 169 | + |
| 170 | +### 2. Visual Regression Baseline Management |
| 171 | + |
| 172 | +**Baseline Storage**: GraphDone-DevOps should maintain baseline screenshots |
| 173 | + |
| 174 | +**Comparison Workflow**: |
| 175 | +1. Load `visual-regression/index.json` from new test run |
| 176 | +2. Compare against baseline from previous "approved" run |
| 177 | +3. Generate diff images using Pixelmatch or similar |
| 178 | +4. Flag changes exceeding threshold for review |
| 179 | + |
| 180 | +**Tools**: |
| 181 | +- Pixelmatch (https://github.com/mapbox/pixelmatch) |
| 182 | +- Resemble.js (https://github.com/rsmbl/Resemble.js) |
| 183 | +- Percy (https://percy.io) - Commercial option |
| 184 | + |
| 185 | +### 3. Dashboard Integration |
| 186 | + |
| 187 | +**Data Sources**: |
| 188 | +- `test-manifest.json` for summary metrics |
| 189 | +- `visual-regression/index.json` for screenshot catalog |
| 190 | +- `coverage/coverage.json` for coverage trends |
| 191 | +- Playwright JSON reports for test execution details |
| 192 | + |
| 193 | +**Recommended Stack**: |
| 194 | +- Grafana + Prometheus for metrics |
| 195 | +- Custom React dashboard for screenshot comparison |
| 196 | +- Historical trend analysis (test duration, failure rates, coverage) |
| 197 | + |
| 198 | +### 4. Alerting & Notifications |
| 199 | + |
| 200 | +**Alert Conditions**: |
| 201 | +```javascript |
| 202 | +{ |
| 203 | + "testsFailed": summary.e2e.failed > 0 || summary.unit.failed > 0, |
| 204 | + "coverageDropped": currentCoverage < baselineCoverage - 5, |
| 205 | + "visualChanges": visualDiffCount > 10, |
| 206 | + "testDurationIncreased": currentDuration > baselineDuration * 1.5 |
| 207 | +} |
| 208 | +``` |
| 209 | + |
| 210 | +**Notification Channels**: |
| 211 | +- Slack/Discord webhooks |
| 212 | +- Email reports |
| 213 | +- GitHub PR comments |
| 214 | +- Status badges |
| 215 | + |
| 216 | +## Usage Examples |
| 217 | + |
| 218 | +### Generate Test Manifest |
| 219 | + |
| 220 | +```bash |
| 221 | +# After test run completes |
| 222 | +./tools/generate-test-manifest.sh test-reports artifacts-20251113_220000 |
| 223 | + |
| 224 | +# Output: test-reports/artifacts-20251113_220000/test-manifest.json |
| 225 | +``` |
| 226 | + |
| 227 | +### Query Test Results |
| 228 | + |
| 229 | +```bash |
| 230 | +# Get latest test status |
| 231 | +LATEST_MANIFEST=$(find test-reports/artifacts-*/test-manifest.json | sort -r | head -1) |
| 232 | +jq '.summary.e2e.status' "$LATEST_MANIFEST" |
| 233 | +# Output: "passed" |
| 234 | + |
| 235 | +# Get screenshot count |
| 236 | +jq '.artifacts.visualRegression.screenshots' "$LATEST_MANIFEST" |
| 237 | +# Output: 252 |
| 238 | + |
| 239 | +# Get failed tests |
| 240 | +jq '.summary | to_entries | map(select(.value.failed > 0))' "$LATEST_MANIFEST" |
| 241 | +``` |
| 242 | + |
| 243 | +### Compare Test Runs |
| 244 | + |
| 245 | +```bash |
| 246 | +# Compare two test runs |
| 247 | +LATEST=$(find test-reports/artifacts-*/test-manifest.json | sort -r | head -1) |
| 248 | +PREVIOUS=$(find test-reports/artifacts-*/test-manifest.json | sort -r | head -2 | tail -1) |
| 249 | + |
| 250 | +echo "Latest E2E: $(jq -r '.summary.e2e.status' $LATEST)" |
| 251 | +echo "Previous E2E: $(jq -r '.summary.e2e.status' $PREVIOUS)" |
| 252 | + |
| 253 | +# Duration comparison |
| 254 | +jq -s '.[0].summary.e2e.duration, .[1].summary.e2e.duration' "$LATEST" "$PREVIOUS" |
| 255 | +``` |
| 256 | + |
| 257 | +## CI/CD Integration |
| 258 | + |
| 259 | +### GitHub Actions Example |
| 260 | + |
| 261 | +```yaml |
| 262 | +name: Test & Report to DevOps |
| 263 | + |
| 264 | +on: |
| 265 | + push: |
| 266 | + branches: [main, develop] |
| 267 | + pull_request: |
| 268 | + |
| 269 | +jobs: |
| 270 | + test: |
| 271 | + runs-on: ubuntu-latest |
| 272 | + steps: |
| 273 | + - uses: actions/checkout@v3 |
| 274 | + |
| 275 | + - name: Run E2E Tests |
| 276 | + run: ./tools/test-vm-e2e.sh |
| 277 | + |
| 278 | + - name: Generate Manifest |
| 279 | + run: ./tools/generate-test-manifest.sh |
| 280 | + |
| 281 | + - name: Upload Artifacts |
| 282 | + uses: actions/upload-artifact@v3 |
| 283 | + with: |
| 284 | + name: test-artifacts |
| 285 | + path: test-reports/artifacts-* |
| 286 | + |
| 287 | + - name: Notify DevOps Repo |
| 288 | + run: | |
| 289 | + MANIFEST=$(find test-reports/artifacts-*/test-manifest.json | sort -r | head -1) |
| 290 | + curl -X POST ${{ secrets.DEVOPS_WEBHOOK_URL }} \ |
| 291 | + -H "Content-Type: application/json" \ |
| 292 | + -d @"$MANIFEST" |
| 293 | +``` |
| 294 | +
|
| 295 | +## Data Retention |
| 296 | +
|
| 297 | +**Recommendations**: |
| 298 | +- Keep artifacts for last 30 test runs |
| 299 | +- Archive baselines for each release |
| 300 | +- Store compressed screenshots after 7 days |
| 301 | +- Retain manifests and logs for 90 days |
| 302 | +
|
| 303 | +## Security Considerations |
| 304 | +
|
| 305 | +- Sanitize any credentials/secrets from logs |
| 306 | +- Restrict access to test artifacts (may contain sensitive UI) |
| 307 | +- Use secure transfer methods (HTTPS, SSH) |
| 308 | +- Implement authentication for DevOps webhooks |
| 309 | +
|
| 310 | +## Future Enhancements |
| 311 | +
|
| 312 | +- [ ] Real-time streaming of test progress to DevOps |
| 313 | +- [ ] Automatic baseline promotion on successful PR merge |
| 314 | +- [ ] Machine learning for anomaly detection in metrics |
| 315 | +- [ ] Performance profiling data collection |
| 316 | +- [ ] Accessibility test results integration |
| 317 | +- [ ] Security scan results (OWASP ZAP, etc.) |
| 318 | +
|
| 319 | +## Support |
| 320 | +
|
| 321 | +For issues with data format or integration: |
| 322 | +- GraphDone-Core repository: Test execution and data generation |
| 323 | +- GraphDone-DevOps repository: Data consumption and analysis |
0 commit comments