playwright base setup [WIP]

.github/actions/e2e-setup/action.yml

@@ -0,0 +1,21 @@
+name: 🎭 E2E Test Setup
+description: 'Setup Playwright and install browsers for E2E testing'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: 💾 Cache Playwright browsers
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
+
+    - name: 🎭 Install Playwright browsers
+      run: pnpm e2e:install
+      shell: bash
+
+    - name: 📋 Verify Playwright installation
+      run: pnpm exec playwright --version
+      shell: bash

.github/workflows/e2e.yml

@@ -0,0 +1,63 @@
+name: 🎭 Playwright E2E
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+concurrency:
+  group: playwright-e2e-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+env:
+  NODE_ENV: test
+  CI: true
+  E2E_BASE_URL: http://localhost:3000
+
+jobs:
+  e2e:
+    runs-on: ubuntu-24.04
+    container: mcr.microsoft.com/playwright:v1.57.0-noble
+    timeout-minutes: 60
+    steps:
+      - name: 📥 Checkout
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5
+
+      - name: 💨 Cache turbo
+        uses: actions/cache@v4
+        with:
+          path: |
+            .turbo
+          key: ${{ runner.os }}-turbo-${{ hashFiles('pnpm-lock.yaml', 'turbo.json') }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: 💻 Node setup
+        uses: ./.github/actions/node-setup
+
+      - name: 🏗️ Build apps
+        run: pnpm build
+        shell: bash
+
+      - name: 🎭 E2E setup
+        uses: ./.github/actions/e2e-setup
+
+      - name: 🧪 Run E2E (HTML report)
+        run: pnpm e2e
+        env:
+          PWDEBUG: '0'
+        shell: bash
+
+      - name: 📤 Upload Playwright artifacts
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        with:
+          name: playwright-artifacts
+          path: |
+            apps/*-e2e/playwright-report/
+            apps/*-e2e/test-results/
+            apps/*-e2e/reports/
+          if-no-files-found: ignore

apps/frontend-e2e/.gitignore

@@ -0,0 +1,7 @@
+# Playwright artifacts (keep snapshots committed)
+/test-results/
+/playwright-report/
+/reports/
+/playwright/.cache/
+.last-run.json
+/artifacts/

apps/frontend-e2e/.prettierignore

@@ -0,0 +1,10 @@
+# Dependencies
+node_modules/
+
+# Cache
+.turbo/
+
+# Playwright artifacts
+**/test-results/
+**/playwright-report/
+**/reports/

apps/frontend-e2e/.prettierrc.js

@@ -0,0 +1,6 @@
+const baseConfig = require('@infinum/configs/prettier');
+
+/** @type {import('prettier').Config} */
+module.exports = {
+	...baseConfig,
+};

apps/frontend-e2e/README.md

@@ -0,0 +1,7 @@
+# E2E Testing with Playwright
+
+This package contains end-to-end tests for the frontend application using Playwright.
+
+For setup, commands, artifact locations (playwright-report, reports, test-results), and debugging notes, see the central guide:
+
+[`documentation/E2E Testing.md`](../../documentation/E2E%20Testing.md)

apps/frontend-e2e/eslint.config.mjs

@@ -0,0 +1,18 @@
+import baseConfig from '@infinum/configs/eslint/base';
+import playwrightConfig from '@infinum/configs/eslint/playwright';
+import typescriptConfig from '@infinum/configs/eslint/typescript';
+
+export default [
+	...baseConfig,
+	...typescriptConfig,
+	...playwrightConfig,
+	{
+		files: ['**/*.ts', '**/*.tsx'],
+		languageOptions: {
+			parserOptions: {
+				project: './tsconfig.json',
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+];

apps/frontend-e2e/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@infinum/frontend-e2e",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"check-licenses": "node ../../scripts/check-licenses-workspace.js",
+		"clean": "rm -rf node_modules .turbo .eslintcache",
+		"e2e": "playwright test --reporter=html",
+		"e2e:install": "playwright install",
+		"e2e:report": "playwright show-report",
+		"lint": "eslint . --cache",
+		"lint:fix": "eslint . --cache --fix",
+		"prettier:check": "prettier --check .",
+		"prettier:fix": "prettier --write ."
+	},
+	"devDependencies": {
+		"@axe-core/playwright": "catalog:",
+		"@infinum/configs": "workspace:*",
+		"@infinum/e2e-utils": "workspace:*",
+		"@playwright/test": "catalog:",
+		"@types/node": "catalog:",
+		"axe-core": "catalog:",
+		"axe-html-reporter": "catalog:",
+		"eslint": "catalog:",
+		"prettier": "catalog:",
+		"typescript": "catalog:"
+	}
+}

apps/frontend-e2e/pages/login.ts

@@ -0,0 +1,38 @@
+import { Page, Locator } from '@playwright/test';
+import { BasePage } from '@infinum/e2e-utils/pages';
+
+export class LoginPage extends BasePage {
+	readonly emailInput: Locator;
+	readonly passwordInput: Locator;
+	readonly submitButton: Locator;
+	readonly errorMessage: Locator;
+
+	constructor(page: Page) {
+		super(page);
+
+		// Semantic locators
+		this.emailInput = page.getByLabel('Email');
+		this.passwordInput = page.getByLabel('Password');
+		this.submitButton = page.getByRole('button', { name: 'Sign in' });
+		this.errorMessage = page.getByTestId('login-error');
+	}
+
+	async goto() {
+		await this.navigateTo('/en/login');
+		await this.waitForLoad();
+	}
+
+	async login(email: string, password: string) {
+		// Check if form elements are available
+		await this.waitForVisible(this.emailInput);
+		await this.waitForVisible(this.passwordInput);
+		await this.waitForVisible(this.submitButton);
+
+		await this.emailInput.fill(email);
+		await this.passwordInput.fill(password);
+		await this.submitButton.click();
+
+		// Wait for navigation to complete
+		await this.waitForNavigation();
+	}
+}

apps/frontend-e2e/playwright.config.ts

@@ -0,0 +1,26 @@
+import baseConfig from '@infinum/configs/playwright/base';
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	...baseConfig,
+	testDir: './tests',
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				...devices['Desktop Chrome'],
+				baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:3000',
+			},
+		},
+	],
+	webServer: process.env.CI
+		? {
+				command: 'pnpm --filter @infinum/frontend start',
+				port: 3000,
+				reuseExistingServer: !process.env.CI,
+				env: {
+					NODE_OPTIONS: '',
+				},
+			}
+		: undefined,
+});

