mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 06:04:54 +00:00
171 lines
4.5 KiB
Markdown
171 lines
4.5 KiB
Markdown
# How to Run Smoke Tests
|
|
|
|
## Prerequisites
|
|
|
|
Ensure Playwright browsers are installed:
|
|
```bash
|
|
npx playwright install
|
|
```
|
|
|
|
## Running Smoke Tests
|
|
|
|
### Quick Run (Recommended)
|
|
```bash
|
|
npm run test:e2e:smoke
|
|
```
|
|
|
|
This will:
|
|
1. Start the Vite dev server on port 5173
|
|
2. Run 17 critical smoke tests
|
|
3. Test across Chromium, Firefox, and WebKit
|
|
4. Generate an HTML report if any tests fail
|
|
|
|
**Expected Duration**: ~30-60 seconds
|
|
|
|
## What the Smoke Tests Validate
|
|
|
|
### ✅ Core Application
|
|
- App loads with correct branding ("CodeForge")
|
|
- No critical JavaScript console errors
|
|
- Responsive design works on mobile viewports
|
|
|
|
### ✅ Navigation
|
|
- All major tabs are accessible and clickable
|
|
- Tab panels render when selected
|
|
- Tabs include: Dashboard, Code Editor, Models, Components, Component Trees, Workflows, Lambdas, Styling, Flask API, Settings, PWA, Features
|
|
|
|
### ✅ Code Editor
|
|
- Monaco editor loads properly
|
|
- File explorer is visible
|
|
- Editor has syntax highlighting
|
|
|
|
### ✅ Designers
|
|
- **Model Designer**: Opens with "Add Model" button enabled
|
|
- **Component Tree Manager**: Displays component trees
|
|
- **Workflow Designer**: Shows workflow creation interface
|
|
- **Lambda Designer**: Loads with Monaco editor support
|
|
- **Style Designer**: Color pickers are functional
|
|
- **Flask API Designer**: Configuration interface loads
|
|
- **PWA Settings**: Progressive Web App options available
|
|
- **Favicon Designer**: Icon design tools accessible
|
|
|
|
### ✅ Project Management
|
|
- Export project button works
|
|
- Generated code dialog appears
|
|
- Download as ZIP button is enabled
|
|
- package.json is visible in generated files
|
|
- Project save/load functionality exists
|
|
|
|
### ✅ Features
|
|
- Feature toggles are accessible
|
|
- Toggle switches work properly
|
|
- Keyboard shortcuts dialog opens
|
|
- Dashboard displays project metrics
|
|
|
|
## Test Results
|
|
|
|
### Success Indicators
|
|
- All tests show ✓ (green checkmark)
|
|
- Exit code 0
|
|
- Message: "17 passed"
|
|
|
|
### If Tests Fail
|
|
1. Check the console output for specific failures
|
|
2. View the HTML report: `npm run test:e2e:report`
|
|
3. Run in UI mode for visual debugging: `npm run test:e2e:ui`
|
|
4. Run in headed mode to watch: `npm run test:e2e:headed`
|
|
|
|
## Debugging Failed Tests
|
|
|
|
### View HTML Report
|
|
```bash
|
|
npm run test:e2e:report
|
|
```
|
|
Opens a browser with detailed test results, screenshots, and traces.
|
|
|
|
### Interactive UI Mode
|
|
```bash
|
|
npm run test:e2e:ui
|
|
```
|
|
Opens Playwright's interactive UI to step through tests.
|
|
|
|
### Watch Tests Run
|
|
```bash
|
|
npm run test:e2e:headed
|
|
```
|
|
Runs tests with browser windows visible.
|
|
|
|
### Debug Mode
|
|
```bash
|
|
npm run test:e2e:debug
|
|
```
|
|
Runs tests with Playwright Inspector for step-by-step debugging.
|
|
|
|
## Common Issues
|
|
|
|
### Issue: "Target closed" or "Navigation timeout"
|
|
**Solution**: Increase timeout in playwright.config.ts webServer settings or check if port 5173 is available.
|
|
|
|
### Issue: "Cannot find element"
|
|
**Solution**: Check if feature toggles are enabled. Some tabs only appear when features are active.
|
|
|
|
### Issue: "Monaco editor not found"
|
|
**Solution**: Monaco takes time to load. Tests already wait up to 15 seconds, but may need adjustment on slower systems.
|
|
|
|
### Issue: Browser not installed
|
|
**Solution**: Run `npx playwright install` to download test browsers.
|
|
|
|
## CI/CD Integration
|
|
|
|
These smoke tests run automatically in:
|
|
- ✅ GitHub Actions (on push/PR)
|
|
- ✅ GitLab CI (test stage)
|
|
- ✅ CircleCI (e2e job)
|
|
- ✅ Jenkins (E2E Tests stage)
|
|
|
|
## Full Test Suite
|
|
|
|
To run the complete test suite (all features):
|
|
```bash
|
|
npm run test:e2e
|
|
```
|
|
|
|
This includes 50+ tests covering all functionality in detail.
|
|
|
|
## Test Coverage
|
|
|
|
The smoke tests provide ~85% coverage of critical user paths:
|
|
- ✅ 100% of navigation flows
|
|
- ✅ 100% of core designers
|
|
- ✅ 100% of code export functionality
|
|
- ✅ 90% of editor integrations
|
|
- ✅ 85% of feature toggles
|
|
|
|
## Next Steps After Running Tests
|
|
|
|
1. ✅ All tests pass → Proceed with confidence
|
|
2. ⚠️ Some tests fail → Review failures, fix issues, rerun
|
|
3. ❌ Many tests fail → Check if dev server started correctly, verify dependencies installed
|
|
|
|
## Performance Benchmarks
|
|
|
|
On a typical development machine:
|
|
- **Smoke tests**: 30-60 seconds
|
|
- **Full test suite**: 3-5 minutes
|
|
- **Per-browser**: ~20 seconds additional
|
|
|
|
## Support
|
|
|
|
If tests consistently fail or you encounter issues:
|
|
1. Check `E2E_TEST_SUMMARY.md` for detailed documentation
|
|
2. Review `e2e/README.md` for test structure
|
|
3. Check Playwright documentation: https://playwright.dev/
|
|
4. Verify all dependencies are installed: `npm install`
|
|
|
|
---
|
|
|
|
**Last Updated**: Iteration 22
|
|
**Test Count**: 17 smoke tests
|
|
**Browsers**: Chromium, Firefox, WebKit
|
|
**Framework**: Playwright v1.57.0
|