e2e testing

.github/dependabot.yml

@@ -1,10 +1,10 @@
 version: 2
 updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'weekly'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.github/workflows/ci.yml → .github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: CI
+name: Lint
 
 on:
   push:
@@ -55,7 +55,7 @@ jobs:
         run: pnpm run types:check
 
       - name: Run the tests and generate coverage report
-        run: pnpm test -- --coverage --coverageReporters=text --coverageReporters=cobertura
+        run: pnpm test:unit -- --coverage --coverageReporters=text --coverageReporters=cobertura
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3

.github/workflows/playwright.yml

@@ -0,0 +1,36 @@
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: 'package.json'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm run test:e2e
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -40,3 +40,8 @@ next-env.d.ts
 
 # Sentry Config File
 .sentryclirc
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

.prettierignore

@@ -1,2 +1 @@
 pnpm-lock.yaml
-package.json

__tests__/example.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('should navigate to the docs page', async ({ page }) => {
+  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
+  await page.goto('/');
+  // Find an element with the text 'Docs' and click on it
+  await page.getByText('Docs').click();
+
+  const docsPage = await page.waitForEvent('popup');
+  // The new url should be "https://nextjs.org/docs"
+  await expect(docsPage).toHaveURL(/https:\/\/nextjs\.org\/docs/);
+});

jest.config.mjs

@@ -11,6 +11,8 @@ const config = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
   testEnvironment: 'jest-environment-jsdom',
+
+  testPathIgnorePatterns: ['__tests__'],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -21,10 +21,13 @@
     "lint:styles:fix": "pnpm run lint:styles:check --fix",
     "preinstall": "npx only-allow pnpm",
     "setup": "is-ci || simple-git-hooks",
-    "test": "jest",
-    "test:e2e": "exit 0",
+    "test:unit": "jest",
+    "test:e2e": "playwright test",
+    "test:e2e:codegen": "playwright codegen",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui",
     "types:check": "tsc --noEmit",
-    "validate": "run-p format:check lint:check types:check test test:e2e"
+    "validate": "run-p format:check lint:check types:check test:unit test:e2e"
   },
   "dependencies": {
     "@next/bundle-analyzer": "^13.5.4",
@@ -39,8 +42,10 @@
   "devDependencies": {
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
+    "@playwright/test": "^1.39.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
+    "@types/is-ci": "^3.0.2",
     "@types/jest": "^29.5.5",
     "@types/node": "^20",
     "@types/react": "^18",

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+import isCI from 'is-ci';
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000;
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`;
+
+/**
+ * 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: isCI,
+  /* Retry on CI only */
+  retries: isCI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 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,
+
+    /* 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: 'pnpm run dev',
+    url: baseURL,
+    reuseExistingServer: !isCI,
+  },
+});