Visual testing scenarios #12
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Visual Tests | |
| on: | |
| push: | |
| branches: [main] | |
| pull_request: | |
| branches: [main] | |
| jobs: | |
| visual-tests: | |
| timeout-minutes: 60 | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: "18" | |
| cache: "npm" | |
| - name: Install dependencies | |
| run: npm ci | |
| - name: Install Playwright browsers | |
| run: npx playwright install --with-deps | |
| - name: Build the app | |
| run: npm run build | |
| - name: Check for existing snapshots | |
| id: check-snapshots | |
| run: | | |
| if [ ! -d "src/e2e/visual.spec.ts-snapshots" ]; then | |
| echo "::set-output name=has_snapshots::false" | |
| else | |
| echo "::set-output name=has_snapshots::true" | |
| fi | |
| - name: Start the app and run tests | |
| run: | | |
| # Kill any process using port 4173 | |
| lsof -t -i:4173 | xargs -r kill -9 || true | |
| # Start the preview server in background with host flag | |
| VITE_PORT=4173 npm run preview -- --host & | |
| SERVER_PID=$! | |
| # Add a small delay to let the server initialize | |
| sleep 5 | |
| # Print server status for debugging | |
| echo "Server process status:" | |
| ps aux | grep preview | |
| echo "Port 4173 status:" | |
| netstat -tulpn | grep 4173 || true | |
| # Wait for the server to be ready | |
| npx wait-on -v -t 60000 http://localhost:4173 | |
| if [ "${{ steps.check-snapshots.outputs.has_snapshots }}" = "false" ]; then | |
| # Generate snapshots if they don't exist | |
| echo "Generating initial snapshots..." | |
| npx playwright test --update-snapshots | |
| else | |
| # Run normal tests if snapshots exist | |
| echo "Running tests against existing snapshots..." | |
| npx playwright test | |
| fi | |
| # Store the test exit code | |
| TEST_EXIT_CODE=$? | |
| # Kill the server | |
| kill $SERVER_PID || true | |
| # Exit with the test exit code | |
| exit $TEST_EXIT_CODE | |
| env: | |
| CI: true | |
| - name: Upload test results | |
| if: always() | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: playwright-report | |
| path: playwright-report/ | |
| retention-days: 30 | |
| - name: Upload snapshot diffs | |
| if: failure() | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: snapshot-diffs | |
| path: test-results/ | |
| retention-days: 30 | |
| - name: Upload new snapshots | |
| if: steps.check-snapshots.outputs.has_snapshots == 'false' | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: new-snapshots | |
| path: src/e2e/visual.spec.ts-snapshots/ | |
| retention-days: 30 |