From 06e2e11da84c7c065d1365ea19b42109d29b7e11 Mon Sep 17 00:00:00 2001 From: mahula Date: Sun, 10 Jul 2022 20:23:21 +0200 Subject: [PATCH] add initial e2e test setup utilizing Playwright --- e2e-tests/playwright/Dockerfile | 14 ++++++++ e2e-tests/playwright/README.md | 24 ++++++++++++++ e2e-tests/playwright/tests/global-setup.ts | 8 +++++ .../playwright/tests/gradido_login.spec.ts | 15 +++++++++ .../playwright/tests/models/login_page.ts | 33 +++++++++++++++++++ .../playwright/tests/models/welcome_page.ts | 13 ++++++++ .../playwright/tests/playwright.config.ts | 19 +++++++++++ 7 files changed, 126 insertions(+) create mode 100644 e2e-tests/playwright/Dockerfile create mode 100644 e2e-tests/playwright/README.md create mode 100644 e2e-tests/playwright/tests/global-setup.ts create mode 100644 e2e-tests/playwright/tests/gradido_login.spec.ts create mode 100644 e2e-tests/playwright/tests/models/login_page.ts create mode 100644 e2e-tests/playwright/tests/models/welcome_page.ts create mode 100644 e2e-tests/playwright/tests/playwright.config.ts diff --git a/e2e-tests/playwright/Dockerfile b/e2e-tests/playwright/Dockerfile new file mode 100644 index 000000000..ef8d51984 --- /dev/null +++ b/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 diff --git a/e2e-tests/playwright/README.md b/e2e-tests/playwright/README.md new file mode 100644 index 000000000..7f01b780e --- /dev/null +++ b/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 +``` diff --git a/e2e-tests/playwright/tests/global-setup.ts b/e2e-tests/playwright/tests/global-setup.ts new file mode 100644 index 000000000..6f9dad9c4 --- /dev/null +++ b/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; diff --git a/e2e-tests/playwright/tests/gradido_login.spec.ts b/e2e-tests/playwright/tests/gradido_login.spec.ts new file mode 100644 index 000000000..0853780d1 --- /dev/null +++ b/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'); +}); diff --git a/e2e-tests/playwright/tests/models/login_page.ts b/e2e-tests/playwright/tests/models/login_page.ts new file mode 100644 index 000000000..418adc555 --- /dev/null +++ b/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(); + } +} diff --git a/e2e-tests/playwright/tests/models/welcome_page.ts b/e2e-tests/playwright/tests/models/welcome_page.ts new file mode 100644 index 000000000..81d73a771 --- /dev/null +++ b/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'); + } +} diff --git a/e2e-tests/playwright/tests/playwright.config.ts b/e2e-tests/playwright/tests/playwright.config.ts new file mode 100644 index 000000000..073c34b06 --- /dev/null +++ b/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;