feat: Add Playwright end-to-end testing setup and initial test suites for various application flows.

Frontend-Learner/tests/e2e/forgot-password.spec.ts

@@ -0,0 +1,102 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';
+
+// ✅ หน้าจริงคือ /auth/forgot-password (อ้างอิงจากรูป)
+const FORGOT_URL = `${BASE_URL}/auth/forgot-password`;
+
+async function waitAppSettled(page: Page) {
+  await page.waitForLoadState('domcontentloaded');
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.waitForTimeout(200);
+}
+
+function emailInput(page: Page) {
+  // เผื่อบางที input ไม่ได้ type=email แต่เป็น textbox ธรรมดา
+  return page.locator('input[type="email"]').or(page.getByRole('textbox')).first();
+}
+
+function submitBtn(page: Page) {
+  // ปุ่มในรูปเป็น “ส่งลิงก์รีเซ็ต”
+  return page.getByRole('button', { name: /ส่งลิงก์รีเซ็ต/i }).first();
+}
+
+function backToLoginLink(page: Page) {
+  // ในรูปเป็นลิงก์ “กลับไปหน้าเข้าสู่ระบบ”
+  return page.getByRole('link', { name: /กลับไปหน้าเข้าสู่ระบบ/i }).first();
+}
+
+test.describe('หน้าลืมรหัสผ่าน (Forgot Password)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(FORGOT_URL, { waitUntil: 'domcontentloaded' });
+    await waitAppSettled(page);
+  });
+
+  test('3.1 โหลดหน้าลืมรหัสผ่านได้ครบถ้วน (Smoke Test)', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /ลืมรหัสผ่าน/i })).toBeVisible();
+    await expect(emailInput(page)).toBeVisible();
+    await expect(submitBtn(page)).toBeVisible();
+    await expect(backToLoginLink(page)).toBeVisible();
+
+    await page.screenshot({ path: 'tests/e2e/screenshots/forgot-01-smoke.png', fullPage: true });
+  });
+
+  test('3.2 Validation: ใส่อีเมลภาษาไทยแล้วขึ้น Error', async ({ page }) => {
+    await emailInput(page).fill('ฟฟฟฟ');
+
+    // trigger blur
+    await page.getByRole('heading', { name: /ลืมรหัสผ่าน/i }).click();
+
+    // ข้อความจริงในระบบ “ห้ามใส่ภาษาไทย”
+    const err = page.getByText(/ห้ามใส่ภาษาไทย/i).first();
+    await expect(err).toBeVisible({ timeout: 10_000 });
+
+    await page.screenshot({ path: 'tests/e2e/screenshots/forgot-02-thai-email.png', fullPage: true });
+  });
+
+  test('3.3 กดลิงก์กลับไปหน้า Login ได้', async ({ page }) => {
+    await backToLoginLink(page).click();
+    await page.waitForURL('**/auth/login', { timeout: 10_000 });
+    await expect(page).toHaveURL(/\/auth\/login/i);
+
+    await page.screenshot({ path: 'tests/e2e/screenshots/forgot-03-back-login.png', fullPage: true });
+  });
+
+  test('3.4 ทดลองส่งลิงก์รีเซ็ตรหัสผ่าน (API Mock)', async ({ page }) => {
+    // ✅ ดัก request แบบกว้างขึ้น: POST ที่ URL มี forgot/reset
+    await page.route('**/*', async (route) => {
+      const req = route.request();
+      const url = req.url();
+      const method = req.method();
+
+      const looksLikeForgotApi =
+        method === 'POST' &&
+        /forgot|reset/i.test(url) &&
+        // กันไม่ให้ไป intercept asset
+        !/\.(png|jpg|jpeg|webp|svg|css|js|map)$/i.test(url);
+
+      if (looksLikeForgotApi) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ success: true, data: { message: 'Reset link sent' } }),
+        });
+        return;
+      }
+
+      await route.continue();
+    });
+
+    await emailInput(page).fill('test@gmail.com');
+    await submitBtn(page).click();
+
+    // ✅ ตรวจหน้าสำเร็จตามที่คุณคาดหวัง
+    await expect(page.getByText(/ส่งลิงก์เรียบร้อยแล้ว/i, { exact: false })).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByText(/กรุณาตรวจสอบกล่องจดหมาย/i, { exact: false })).toBeVisible();
+
+    // ปุ่ม “ส่งอีกครั้ง” (ถ้ามี)
+    await expect(page.getByRole('button', { name: /ส่งอีกครั้ง/i })).toBeVisible({ timeout: 10_000 }).catch(() => {});
+
+    await page.screenshot({ path: 'tests/e2e/screenshots/forgot-04-mock-success.png', fullPage: true });
+  });
+});