Migrate e2e tests to Playwright

.github/workflows/validate.yaml

@@ -43,7 +43,7 @@ jobs:
         run: 'dotnet tool install --global dotnet-sonarscanner'
       - name: Begin SonarQube Cloud analysis
         if: ${{ env.RUN_SONARQUBE_ANALYSIS == 'true' }}
-        run: 'dotnet-sonarscanner begin /k:"turnierplan-NET_turnierplan.NET" /o:"turnierplan-net" /v:"${{ env.TURNIERPLAN_APPLICATION_VERSION }}" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.vscoveragexml.reportsPaths="coverage.xml" /d:sonar.javascript.lcov.reportPaths="**/lcov.info" /d:sonar.coverage.exclusions="**/*.spec.ts,**/*.cy.js" /d:sonar.exclusions="Turnierplan.App/Client/cypress/**/*,Turnierplan.Dal/Migrations/*"'
+        run: 'dotnet-sonarscanner begin /k:"turnierplan-NET_turnierplan.NET" /o:"turnierplan-net" /v:"${{ env.TURNIERPLAN_APPLICATION_VERSION }}" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.vscoveragexml.reportsPaths="coverage.xml" /d:sonar.javascript.lcov.reportPaths="**/lcov.info" /d:sonar.coverage.exclusions="**/*.spec.ts,**/*.cy.js" /d:sonar.exclusions="Turnierplan.Dal/Migrations/*"'
         working-directory: './src'
       - name: 'Restore .NET solution'
         run: 'dotnet restore'

src/Turnierplan.App/Client/.gitignore

