02loveslollipop-15083295623-push-react-app-test-selenium-ci #24
This file contains hidden or 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
| #This workflow test the react app with selenium using python to run the selenium tests | |
| name: React App Test with Selenium | |
| description: This workflow tests the react app with selenium using python to run the selenium tests | |
| run-name: "${{ github.actor }}-${{ github.run_id }}-${{ github.event_name }}-react-app-test-selenium-ci" | |
| # concurrency: | |
| # group: default #limit concurrency to one job at a time (priority to the latest job) | |
| on: | |
| push: | |
| branches: [ main ] | |
| pull_request: | |
| branches: [ main ] | |
| workflow_dispatch: | |
| jobs: | |
| sonarqube: | |
| name: SonarQube | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '18' | |
| cache: 'npm' | |
| cache-dependency-path: react/package-lock.json | |
| - name: Run npm install | |
| run: | | |
| cd react | |
| npm ci | |
| - name: SonarQube Scan | |
| uses: SonarSource/sonarqube-scan-action@v5 | |
| env: | |
| SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} | |
| selenium: | |
| runs-on: ubuntu-latest | |
| needs: sonarqube | |
| env: | |
| APP_URL: 'http://localhost:3000' | |
| DISPLAY: :99 | |
| steps: | |
| - name: Checkout code | |
| uses: actions/checkout@v4 | |
| - name: Setup Chrome and ChromeDriver | |
| uses: nanasess/setup-chromedriver@v2 | |
| - name: Setup Xvfb | |
| run: | | |
| sudo apt-get update | |
| sudo apt-get install -y xvfb | |
| Xvfb :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & | |
| echo "DISPLAY=:99" >> $GITHUB_ENV | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '18' | |
| cache: 'npm' | |
| cache-dependency-path: react/package-lock.json | |
| - name: Install React dependencies | |
| run: | | |
| cd react | |
| npm ci | |
| - name: Build React app | |
| run: | | |
| cd react | |
| npm run build | |
| - name: Start React server | |
| run: | | |
| cd react | |
| npm run preview -- --port 3000 & | |
| # Allow time for the server to start up | |
| sleep 10 | |
| - name: Set up Python | |
| uses: actions/setup-python@v5 | |
| with: | |
| python-version: '3.12' | |
| cache: 'pip' | |
| - name: Install Python dependencies | |
| run: | | |
| # Check if tests directory exists, if not create it | |
| mkdir -p tests | |
| cd tests | |
| python -m pip install --upgrade pip | |
| # Create requirements.txt with necessary packages | |
| echo -e "pytest\nselenium\nwebdriver-manager\npytest-html" > requirements.txt | |
| pip install -r requirements.txt | |
| - name: Run Selenium tests | |
| run: | | |
| # Create screenshots directory if it doesn't exist | |
| mkdir -p tests/screenshots | |
| cd tests | |
| # Add HTML report generation | |
| python -m pytest -v test_home_page.py --html=report.html | |
| env: | |
| APP_URL: 'http://localhost:3000' | |
| PYTHONPATH: ${{ github.workspace }} | |
| - name: Upload test results | |
| if: always() | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: test-results | |
| path: | | |
| tests/screenshots/ | |
| tests/report.html | |
| retention-days: 5 |