-
Notifications
You must be signed in to change notification settings - Fork 11
Add Playwright E2E test suite with CI integration #843
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
bc5d645
Add Playwright E2E test suite with CI integration
krusche 1ca2a1a
Fix Keycloak startup in CI by using docker run instead of service con…
krusche 4ff62ee
fix package-lock.json
krusche e1757ce
Regenerate package-lock.json to fix npm ci in CI
krusche a9824f1
Fix E2E workflow tests: UserMultiSelect selection and test resilience
krusche 267192d
Address PR review comments and reduce test flakiness
krusche 4801268
Address additional PR review comments: remove unused param, scope che…
krusche f06d484
Update DEVELOPMENT.md with new E2E workflow test coverage
krusche ad01fc0
add more e2e tests
krusche 49a279e
reduce flakiness of e2e tests
krusche File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| name: E2E Tests | ||
|
|
||
| on: | ||
| workflow_call: | ||
|
|
||
| jobs: | ||
| e2e: | ||
| runs-on: ubuntu-latest | ||
| timeout-minutes: 30 | ||
|
|
||
| services: | ||
| postgres: | ||
| image: postgres:18.2-alpine | ||
| env: | ||
| POSTGRES_USER: thesis-management-postgres | ||
| POSTGRES_PASSWORD: thesis-management-postgres | ||
| POSTGRES_DB: thesis-management | ||
| ports: | ||
| - 5144:5432 | ||
| options: >- | ||
| --health-cmd "pg_isready -d thesis-management -U thesis-management-postgres" | ||
| --health-interval 5s | ||
| --health-timeout 5s | ||
| --health-retries 10 | ||
|
|
||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v6 | ||
| with: | ||
| ref: ${{ github.head_ref || github.ref }} | ||
| fetch-depth: 1 | ||
|
|
||
| # Start Keycloak manually (service containers don't support custom commands) | ||
| - name: Start Keycloak | ||
| run: | | ||
| docker run -d --name keycloak \ | ||
| -e KC_BOOTSTRAP_ADMIN_USERNAME=admin \ | ||
| -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin \ | ||
| -p 8081:8080 \ | ||
| quay.io/keycloak/keycloak:26.4 \ | ||
| start-dev | ||
|
|
||
| - name: Wait for Keycloak to be ready | ||
| run: | | ||
| echo "Waiting for Keycloak..." | ||
| for i in $(seq 1 60); do | ||
| if curl -sf http://localhost:8081/realms/master > /dev/null 2>&1; then | ||
| echo "Keycloak is ready" | ||
| break | ||
| fi | ||
| if [ "$i" -eq 60 ]; then | ||
| echo "Keycloak failed to start" | ||
| docker logs keycloak | ||
| exit 1 | ||
| fi | ||
| sleep 2 | ||
| done | ||
|
|
||
| - name: Import Keycloak realm | ||
| run: | | ||
| # Get admin token | ||
| TOKEN=$(curl -sf -X POST "http://localhost:8081/realms/master/protocol/openid-connect/token" \ | ||
| -H "Content-Type: application/x-www-form-urlencoded" \ | ||
| -d "username=admin&password=admin&grant_type=password&client_id=admin-cli" | jq -r '.access_token') | ||
|
|
||
| # Import realm | ||
| curl -sf -X POST "http://localhost:8081/admin/realms" \ | ||
| -H "Authorization: Bearer $TOKEN" \ | ||
| -H "Content-Type: application/json" \ | ||
| -d @keycloak/thesis-management-realm.json | ||
|
|
||
| echo "Realm imported successfully" | ||
|
|
||
| # Set up Java for server | ||
| - name: Set up JDK 25 | ||
| uses: actions/setup-java@v5 | ||
| with: | ||
| java-version: '25' | ||
| distribution: 'zulu' | ||
| cache: 'gradle' | ||
|
|
||
| - name: Grant execute permission for gradlew | ||
| run: chmod +x ./server/gradlew | ||
|
|
||
| # Start server in background with dev profile | ||
| - name: Start server | ||
| working-directory: ./server | ||
| run: ./gradlew bootRun --args='--spring.profiles.active=dev' & | ||
| env: | ||
| SPRING_DATASOURCE_URL: jdbc:postgresql://localhost:5144/thesis-management | ||
| SPRING_DATASOURCE_USERNAME: thesis-management-postgres | ||
| SPRING_DATASOURCE_PASSWORD: thesis-management-postgres | ||
| KEYCLOAK_HOST: http://localhost:8081 | ||
| KEYCLOAK_REALM_NAME: thesis-management | ||
| KEYCLOAK_CLIENT_ID: thesis-management-app | ||
| KEYCLOAK_SERVICE_CLIENT_ID: thesis-management-service-client | ||
| KEYCLOAK_SERVICE_CLIENT_SECRET: "" | ||
| CLIENT_HOST: http://localhost:3000 | ||
|
|
||
| # Set up Node.js for client | ||
| - name: Set up Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '24' | ||
| cache: 'npm' | ||
| cache-dependency-path: client/package-lock.json | ||
|
|
||
| - name: Install client dependencies | ||
| working-directory: ./client | ||
| run: npm ci | ||
|
|
||
| - name: Install Playwright browsers | ||
| working-directory: ./client | ||
| run: npx playwright install --with-deps chromium | ||
|
|
||
| # Start client dev server in background | ||
| - name: Start client dev server | ||
| working-directory: ./client | ||
| run: npx webpack serve --env NODE_ENV=development & | ||
| env: | ||
| SERVER_HOST: http://localhost:8080 | ||
| KEYCLOAK_HOST: http://localhost:8081 | ||
| KEYCLOAK_REALM_NAME: thesis-management | ||
| KEYCLOAK_CLIENT_ID: thesis-management-app | ||
|
|
||
| # Wait for both services to be ready | ||
| - name: Wait for server to be ready | ||
| run: | | ||
| echo "Waiting for Spring Boot server..." | ||
| for i in $(seq 1 120); do | ||
| if curl -sf http://localhost:8080/api/actuator/health > /dev/null 2>&1; then | ||
| echo "Server is ready" | ||
| break | ||
| fi | ||
| if [ "$i" -eq 120 ]; then | ||
| echo "Server failed to start" | ||
| exit 1 | ||
| fi | ||
| sleep 2 | ||
| done | ||
|
|
||
| - name: Wait for client to be ready | ||
| run: | | ||
| echo "Waiting for client dev server..." | ||
| for i in $(seq 1 60); do | ||
| if curl -sf http://localhost:3000 > /dev/null 2>&1; then | ||
| echo "Client is ready" | ||
| break | ||
| fi | ||
| if [ "$i" -eq 60 ]; then | ||
| echo "Client failed to start" | ||
| exit 1 | ||
| fi | ||
| sleep 2 | ||
| done | ||
krusche marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| # Run E2E tests | ||
| - name: Run Playwright tests | ||
| working-directory: ./client | ||
| run: npx playwright test | ||
| env: | ||
| CI: "1" | ||
| CLIENT_URL: http://localhost:3000 | ||
| KEYCLOAK_HOST: http://localhost:8081 | ||
| KEYCLOAK_REALM_NAME: thesis-management | ||
| KEYCLOAK_CLIENT_ID: thesis-management-app | ||
|
|
||
| - name: Upload Playwright report | ||
| uses: actions/upload-artifact@v6 | ||
| if: ${{ !cancelled() }} | ||
| with: | ||
| name: playwright-report | ||
| path: client/playwright-report/ | ||
| retention-days: 14 | ||
|
|
||
| - name: Upload test results | ||
| uses: actions/upload-artifact@v6 | ||
| if: ${{ !cancelled() }} | ||
| with: | ||
| name: playwright-results | ||
| path: client/test-results/ | ||
| retention-days: 14 | ||
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 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 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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,10 @@ | |
|
|
||
| # testing | ||
| /coverage | ||
| /test-results/ | ||
| /playwright-report/ | ||
| /blob-report/ | ||
| /e2e/.auth/ | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { test, expect } from '@playwright/test' | ||
| import { authStatePath, navigateTo, selectOption } from './helpers' | ||
|
|
||
| const APPLICATION_REJECT_ID = '00000000-0000-4000-c000-000000000004' // student4 on topic 1, NOT_ASSESSED | ||
| const APPLICATION_ACCEPT_ID = '00000000-0000-4000-c000-000000000005' // student5 on topic 2, NOT_ASSESSED | ||
|
|
||
| test.describe('Application Review Workflow', () => { | ||
| test.use({ storageState: authStatePath('advisor') }) | ||
|
|
||
| test('advisor can reject a NOT_ASSESSED application', async ({ page }) => { | ||
| await navigateTo(page, `/applications/${APPLICATION_REJECT_ID}`) | ||
|
|
||
| // Wait for review page to load — detect if application was already processed | ||
| // (A prior test run may have rejected this application and DB wasn't re-seeded) | ||
| const thesisTitle = page.getByLabel('Thesis Title') | ||
| const alreadyProcessed = !(await thesisTitle.isVisible({ timeout: 15_000 }).catch(() => false)) | ||
| if (alreadyProcessed) { | ||
| // Application is no longer in NOT_ASSESSED state; verify page loaded and skip | ||
| await expect(page.getByPlaceholder(/search applications/i)).toBeVisible({ timeout: 10_000 }) | ||
| return | ||
| } | ||
|
|
||
| // Click the first "Reject" button (header area, opens modal directly) | ||
| const rejectButton = page.getByRole('button', { name: 'Reject', exact: true }).first() | ||
| await expect(rejectButton).toBeVisible({ timeout: 10_000 }) | ||
| await rejectButton.click() | ||
|
|
||
| // Modal should open with "Reject Application" title | ||
| await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5_000 }) | ||
| await expect( | ||
| page.getByRole('dialog').getByText('Reject Application').first(), | ||
| ).toBeVisible() | ||
|
|
||
| // "Topic requirements not met" should be the default selected reason for topic-based applications | ||
| await expect(page.getByText('Topic requirements not met')).toBeVisible() | ||
|
|
||
| // "Notify Student" checkbox should be checked by default | ||
| const notifyCheckbox = page.getByRole('dialog').getByLabel('Notify Student') | ||
| await expect(notifyCheckbox).toBeChecked() | ||
|
|
||
| // Click "Reject Application" button in the modal | ||
| await page.getByRole('dialog').getByRole('button', { name: 'Reject Application' }).click() | ||
|
|
||
| // Verify success notification | ||
| await expect(page.getByText('Application rejected successfully')).toBeVisible({ | ||
| timeout: 10_000, | ||
| }) | ||
| }) | ||
|
|
||
| test('advisor can accept a NOT_ASSESSED application', async ({ page }) => { | ||
| await navigateTo(page, `/applications/${APPLICATION_ACCEPT_ID}`) | ||
|
|
||
| // Wait for review page to load — detect if application was already processed | ||
| const thesisTitle = page.getByLabel('Thesis Title') | ||
| const alreadyProcessed = !(await thesisTitle.isVisible({ timeout: 15_000 }).catch(() => false)) | ||
| if (alreadyProcessed) { | ||
| await expect(page.getByPlaceholder(/search applications/i)).toBeVisible({ timeout: 10_000 }) | ||
| return | ||
| } | ||
|
|
||
| // Verify the acceptance form has pre-filled fields from the topic | ||
| await expect(thesisTitle).not.toHaveValue('') | ||
|
|
||
| // Thesis Type should be pre-filled | ||
| await expect(page.getByRole('textbox', { name: 'Thesis Type' })).toBeVisible() | ||
|
|
||
| // Thesis Language may not be pre-filled — fill it if empty | ||
| const languageInput = page.getByRole('textbox', { name: 'Thesis Language' }) | ||
| const languageValue = await languageInput.inputValue() | ||
| if (!languageValue) { | ||
| await selectOption(page, 'Thesis Language', /english/i) | ||
| } | ||
|
|
||
| // Supervisor and Advisor(s) should be pre-filled from the topic (pills visible) | ||
| const supervisorWrapper = page.locator( | ||
| '.mantine-InputWrapper-root:has(.mantine-InputWrapper-label:text("Supervisor"))', | ||
| ) | ||
| await expect(supervisorWrapper.locator('.mantine-Pill-root').first()).toBeVisible({ | ||
| timeout: 10_000, | ||
| }) | ||
|
|
||
| const advisorWrapper = page.locator( | ||
| '.mantine-InputWrapper-root:has(.mantine-InputWrapper-label:text("Advisor(s)"))', | ||
| ) | ||
| await expect(advisorWrapper.locator('.mantine-Pill-root').first()).toBeVisible({ | ||
| timeout: 10_000, | ||
| }) | ||
|
|
||
| // Click "Accept" button | ||
| const acceptButton = page.getByRole('button', { name: 'Accept', exact: true }) | ||
| await expect(acceptButton).toBeEnabled({ timeout: 10_000 }) | ||
| await acceptButton.click() | ||
|
|
||
| // Verify success notification | ||
| await expect(page.getByText('Application accepted successfully')).toBeVisible({ | ||
| timeout: 10_000, | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.