elearning/Frontend-Learner/tests/e2e/settings.spec.ts

86 lines
4.8 KiB
TypeScript

import { test, expect } from '@playwright/test';
test.describe('หมวดการตั้งค่าและส่วนติดต่อผู้ใช้ (Settings & UI Theme)', () => {
test('5.1 เปลี่ยนภาษาการแสดงผล (Localisation/i18n)', async ({ page }) => {
await page.goto('/'); // ไปที่หน้าแรกปกติ
// หาสวิตช์เปลี่ยนภาษา
const langBtn = page.getByRole('button', { name: 'Language' }).or(page.locator('button').filter({ hasText: /TH|EN/ })).first();
// ลองกดสลับถ้ามีปุ่ม
if (await langBtn.isVisible()) {
await langBtn.click();
// เลือกเปลี่ยนเป็นภาษาอังกฤษ (สมมติตั้งต้นเป็นไทย)
const englishOpt = page.locator('text=English, text=EN').first();
await englishOpt.click();
// ตรวจสอบว่าคำว่า "เข้าสู่ระบบ" (ไทย) ถูกแปลเป็น "Log in" หรือเมนูอื่นเป็นอังกฤษไปแล้ว
const loginLink = page.locator('a[href*="login"], button').filter({ hasText: /Log in|Sign In/i });
await expect(loginLink).toBeVisible({ timeout: 5000 });
}
});
test('5.2 เปลี่ยนโหมดมืดสว่าง (Theme Switcher)', async ({ page }) => {
await page.goto('/');
// หาปุ่มสลับ Dark Mode / Light Mode (มักจะเป็นรูปพระอาทิตย์/พระจันทร์)
const themeBtn = page.locator('.dark-mode-toggle, button[aria-label*="theme"]').first();
// ถ้ารองรับการเปลี่ยนตีม
if (await themeBtn.isVisible()) {
// ดึงคลาสของ <html> ก่อนกด (เช่น '<html class="dark">')
const htmlBefore = await page.evaluate(() => document.documentElement.className);
await themeBtn.click();
await page.waitForTimeout(500); // รอ animation เฟดนิดนึง
// ดึงคลาส <html> หลังกดอีกที
const htmlAfter = await page.evaluate(() => document.documentElement.className);
// คลาสของ HTML ต้องเปลี่ยนไป (เช่น เคยมี 'dark' แล้วโดนลบออก)
expect(htmlBefore).not.toEqual(htmlAfter);
}
});
test.describe('การตั้งค่าบัญชี (Profile Settings)', () => {
// แยกหมวดเล็กต้องล็อกอินเอาไว้ทดสอบหน้า My Profile
test.beforeEach(async ({ page }) => {
await page.goto('/auth/login');
await page.waitForTimeout(1500);
await page.locator('input[type="email"]').fill('studentedtest@example.com');
await page.locator('input[type="password"]').fill('admin123');
await page.getByRole('button', { name: 'เข้าสู่ระบบ', exact: true }).click();
await page.waitForURL('**/dashboard', { timeout: 15000 });
});
test('5.3 แก้ไขและบันทึกข้อมูลส่วนตัว (Edit Profile)', async ({ page }) => {
// เข้าไปที่หน้าการตั้งค่า หรือ Profile
await page.goto('/dashboard/profile');
// ตรวจสอบว่ามีช่องกรอกชื่อ
const nameInput = page.locator('input[type="text"]').first();
if (await nameInput.isVisible()) {
const oldName = await nameInput.inputValue();
// ทดลองพิมพ์ตัวเลขต่อท้ายเข้าไปเพื่อจำลองการแก้ไข
await nameInput.clear();
await nameInput.fill(`${oldName}แก้ไข`);
// กดปุ่มบันทึกข้อมูล
const saveBtn = page.getByRole('button', { name: 'บันทึกการเปลี่ยนแปลง', exact: false })
.or(page.locator('button').filter({ hasText: 'บันทึก' })).first();
await saveBtn.click();
// ตรวจสอบว่ามีแถบ Notification เด้งว่า "อัปเดตเรียบร้อย"
const successNotify = page.locator('.q-notification__message, text=อัปเดตข้อมูลสำเร็จ').first();
await expect(successNotify).toBeVisible({ timeout: 5000 });
// (Clean up) อาจจะพิมพ์ชื่อเดิมกลับลงไปเพื่อไม่ให้ข้อมูลพัง
}
});
});
});