328 lines
8.2 KiB
Markdown
328 lines
8.2 KiB
Markdown
# Playwright Test Suite - Implementation Checklist ✅
|
||
|
||
## Setup Complete ✅
|
||
|
||
- [x] Installed @playwright/test
|
||
- [x] Installed system browsers (Chromium, Firefox, WebKit)
|
||
- [x] Created playwright.config.ts with 5 browser configs
|
||
- [x] Created tests/playwright/tasks-1-10.spec.ts (125 tests)
|
||
- [x] Added npm test scripts to package.json
|
||
- [x] Generated documentation (4 guides)
|
||
- [x] Tests discoverable and ready to run
|
||
|
||
## Test Coverage ✅
|
||
|
||
### Task 1: Customer Dropdown Positioning
|
||
- [x] Test dropdown visibility
|
||
- [x] Test Opgavetype selector removed
|
||
- [x] Tests: 2 / Browsers: 5 = 10 total
|
||
|
||
### Task 2: Roof Type Visualization
|
||
- [x] Test SVG rendering for valmtag
|
||
- [x] Test visualization updates
|
||
- [x] Tests: 2 / Browsers: 5 = 10 total
|
||
|
||
### Task 3: Search Similar Cases
|
||
- [x] Test API endpoint
|
||
- [x] Test confidence scoring
|
||
- [x] Tests: 2 / Browsers: 5 = 10 total
|
||
|
||
### Task 4: Remove Material/Task Tabs
|
||
- [x] Test single tab display
|
||
- [x] Test combined content visibility
|
||
- [x] Tests: 2 / Browsers: 5 = 10 total
|
||
|
||
### Task 5: Nordjyske Lift Products
|
||
- [x] Test import endpoint
|
||
- [x] Test product retrieval
|
||
- [x] Test pricing accuracy
|
||
- [x] Test SKU identifiers
|
||
- [x] Tests: 4 / Browsers: 5 = 20 total
|
||
|
||
### Task 7: Kran arbejde Smart Package
|
||
- [x] Test package creation
|
||
- [x] Test task count
|
||
- [x] Test crane equipment
|
||
- [x] Tests: 3 / Browsers: 5 = 15 total
|
||
|
||
### Task 8: Byggepladshegn Smart Package
|
||
- [x] Test package creation
|
||
- [x] Test metrisk pricing
|
||
- [x] Test montage tasks
|
||
- [x] Tests: 3 / Browsers: 5 = 15 total
|
||
|
||
### Task 9: Project Duration
|
||
- [x] Test duration in days
|
||
- [x] Test duration in hours
|
||
- [x] Tests: 2 / Browsers: 5 = 10 total
|
||
|
||
### Task 10: Automatic Calculations
|
||
- [x] Test total calculations
|
||
- [x] Test rental cost multiplication
|
||
- [x] Test project with totals
|
||
- [x] Test labor hours to days
|
||
- [x] Tests: 4 / Browsers: 5 = 20 total
|
||
|
||
### Integration Tests
|
||
- [x] Test complete workflow
|
||
- [x] Tests: 1 / Browsers: 5 = 5 total
|
||
|
||
**Total: 125 tests across 5 browsers ✅**
|
||
|
||
---
|
||
|
||
## Documentation ✅
|
||
|
||
- [x] PLAYWRIGHT_QUICKSTART.md (this file)
|
||
- [x] PLAYWRIGHT_TEST_GUIDE.md (overview & structure)
|
||
- [x] PLAYWRIGHT_EXECUTION_GUIDE.md (commands & modes)
|
||
- [x] PLAYWRIGHT_TEST_SUMMARY.md (test inventory)
|
||
|
||
---
|
||
|
||
## Pre-Execution Checklist
|
||
|
||
Before running tests, verify:
|
||
|
||
### Server Status
|
||
- [ ] Backend running: `npm start` in `/backend`
|
||
- Should respond to: `curl http://localhost:3001`
|
||
- [ ] Frontend running: `npm start` in `/frontend`
|
||
- Should respond to: `curl http://localhost:3000`
|
||
|
||
### Database Status
|
||
- [ ] MySQL server running
|
||
- [ ] Database "tilbudgivern" exists
|
||
- [ ] Tables created (customer_projects, ocr_materials, etc.)
|
||
- [ ] Migration applied (project duration fields)
|
||
|
||
### System Resources
|
||
- [ ] At least 4GB RAM available
|
||
- [ ] Disk space available for browser caches
|
||
- [ ] No port conflicts (3000, 3001, 5900+)
|
||
|
||
### Node Environment
|
||
- [ ] Node.js >= 18.0.0: `node --version`
|
||
- [ ] npm >= 9.0.0: `npm --version`
|
||
- [ ] @playwright/test installed: `npm list @playwright/test`
|
||
|
||
---
|
||
|
||
## Quick Start Commands ✅
|
||
|
||
All commands from: `/mnt/HC_Volume_103713257/tilbudgivern/`
|
||
|
||
### Run Modes
|
||
|
||
```bash
|
||
# Interactive UI (Recommended first run)
|
||
npm run test:pw:ui
|
||
|
||
# Full headless suite (all browsers)
|
||
npm run test:pw
|
||
|
||
# With visible browser
|
||
npm run test:pw:headed
|
||
|
||
# Step-through debug
|
||
npm run test:pw:debug
|
||
|
||
# View results
|
||
npm run test:pw:report
|
||
```
|
||
|
||
### Specific Tests
|
||
|
||
```bash
|
||
# Single task
|
||
npx playwright test --grep "Task 1"
|
||
|
||
# Single browser
|
||
npx playwright test --project=chromium
|
||
|
||
# Desktop only
|
||
npx playwright test --project=chromium --project=firefox --project=webkit
|
||
|
||
# Mobile only
|
||
npx playwright test --project='Mobile Chrome' --project='Mobile Safari'
|
||
|
||
# API tests only
|
||
npx playwright test --grep "import|retrieve|calculate"
|
||
```
|
||
|
||
---
|
||
|
||
## Expected Results
|
||
|
||
### Successful Run
|
||
```
|
||
Running 125 tests with 5 browsers
|
||
|
||
✓ [chromium] › tasks-1-10.spec.ts › Task 1 › should display dropdown (2.1s)
|
||
✓ [chromium] › tasks-1-10.spec.ts › Task 1 › should not show selector (1.8s)
|
||
...
|
||
✓ [webkit] › tasks-1-10.spec.ts › Integration › complete workflow (4.5s)
|
||
|
||
125 passed (18m 42s)
|
||
|
||
To open HTML report run:
|
||
npx playwright show-report
|
||
```
|
||
|
||
### Test Report Contents
|
||
- Overall pass/fail statistics
|
||
- Individual test results with timings
|
||
- Screenshots of failures
|
||
- Video recordings of failed tests
|
||
- Error messages and stack traces
|
||
- Browser and device information
|
||
|
||
---
|
||
|
||
## Troubleshooting Guide
|
||
|
||
### Issue: "Error: connect ECONNREFUSED 127.0.0.1:3001"
|
||
**Cause**: Backend not running
|
||
**Solution**: `cd backend && npm start`
|
||
|
||
### Issue: "Error: connect ECONNREFUSED 127.0.0.1:3000"
|
||
**Cause**: Frontend not running
|
||
**Solution**: `cd frontend && npm start`
|
||
|
||
### Issue: "Error: Database error - connection failed"
|
||
**Cause**: MySQL not running or database not created
|
||
**Solution**:
|
||
```bash
|
||
mysql -u root -p -e "CREATE DATABASE tilbudgivern;"
|
||
mysql -u root -p tilbudgivern < schema.sql
|
||
```
|
||
|
||
### Issue: "Tests timeout after 30s"
|
||
**Cause**: Servers slow to respond
|
||
**Solution**: Increase timeout in playwright.config.ts
|
||
|
||
### Issue: "Chromium/Firefox/Safari not found"
|
||
**Cause**: Browsers not installed
|
||
**Solution**: `npx playwright install`
|
||
|
||
### Issue: "ReferenceError: describe is not defined"
|
||
**Cause**: jest files being picked up instead of playwright files
|
||
**Solution**: Already fixed in playwright.config.ts
|
||
|
||
---
|
||
|
||
## Test Execution Timeline
|
||
|
||
| Phase | Duration | Description |
|
||
|-------|----------|-------------|
|
||
| Setup | <1m | Browser initialization |
|
||
| UI Tests | ~5m | Dropdown, tabs, SVG rendering |
|
||
| API Tests | ~8m | Import, retrieval, calculations |
|
||
| Integration | ~3m | Full workflow tests |
|
||
| Reporting | ~2m | Report generation |
|
||
| **Total** | **~18-25m** | **All 125 tests** |
|
||
|
||
---
|
||
|
||
## Performance Tips
|
||
|
||
For faster testing:
|
||
1. Run single browser: `--project=chromium` (~5m)
|
||
2. Run desktop only: (skip mobile) (~10m)
|
||
3. Run specific task: `--grep "Task 5"` (~1m)
|
||
4. Reduce workers: `--workers=2` (slower but uses less RAM)
|
||
|
||
For comprehensive testing:
|
||
1. Run all browsers: `npm run test:pw` (~25m)
|
||
2. Run multiple times to verify consistency
|
||
3. Test on different systems if possible
|
||
|
||
---
|
||
|
||
## CI/CD Integration Ready ✅
|
||
|
||
The test suite is ready for integration with:
|
||
- GitHub Actions
|
||
- GitLab CI
|
||
- Jenkins
|
||
- CircleCI
|
||
- Azure Pipelines
|
||
|
||
Example GitHub Actions:
|
||
```yaml
|
||
- run: npx playwright install
|
||
- run: npm run test:pw
|
||
- uses: actions/upload-artifact@v3
|
||
if: always()
|
||
with:
|
||
name: playwright-report
|
||
path: playwright-report/
|
||
retention-days: 30
|
||
```
|
||
|
||
---
|
||
|
||
## Success Criteria ✅
|
||
|
||
- [x] All 125 tests discovered
|
||
- [x] All 5 browser configs working
|
||
- [x] Test execution possible (just need servers running)
|
||
- [x] Documentation complete
|
||
- [x] npm scripts configured
|
||
- [x] Ready for first run
|
||
|
||
---
|
||
|
||
## Next Steps
|
||
|
||
1. ✅ **Read this file** (current)
|
||
2. 📖 **Review** `PLAYWRIGHT_EXECUTION_GUIDE.md` for detailed commands
|
||
3. 🚀 **Run tests**: `npm run test:pw:ui`
|
||
4. 📊 **Review results**: `npm run test:pw:report`
|
||
5. 🐛 **Fix any failures** before deployment
|
||
6. ✨ **Deploy with confidence**
|
||
|
||
---
|
||
|
||
## File Locations
|
||
|
||
```
|
||
/mnt/HC_Volume_103713257/tilbudgivern/
|
||
├── playwright.config.ts ← Test config
|
||
├── tests/
|
||
│ └── playwright/
|
||
│ └── tasks-1-10.spec.ts ← 125 tests
|
||
├── package.json ← Updated with test scripts
|
||
├── setup-playwright.sh ← Setup script
|
||
├── PLAYWRIGHT_QUICKSTART.md ← This file
|
||
├── PLAYWRIGHT_TEST_GUIDE.md ← Overview
|
||
├── PLAYWRIGHT_EXECUTION_GUIDE.md ← Commands
|
||
├── PLAYWRIGHT_TEST_SUMMARY.md ← Inventory
|
||
└── playwright-report/ ← Results (after running)
|
||
```
|
||
|
||
---
|
||
|
||
## Resources
|
||
|
||
- Playwright Docs: https://playwright.dev
|
||
- Configuration Guide: https://playwright.dev/docs/test-configuration
|
||
- Test Best Practices: https://playwright.dev/docs/test-best-practices
|
||
- Debug Guide: https://playwright.dev/docs/debug
|
||
|
||
---
|
||
|
||
## Support
|
||
|
||
For issues:
|
||
1. Check `PLAYWRIGHT_EXECUTION_GUIDE.md` troubleshooting section
|
||
2. Review test output in `playwright-report/`
|
||
3. Run with debug mode: `npm run test:pw:debug`
|
||
4. Check server logs in backend/frontend terminals
|
||
|
||
---
|
||
|
||
**Status**: Ready to test ✅
|
||
|
||
**Start here**: → `npm run test:pw:ui` 🚀
|