Add playwright simple nav. test that passes

.github/workflows/ci-cd.yml

@@ -1,87 +1,87 @@
-# name: CI
-# on: push
+name: CI
+on: push
 
-# jobs:
-#   ci:
-#     name: Jest Unit Tests, Type Checking, Linting, Playwright End to End Tests
-#     runs-on: ubuntu-latest # or macos-latest, windows-latest
-#     timeout-minutes: 30
-#     # TODO: Update environment variables with your own database credentials
-#     env:
-#       PGHOST: localhost
-#       PGDATABASE: next_js_example_spring_2024
-#       PGUSERNAME: next_js_example_spring_2024
-#       PGPASSWORD: next_js_example_spring_2024
-#     steps:
-#       - name: Start preinstalled PostgreSQL on Ubuntu
-#         run: |
-#           sudo systemctl start postgresql.service
-#           pg_isready
-#       - name: Create database user
-#         run: |
-#           sudo -u postgres psql --command="CREATE USER $PGUSERNAME PASSWORD '$PGPASSWORD'" --command="\du"
-#       - name: Create database and allow user
-#         run: |
-#           sudo -u postgres createdb --owner=$PGUSERNAME $PGDATABASE
-#       - uses: actions/checkout@v4
-#       - uses: pnpm/action-setup@v4
+jobs:
+  ci:
+    name: Jest Unit Tests, Type Checking, Linting, Playwright End to End Tests
+    runs-on: ubuntu-latest # or macos-latest, windows-latest
+    timeout-minutes: 30
+    # TODO: Update environment variables with your own database credentials
+    env:
+      PGHOST: localhost
+      PGDATABASE: next_js_example_spring_2024
+      PGUSERNAME: next_js_example_spring_2024
+      PGPASSWORD: next_js_example_spring_2024
+    steps:
+      - name: Start preinstalled PostgreSQL on Ubuntu
+        run: |
+          sudo systemctl start postgresql.service
+          pg_isready
+      - name: Create database user
+        run: |
+          sudo -u postgres psql --command="CREATE USER $PGUSERNAME PASSWORD '$PGPASSWORD'" --command="\du"
+      - name: Create database and allow user
+        run: |
+          sudo -u postgres createdb --owner=$PGUSERNAME $PGDATABASE
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
 
-#       # Use the official setup-node action (sets up Node.js):
-#       # https://github.com/actions/setup-node
-#       - name: Use Node.js
-#         uses: actions/setup-node@v4
-#         with:
-#           node-version: 'lts/*'
-#           cache: 'pnpm'
+      # Use the official setup-node action (sets up Node.js):
+      # https://github.com/actions/setup-node
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
 
-#       - name: Install dependencies
-#         run: pnpm install
-#       - name: Jest unit tests
-#         run: pnpm jest
-#       - name: Run database migrations
-#         run: pnpm migrate up
-#       - name: Build Next.js app (types needed for TSC and ESLint)
-#         run: pnpm build
-#       - name: Check TypeScript Types
-#         run: pnpm tsc
-#       - name: Lint with ESLint
-#         run: pnpm eslint . --max-warnings 0
-#       - name: Lint with Stylelint
-#         run: pnpm stylelint '**/*.{css,scss,less,js,tsx}'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Jest unit tests
+        run: pnpm jest
+      - name: Run database migrations
+        run: pnpm migrate up
+      - name: Build Next.js app (types needed for TSC and ESLint)
+        run: pnpm build
+      - name: Check TypeScript Types
+        run: pnpm tsc
+      - name: Lint with ESLint
+        run: pnpm eslint . --max-warnings 0
+      - name: Lint with Stylelint
+        run: pnpm stylelint '**/*.{css,scss,less,js,tsx}'
 
-#       # Cache and install Playwright browser binaries, modified version of:
-#       # https://github.com/microsoft/playwright/issues/7249#issuecomment-1154603556
-#       # https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519
-#       # https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/
-#       - name: Get installed Playwright version for cache key
-#         run: echo "PLAYWRIGHT_VERSION=$(yq eval '.version' --output-format=yaml ./node_modules/@playwright/test/package.json)" >> $GITHUB_ENV
-#       - name: Cache Playwright browser binaries
-#         uses: actions/cache@v4
-#         id: playwright-browser-cache
-#         with:
-#           path: |
-#             ~/.cache/ms-playwright
-#           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-#       - name: Install Playwright browsers only on cache miss
-#         run: pnpm playwright install --with-deps chromium
-#         if: steps.playwright-browser-cache.outputs.cache-hit != 'true'
+      # Cache and install Playwright browser binaries, modified version of:
+      # https://github.com/microsoft/playwright/issues/7249#issuecomment-1154603556
+      # https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519
+      # https://playwrightsolutions.com/playwright-github-action-to-cache-the-browser-binaries/
+      - name: Get installed Playwright version for cache key
+        run: echo "PLAYWRIGHT_VERSION=$(yq eval '.version' --output-format=yaml ./node_modules/@playwright/test/package.json)" >> $GITHUB_ENV
+      - name: Cache Playwright browser binaries
+        uses: actions/cache@v4
+        id: playwright-browser-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright browsers only on cache miss
+        run: pnpm playwright install --with-deps chromium
+        if: steps.playwright-browser-cache.outputs.cache-hit != 'true'
 
-#       - name: Run tests
-#         run: pnpm playwright test
-#       - uses: actions/upload-artifact@v4
-#         if: failure()
-#         with:
-#           name: playwright-screenshots-videos
-#           path: playwright/test-results/
-#   cd:
-#     name: Deploy to Fly.io
-#     runs-on: ubuntu-latest
-#     timeout-minutes: 30
-#     needs: ci
-#     if: github.ref == 'refs/heads/main'
-#     env:
-#       FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-#     steps:
-#       - uses: actions/checkout@v4
-#       - uses: superfly/flyctl-actions/setup-flyctl@master
-#       - run: flyctl deploy --remote-only
+      - name: Run tests
+        run: pnpm playwright test
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-screenshots-videos
+          path: playwright/test-results/
+  cd:
+    name: Deploy to Fly.io
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    needs: ci
+    if: github.ref == 'refs/heads/main'
+    env:
+      FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 next-env.d.ts
 
 .eslintcache
+playwright/test-results/
+/playwright/report/
+/playwright/.cache/

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@playwright/test": "^1.45.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@ts-safeql/eslint-plugin": "^3.3.1",

playwright.config.ts

@@ -0,0 +1,28 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+// Config file docs: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: '"./node_modules/.bin/next" start',
+    port: 3000,
+    stdout: 'pipe',
+  },
+  testMatch: '**/playwright/**',
+  // Fail tests if test.only() found on CI
+  forbidOnly: !!process.env.CI,
+  // Run tests in files also in parallel
+  fullyParallel: true,
+  // Disable all parallelization on CI
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI
+    ? 'github'
+    : [['html', { outputFolder: 'playwright/report/' }]],
+  outputDir: 'playwright/test-results/',
+  use: {
+    testIdAttribute: 'data-test-id',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+};
+
+export default config;

playwright/navigation.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test('navigation test', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Welcome to the Event Network Project!',
+    }),
+  ).toBeVisible();
+});