@@ -11,3 +11,7 @@ src/app/generated/*
 
 # Local chrome installation
 chrome
+
+# E2E test results
+playwright-report
+test-results

src/Turnierplan.App/Client/e2e/consts/texts.ts

@@ -0,0 +1,4 @@
+export const texts = {
+  organizationDeletedNotification: 'Ihre Organisation wurde gelöscht.',
+  configureTournamentNotification: 'Die Änderungen am Turnier wurden erfolgreich durchgeführt und gespeichert.'
+};

src/Turnierplan.App/Client/cypress/support/turnierplan.js → src/Turnierplan.App/Client/e2e/consts/turnierplan.ts

@@ -12,6 +12,7 @@ export const turnierplan = {
     logoLink: 'header-logo-link'
   },
   landingPage: {
+    organizationsPageId: 0,
     newOrganizationButton: 'landing-page-new-organization-button'
   },
   loginPage: {
@@ -20,10 +21,11 @@ export const turnierplan = {
     passwordField: 'login-page-password-field'
   },
   pageFrame: {
-    navigationTab: (id) => ['page-frame-navigation-tab', id],
+    navigationTab: (id: number) => `page-frame-navigation-tab-${id}`,
     title: 'page-frame-title'
   },
   viewOrganizationPage: {
+    tournamentsPageId: 0,
     settingsPageId: 3,
     newTournamentButton: 'view-organization-page-new-tournament-button'
   },
@@ -34,7 +36,7 @@ export const turnierplan = {
   configureTournamentPage: {
     addGroupButton: 'configure-tournament-page-add-group-button',
     shuffleGroupsButton: 'configure-tournament-page-shuffle-groups-button',
-    addTeamButton: (alphabeticalId) => ['configure-tournament-page-add-group-button', alphabeticalId],
+    addTeamButton: (alphabeticalId: string) => `configure-tournament-page-add-group-button-${alphabeticalId}`,
     enableFinalsRound: 'configure-tournament-page-enable-finals-round',
     firstFinalsRound: 'configure-tournament-page-first-finals-round',
     submitButton: 'configure-tournament-page-submit-button'
@@ -44,17 +46,19 @@ export const turnierplan = {
     confirmButton: 'add-team-dialog-confirm-button'
   },
   viewTournamentPage: {
+    matchPlanPageId: 0,
     rankingsPageId: 3,
     matchPlan: {
-      matchRow: (index) => ['view-tournament-page-match-plan-match-row', index]
+      matchRow: (index: number) => `view-tournament-page-match-plan-match-row-${index}`
     },
     ranking: {
-      teamName: (position) => ['view-tournament-page-ranking-team-name', position]
+      teamName: (position: number) => `view-tournament-page-ranking-team-name-${position}`
     }
   },
   editMatchDialog: {
     scoreAField: 'edit-match-dialog-score-a-field',
     scoreBField: 'edit-match-dialog-score-b-field',
     saveButton: 'edit-match-dialog-save-button'
-  }
+  },
+  notification: (id: number) => `notification-${id}`
 };

src/Turnierplan.App/Client/e2e/pages/configure-tournament-page.ts

@@ -0,0 +1,25 @@
+import { Page } from '@playwright/test';
+import { turnierplan } from '../consts/turnierplan';
+
+export class ConfigureTournamentPage {
+  constructor(private readonly page: Page) {}
+
+  public async addGroup(): Promise<void> {
+    await this.page.getByTestId(turnierplan.configureTournamentPage.addGroupButton).click();
+  }
+
+  public async addTeam(groupAlphabeticalId: string, teamName: string): Promise<void> {
+    await this.page.getByTestId(turnierplan.configureTournamentPage.addTeamButton(groupAlphabeticalId)).click();
+    await this.page.getByTestId(turnierplan.addTeamDialog.teamNameField).fill(teamName);
+    await this.page.getByTestId(turnierplan.addTeamDialog.confirmButton).click();
+  }
+
+  public async enableFinalsRound(firstFinalsRound: 'SemiFinal'): Promise<void> {
+    await this.page.getByTestId(turnierplan.configureTournamentPage.enableFinalsRound).check();
+    await this.page.getByTestId(turnierplan.configureTournamentPage.firstFinalsRound).selectOption(firstFinalsRound);
+  }
+
+  public async submit(): Promise<void> {
+    await this.page.getByTestId(turnierplan.configureTournamentPage.submitButton).click();
+  }
+}

src/Turnierplan.App/Client/e2e/pages/landing-page.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+import { turnierplan } from 'e2e/consts/turnierplan';
+
+export class LandingPage {
+  constructor(private readonly page: Page) {}
+
+  public async createOrganization(name: string): Promise<void> {
+    await this.page.getByTestId(turnierplan.pageFrame.navigationTab(turnierplan.landingPage.organizationsPageId)).click();
+    await this.page.getByTestId(turnierplan.landingPage.newOrganizationButton).click();
+    await this.page.getByTestId(turnierplan.createOrganizationPage.organizationNameField).fill(name);
+    await this.page.getByTestId(turnierplan.createOrganizationPage.confirmButton).click();
+  }
+}

src/Turnierplan.App/Client/e2e/pages/login-page.ts

@@ -0,0 +1,16 @@
+import { Page } from '@playwright/test';
+import { turnierplan } from 'e2e/consts/turnierplan';
+
+export class LoginPage {
+  constructor(private readonly page: Page) {}
+
+  public async login(): Promise<void> {
+    await this.page.goto('/portal/login');
+
+    await this.page.getByTestId(turnierplan.loginPage.userNameField).fill('admin');
+    await this.page.getByTestId(turnierplan.loginPage.passwordField).fill('P@ssw0rd');
+    await this.page.getByTestId(turnierplan.loginPage.loginButton).click();
+
+    await this.page.waitForURL('/portal');
+  }
+}

src/Turnierplan.App/Client/e2e/pages/view-organization-page.ts

@@ -0,0 +1,20 @@
+import { Page } from '@playwright/test';
+import { turnierplan } from '../consts/turnierplan';
+
+export class ViewOrganizationPage {
+  constructor(private readonly page: Page) {}
+
+  public async createTournament(name: string): Promise<void> {
+    await this.page.getByTestId(turnierplan.pageFrame.navigationTab(turnierplan.viewOrganizationPage.tournamentsPageId)).click();
+    await this.page.getByTestId(turnierplan.viewOrganizationPage.newTournamentButton).click();
+    await this.page.getByTestId(turnierplan.createTournamentPage.tournamentNameField).fill(name);
+    await this.page.getByTestId(turnierplan.createTournamentPage.confirmButton).click();
+  }
+
+  public async deleteOrganization(confirmText: string): Promise<void> {
+    await this.page.getByTestId(turnierplan.pageFrame.navigationTab(turnierplan.viewOrganizationPage.settingsPageId)).click();
+    await this.page.getByTestId(turnierplan.deleteWidget.confirmationField).fill(confirmText);
+    await this.page.getByTestId(turnierplan.deleteWidget.deleteButton).click();
+    await this.page.getByTestId(turnierplan.deleteWidget.confirmDeleteButton).click();
+  }
+}

src/Turnierplan.App/Client/e2e/pages/view-tournament-page.ts

@@ -0,0 +1,22 @@
+import { Locator, Page } from '@playwright/test';
+import { turnierplan } from '../consts/turnierplan';
+
+export class ViewTournamentPage {
+  constructor(private readonly page: Page) {}
+
+  public async navigateTo(page: 'matchPlan' | 'ranking'): Promise<void> {
+    const id = page === 'matchPlan' ? turnierplan.viewTournamentPage.matchPlanPageId : turnierplan.viewTournamentPage.rankingsPageId;
+    await this.page.getByTestId(turnierplan.pageFrame.navigationTab(id)).click();
+  }
+
+  public async reportMatch(index: number, scoreA: number, scoreB: number): Promise<void> {
+    await this.page.getByTestId(turnierplan.viewTournamentPage.matchPlan.matchRow(index)).click();
+    await this.page.getByTestId(turnierplan.editMatchDialog.scoreAField).pressSequentially(`${scoreA}`);
+    await this.page.getByTestId(turnierplan.editMatchDialog.scoreBField).pressSequentially(`${scoreB}`);
+    await this.page.getByTestId(turnierplan.editMatchDialog.saveButton).click();
+  }
+
+  public getRankingTeamNameLocator(position: number): Locator {
+    return this.page.getByTestId(turnierplan.viewTournamentPage.ranking.teamName(position));
+  }
+}