Add Playwright E2E testing setup

- Added Playwright configuration for automated and visual E2E tests
- Updated Next.js configuration to accept localhost:3003 for testing
- Included Playwright as a dev dependency

💘 Generated with Crush
Co-Authored-By: Crush <crush@charm.land>

prds/e2e-testing-setup.md

@@ -0,0 +1,93 @@
+# Setting Up E2E Testing with Playwright
+
+Follow these steps to integrate Playwright for end-to-end testing in your application:
+
+## Step 1: Install Playwright
+
+Install Playwright along with its testing library by running:
+
+```bash
+npm install --save-dev @playwright/test
+```
+
+This command sets up Playwright to manage automated browser interactions.
+
+## Step 2: Configure Playwright
+
+Create a Playwright configuration file named `playwright.config.ts` at the root of your project with the following content:
+
+```typescript
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30000,
+  retries: 1,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+    {
+      name: 'firefox',
+      use: { browserName: 'firefox' },
+    },
+    {
+      name: 'webkit',
+      use: { browserName: 'webkit' },
+    },
+  ],
+};
+
+export default config;
+```
+
+## Step 3: Add E2E Test
+
+Create a `tests` directory in the root of your project. Add E2E tests under this directory.
+
+Example test file `tests/example.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('basic test', async ({ page }) => {
+  await page.goto('http://localhost:3000'); // replace with your local dev URL
+  await expect(page).toHaveTitle(/Your App Title/); // update with your app's title
+});
+```
+
+## Step 4: Update Package.json
+
+Add a script in `package.json` for running Playwright tests:
+
+```json
+  "scripts": {
+    ...
+    "test:e2e": "playwright test"
+  }
+```
+
+## Step 5: Run the Test
+
+Ensure your application is running locally, then execute your tests with:
+
+```bash
+npm run test:e2e
+```
+
+---
+
+**Additional Considerations**
+
+- If using CI/CD, adapt Playwright settings to accommodate environment constraints.
+- Manage environment variables as necessary for successful testing.
+- Utilize Playwright's `global-setup.js` and `global-teardown.js` for set up and tear down logic.
+
+Follow these steps to effectively incorporate E2E testing into your build process using Playwright. For further customization or troubleshooting, consult Playwright's documentation.