add initial e2e test setup utilizing Playwright

e2e-tests/playwright/Dockerfile

@@ -0,0 +1,14 @@
+###############################################################################
+# Dockerfile to create a ready to use Playwright Docker image for end-to-end
+# testing
+###############################################################################
+ARG PLAYWIRGHT_VERSION=1.23.2
+
+FROM mcr.microsoft.com/playwright:v$PLAYWIRGHT_VERSION-focal
+
+WORKDIR /tests
+
+RUN npm install playwright@$PLAYWIRGHT_VERSION
+RUN npm install -D @playwright/test
+
+COPY tests/ /tests

e2e-tests/playwright/README.md

@@ -0,0 +1,24 @@
+# Gradido End-to-End Testing with [Playwright](https://playwright.dev/) (CI-ready via Docker)
+
+
+A sample setup to show-case Playwright (using Typescript) as an end-to-end testing tool for Gradido runniing in a Docker container.
+Here we have a simple UI-based happy path login test running against the DEV system.
+
+## Precondition
+Since dependencies and configurations for Github Actions integration is not set up yet, please run
+
+```bash
+docker-compose up
+```
+
+to boot up the DEV system, before running the test.
+
+## Execute the test
+
+```bash
+# build a Docker image from the Dockerfile
+docker build -t gradido_e2e-tests-playwright .
+
+# run the Docker container and execute the given tests
+docker run -it gradido_e2e-tests-playwright npx playwright test
+```

e2e-tests/playwright/tests/global-setup.ts

@@ -0,0 +1,8 @@
+import { FullConfig } from '@playwright/test';
+
+async function globalSetup(config: FullConfig) {
+  process.env.EMAIL = 'bibi@bloxberg.de';
+  process.env.PASSWORD = 'Aa12345_';
+}
+
+export default globalSetup;

e2e-tests/playwright/tests/gradido_login.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+import { LoginPage } from './models/login_page';
+import { WelcomePage } from './models/welcome_page';
+
+
+test('Gradido login test (happy path)', async ({ page }) => {
+  const { EMAIL, PASSWORD } = process.env;
+  const loginPage = new LoginPage(page);
+  await loginPage.goto();
+  await loginPage.enterEmail(EMAIL);
+  await loginPage.enterPassword(PASSWORD);
+  await loginPage.submitLogin();
+  // assertions
+  await expect(page).toHaveURL('./overview');
+});

e2e-tests/playwright/tests/models/login_page.ts

@@ -0,0 +1,33 @@
+import { expect, test, Locator, Page } from '@playwright/test';
+
+export class LoginPage {
+  readonly page: Page;
+  readonly url: string;
+  readonly emailInput: Locator;
+  readonly passwordInput: Locator;
+  readonly submitBtn: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.url = './login';
+    this.emailInput = page.locator('id=Email-input-field');
+    this.passwordInput = page.locator('id=Passwort-input-field');
+    this.submitBtn = page.locator('text=Anmeldung');
+  }
+
+  async goto() {
+    await this.page.goto(this.url);
+  }
+
+  async enterEmail(email: string) {
+    await this.emailInput.fill(email);
+  }
+
+  async enterPassword(password: string) {
+    await this.passwordInput.fill(password);
+  }
+
+  async submitLogin() {
+    await this.submitBtn.click();
+  }
+}

e2e-tests/playwright/tests/models/welcome_page.ts

@@ -0,0 +1,13 @@
+import { expect, Locator, Page } from '@playwright/test';
+
+export class WelcomePage {
+  readonly page: Page;
+  readonly url: string;
+  readonly profileLink: Locator;
+
+  constructor(page: Page){
+    this.page = page;
+    this.url = './overview';
+    this.profileLink = page.locator('href=/profile');
+  }
+}

e2e-tests/playwright/tests/playwright.config.ts

@@ -0,0 +1,19 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  globalSetup: require.resolve('./global-setup'),
+  ignoreHTTPSErrors: true,
+  locale: 'de-DE',
+  reporter: process.env.CI ? 'github' : 'list',
+  retries: 1,
+  screenshot: 'only-on-failure',
+  testDir: '.',
+  timeout: 30000,
+  trace: 'on-first-retry',
+  video: 'never',
+  viewport: { width: 1280, height: 720 },
+  use: {
+    baseURL: process.env.URL || 'http://localhost:3000',
+  },
+};
+export default config;