Run e2e tests with Playwright

.github/workflows/main.yml

@@ -4,10 +4,37 @@ on:
   [push]
 
 jobs:
-  build_and_test:
+  # Job for installing dependencies and linting code
+  Lint:
     runs-on: ubuntu-latest
     timeout-minutes: 5
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Cache Node.js modules
+      uses: actions/cache@v4
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
 
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Code linting
+      run: npm run lint
+
+  # Job for building and running tests
+  End-to-end-Tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
@@ -23,18 +50,53 @@ jobs:
         GOOGLE_CLIENT_ID: ${{secrets.GOOGLE_CLIENT_ID}}
         GOOGLE_CLIENT_SECRET: ${{secrets.GOOGLE_CLIENT_SECRET}}
       with:
-          build: npm run build
-          start: npm start
-          spec: |
-            cypress/e2e/*.cy.ts
+        build: npm run build
+        start: npm start
+        spec: |
+          cypress/e2e/*.cy.ts
 
-    - name: Code linting
-      run: npm run lint
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: npx playwright test
+
+    - name: Upload Playwright Report
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+
+  # Job for running unit tests and uploading coverage report
+  Unit-Tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Cache Node.js modules
+      uses: actions/cache@v4
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: Install dependencies
+      run: npm ci
 
-    - name: Run tests and collect coverage
+    - name: Run unit tests
       run: npm run test
 
     - name: Upload coverage to Codecov
       uses: codecov/[email protected]
       with:
-          token: ${{ secrets.CODECOV_TOKEN }}
+        token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -39,3 +39,7 @@ next-env.d.ts
 .vscode/tasks.json
 /certificates/*
 cypress.env.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

jest.config.ts

@@ -20,6 +20,7 @@ const config: Config = {
 
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: "v8",
+  modulePathIgnorePatterns: ["playwright"],
 
   // The test environment that will be used for testing
   testEnvironment: "jsdom",

package.json

@@ -9,6 +9,8 @@
     "azure-push-staging": "docker push codespice.azurecr.io/${npm_package_name}-staging:${npm_package_version}",
     "docker-start-staging": "docker compose -f docker/staging/docker-compose.yml up -d",
     "docker-stop-staging": "docker compose -f docker/staging/docker-compose.yml down",
+    "playwright-test": "npx playwright test",
+    "playwright-test-ui": "npx playwright test --ui",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -27,6 +29,7 @@
     "stripe": "^15.12.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.46.1",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",

playwright.config.ts

@@ -0,0 +1,77 @@
+import {defineConfig, devices} from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./playwright",
+  /* 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",
+  /* 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://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {...devices["Desktop Chrome"]},
+    },
+
+    // {
+    //   name: "firefox",
+    //   use: {...devices["Desktop Firefox"]},
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: {...devices["Desktop Safari"]},
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: "npm run start",
+  //   url: "http://127.0.0.1:3000",
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

playwright/signin-page.spec.ts

@@ -0,0 +1,19 @@
+import {test, expect} from "@playwright/test";
+
+
+test.describe("Sign-in Page", () => {
+  test("should have the correct URL and social login buttons", async ({page}) => {
+    await page.goto(`/api/auth/signin`);
+    // Check for the presence of social login buttons
+    const githubButton = page.locator("text=Sign in with Github");
+    const googleButton = page.locator("text=Sign in with Google");
+
+    await expect(githubButton).toBeVisible();
+    await expect(googleButton).toBeVisible();
+
+    // Ensure that the buttons are clickable
+    await expect(githubButton).toBeEnabled();
+    await expect(googleButton).toBeEnabled();
+
+  });
+});