Add Playwright E2E tests with CI integration

.github/workflows/pull-request.yml

@@ -25,3 +25,35 @@ jobs:
       run: npm run build:cli
     - name: Run linters & tests
       run: npm test --if-present --workspaces
+    - name: Get Playwright version
+      id: playwright-version
+      run: echo "version=$(npm list @playwright/test --depth=0 --json | jq -r '.dependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      id: playwright-cache
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
+    - name: Install Playwright Browsers
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: npx playwright install --with-deps chromium
+    - name: Install Playwright system dependencies
+      if: steps.playwright-cache.outputs.cache-hit == 'true'
+      run: npx playwright install-deps chromium
+    - name: Run Playwright tests
+      run: npm test
+    - name: Upload Playwright Report
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+    - name: Upload Test Results
+      uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: test-results
+        path: test-results/
+        retention-days: 30
+

.gitignore

@@ -6,3 +6,8 @@ TODO
 *.env
 
 .vscode/ltex*
+
+# Playwright
+playwright-report/
+test-results/
+

package.json

@@ -6,7 +6,10 @@
     "build:website": "npm run build --workspace=website",
     "build:cli": "npm run build --workspace=@moaw/cli",
     "create:db": "npm run create:db --workspace=database",
-    "format": "npm run format --workspaces --if-present"
+    "format": "npm run format --workspaces --if-present",
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:ui": "playwright test --ui"
   },
   "repository": {
     "type": "git",
@@ -24,5 +27,9 @@
   "homepage": "https://github.com/microsoft/moaw#readme",
   "workspaces": [
     "packages/*"
-  ]
-}
+  ],
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "playwright": "^1.57.0"
+  }
+}

playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html', { outputFolder: 'playwright-report' }],
+    ['json', { outputFile: 'test-results/results.json' }],
+    ['list']
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:4200',
+    /* Collect trace on first retry to reduce overhead on successful runs */
+    trace: 'on-first-retry',
+    /* Take screenshot on failure */
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // Uncomment to test on other browsers
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm start',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

tests/homepage.spec.ts

@@ -0,0 +1,88 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Homepage and Workshop List', () => {
+  test('homepage should load successfully', async ({ page }) => {
+    // Navigate to the homepage
+    await page.goto('/');
+
+    // Wait for the page to be fully loaded
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page title is present
+    await expect(page).toHaveTitle(/MOAW/);
+
+    // Check that the main heading is visible (from home component)
+    const heading = page.locator('h1');
+    await expect(heading).toBeVisible();
+    await expect(heading).toContainText('Hands-on tutorials');
+  });
+
+  test('should display workshop catalog', async ({ page }) => {
+    // Navigate to the catalog page
+    await page.goto('/catalog/');
+
+    // Wait for the page to be fully loaded
+    await page.waitForLoadState('networkidle');
+
+    // Check for workshop cards or search input
+    const searchInput = page.locator('input[type="search"]');
+    await expect(searchInput).toBeVisible();
+  });
+
+  test('should be able to search/filter workshops', async ({ page }) => {
+    // Navigate to the catalog page
+    await page.goto('/catalog/');
+
+    // Wait for the page to be fully loaded
+    await page.waitForLoadState('networkidle');
+
+    // Look for search input
+    const searchInput = page.locator('input[type="search"]');
+    await expect(searchInput).toBeVisible();
+
+    // Test search functionality
+    await searchInput.fill('azure');
+    await page.waitForTimeout(500); // Wait for search to filter
+
+    // Verify search input has the value
+    await expect(searchInput).toHaveValue('azure');
+  });
+
+  test('should navigate to workshop list/catalog', async ({ page }) => {
+    // Navigate to the homepage
+    await page.goto('/');
+
+    // Wait for the page to be fully loaded
+    await page.waitForLoadState('networkidle');
+
+    // Check if there's a link to browse all workshops or catalog
+    const catalogLink = page.locator('a[href*="catalog"]').first();
+    await expect(catalogLink).toBeVisible();
+
+    await catalogLink.click();
+
+    // Wait for navigation
+    await page.waitForLoadState('networkidle');
+
+    // Verify we're on the catalog page
+    expect(page.url()).toContain('catalog');
+  });
+
+  test('should display workshop cards or list items', async ({ page }) => {
+    // Navigate to the catalog page
+    await page.goto('/catalog/');
+
+    // Wait for the page to be fully loaded
+    await page.waitForLoadState('networkidle');
+
+    // Wait a bit for workshops to load
+    await page.waitForTimeout(1000);
+
+    // Check for workshop cards - based on catalog component structure
+    const workshopCards = page.locator('app-card');
+
+    // There should be at least some workshop cards
+    const count = await workshopCards.count();
+    expect(count).toBeGreaterThan(0);
+  });
+});