apps/frontend-e2e/tests/home-axe.e2e.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { createHtmlReport } from 'axe-html-reporter';
+import { a11yRules, saveHtmlReport, attachScreenshot, attachJson, getScreenshotPath } from '@infinum/e2e-utils';
+
+export const urlsToCheck = [
+	{
+		url: '/en',
+		name: 'home-en',
+	},
+];
+
+const reportsDir = 'reports/a11y';
+
+test.describe('Accessibility', () => {
+	urlsToCheck.forEach(({ url, name }) => {
+		test(`should check: ${url}`, async ({ page }, testInfo) => {
+			const currentBrowser = testInfo.project.name;
+			const reportName = `${name}.html`;
+
+			await page.goto(url);
+
+			const accessibilityScanResults = await new AxeBuilder({ page }).withTags(a11yRules).analyze();
+			expect(accessibilityScanResults.violations, 'Expected zero a11y violations').toHaveLength(0);
+
+			const screenshotName = `${currentBrowser}-${name}`;
+			const screenshot = await page.screenshot({
+				path: getScreenshotPath(currentBrowser, name),
+				type: 'png',
+			});
+
+			await attachScreenshot(testInfo, screenshot, screenshotName);
+			await attachJson(testInfo, accessibilityScanResults, 'accessibility-scan-results');
+
+			const axeHtmlReport = createHtmlReport({
+				results: accessibilityScanResults,
+				options: {
+					customSummary: `Browser: ${currentBrowser}`,
+				},
+			});
+
+			saveHtmlReport(axeHtmlReport, currentBrowser, reportName, reportsDir);
+		});
+	});
+});

apps/frontend-e2e/tests/home.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { test as base, expect } from '@playwright/test';
+import { LoginPage } from '../pages/login';
+
+export const test = base.extend<{
+	homePage: { goto: () => Promise<void> };
+}>({
+	homePage: async ({ page }, use) => {
+		const loginPage = new LoginPage(page);
+		await loginPage.goto();
+		await loginPage.login('user@example.com', 'password123');
+
+		await page.waitForURL('/en');
+
+		const homePage = {
+			goto: async () => {
+				await page.goto('/en');
+			},
+		};
+
+		await use(homePage);
+	},
+});
+
+test.describe('Home Page', () => {
+	test('should match home-page-content screenshot', async ({ page, browserName, homePage }) => {
+		await homePage.goto();
+
+		// run `playwright test --update-snapshots` to update the screenshot
+		const screenshotPath = `reports/screenshots/${browserName}-home-en.png`; // Using relative path for snapshot comparison
+
+		const homePageContent = page.getByTestId('home-page-content');
+		await expect(homePageContent).toBeVisible();
+
+		// do a visual regression check with snapshot (allow minor AA/font variance in CI)
+		await expect(homePageContent).toHaveScreenshot(screenshotPath, {
+			maxDiffPixelRatio: 0.015,
+		});
+	});
+});

apps/frontend-e2e/tests/login.e2e.spec.ts

@@ -0,0 +1,33 @@
+import { test as base, expect } from '@playwright/test';
+
+import { LoginPage } from '../pages/login';
+
+export const test = base.extend<{
+	loginPage: LoginPage;
+}>({
+	loginPage: async ({ page }, use) => {
+		const loginPage = new LoginPage(page);
+		await use(loginPage); // pass fixture to tests
+	},
+});
+
+test.describe('LoginForm tests', () => {
+	test('shows error with wrong password', async ({ page, loginPage }) => {
+		await loginPage.goto();
+		await loginPage.login('user@example.com', 'invalid');
+
+		const error = page.getByText('Invalid password');
+		await expect(error).toBeVisible();
+
+		// Optionally, assert the text explicitly
+		await expect(error).toHaveText('Invalid password');
+	});
+
+	test('successfully logs in with correct password', async ({ loginPage, page }) => {
+		await loginPage.goto();
+		await loginPage.login('user@example.com', 'valid');
+
+		await page.waitForURL('/en', { timeout: 2000 });
+		await expect(page.getByText('Logged in')).toBeVisible();
+	});
+});