feat: initialises playwright e2e testing

Author: ixahmedxi

.github/workflows/main.yml

@@ -16,6 +16,9 @@ jobs:
       - name: Install Dependencies
         run: bun install
 
+      - name: Install Playwright Browsers
+        run: bun playwright install --with-deps
+
       - name: Check Format
         run: bun format:check
 
@@ -30,3 +33,13 @@ jobs:
 
       - name: Build
         run: bun run build
+
+      - name: Run Playwright tests
+        run: bun playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -131,4 +131,10 @@ dist
 .pnp.*
 
 # DS Store files
-.DS_Store
+.DS_Store
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -12,6 +12,7 @@
     "unifiedjs.vscode-mdx",
     "christian-kohler.path-intellisense",
     "YoavBls.pretty-ts-errors",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "ms-playwright.playwright"
   ]
 }

README.md

@@ -4,7 +4,7 @@
 
 ## Todo
 
-- [ ] Playwright E2E tests.
+- [x] Playwright E2E tests.
 - [x] github actions.
 - [ ] SEO (dub.co is a great reference) for example robots.ts file.
 - [ ] Shadcn UI.

bun.lockb

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.getByText(/hello world/i)).toBeVisible();
+});

e2e/example.spec.ts

@@ -7,6 +7,7 @@ import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import jsdoc from 'eslint-plugin-jsdoc';
+import playwright from 'eslint-plugin-playwright';
 import * as regexpPlugin from 'eslint-plugin-regexp';
 import pluginSecurity from 'eslint-plugin-security';
 import tseslint from 'typescript-eslint';
@@ -24,31 +25,47 @@ export default tseslint.config(
     ignores: ['.next'],
   },
 
+  // Base configurations
   js.configs.recommended,
   ...tseslint.configs.strictTypeChecked,
   ...tseslint.configs.stylisticTypeChecked,
+
+  // Next.js / React
   ...fixupConfigRules(compat.extends('plugin:@next/next/recommended')),
   ...fixupConfigRules(compat.extends('plugin:react/recommended')),
   ...fixupConfigRules(compat.extends('plugin:react-hooks/recommended')),
-  ...fixupConfigRules(compat.extends('plugin:tailwindcss/recommended')),
   ...fixupConfigRules(compat.extends('plugin:jsx-a11y/strict')),
+
+  // Tailwind CSS
+  ...fixupConfigRules(compat.extends('plugin:tailwindcss/recommended')),
+
+  // Other plugins
   comments.recommended,
   regexpPlugin.configs['flat/recommended'],
   pluginSecurity.configs.recommended,
   eslintConfigPrettier,
 
+  // JSDoc plugin only for TypeScript files
   {
     files: ['**/*.{ts,tsx}'],
     extends: [jsdoc.configs['flat/recommended-typescript-error']],
   },
 
+  // Unit tests
   {
-    files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+    files: ['src/**/?(*.)+(spec|test).[jt]s?(x)'],
     extends: [
       ...fixupConfigRules(compat.extends('plugin:testing-library/react')),
     ],
   },
 
+  // Playwright
+  {
+    files: ['e2e/**'],
+    ...playwright.configs['flat/recommended'],
+  },
+
+  // Settings and rule overrides
   {
     linterOptions: {
       reportUnusedDisableDirectives: true,

eslint.config.js

@@ -70,6 +70,7 @@
     "@happy-dom/global-registrator": "^14.11.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@next/eslint-plugin-next": "^14.2.3",
+    "@playwright/test": "^1.44.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
@@ -89,6 +90,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsdoc": "^48.2.5",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-playwright": "^1.6.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-regexp": "^2.5.0",

package.json

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : 3,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'bun run build && bun start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env['CI'],
+  },
+});