b6c1aebe30
Some checks failed
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Failing after 25s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Has been skipped
Build and Deploy Frontend Learner / Notify Deployment Status (push) Failing after 1s
91 lines
4.9 KiB
TypeScript
91 lines
4.9 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';
|
|
|
|
test.describe('หมวดหน้าค้นหาคอร์สและผลลัพธ์ (Discovery & Browse)', () => {
|
|
|
|
test.describe('ส่วนหน้าแรก (Home)', () => {
|
|
test('โหลดหน้าแรก และตรวจสอบแสดงผลครบถ้วน (Hero, Cards, Categories)', async ({ page }) => {
|
|
await page.goto(BASE_URL);
|
|
const heroTitle = page.locator('h1, h2, .hero-title').first();
|
|
await expect(heroTitle).toBeVisible({ timeout: 15_000 });
|
|
|
|
const ctaButton = page.locator('a[href="/browse"]').first();
|
|
if (await ctaButton.isVisible()) {
|
|
await expect(ctaButton).toBeVisible();
|
|
}
|
|
|
|
const courseSectionHeading = page.getByText(/คอร์สออนไลน์|Online Courses/i).first();
|
|
await expect(courseSectionHeading).toBeVisible({ timeout: 10_000 });
|
|
|
|
const allCategoryBtn = page.getByRole('button', { name: /ทั้งหมด|All/i }).first();
|
|
await expect(allCategoryBtn).toBeVisible();
|
|
|
|
const courseCards = page.locator('div.cursor-pointer').filter({ has: page.locator('img') });
|
|
await expect(courseCards.first()).toBeVisible({ timeout: 15_000 });
|
|
expect(await courseCards.count()).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
test.describe('ส่วนค้นหาและแคตตาล็อก (Browse)', () => {
|
|
test('ค้นหาหลักสูตร (Search Course)', async ({ page }) => {
|
|
await page.goto(`${BASE_URL}/browse`);
|
|
const searchInput = page.locator('input[placeholder="ค้นหาคอร์ส..."]').first();
|
|
await searchInput.fill('การเขียนโปรแกรม');
|
|
await searchInput.press('Enter');
|
|
|
|
// ในหน้า browse จะใช้ <NuxtLink> ซึ่ง render เป็น tag <a>
|
|
const searchResults = page.locator('a[href*="/course/"]').filter({ has: page.locator('img') }).first();
|
|
await expect(searchResults).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
|
|
test('ตัวกรองหมวดหมู่คอร์ส (Category Filter)', async ({ page }) => {
|
|
await page.goto(`${BASE_URL}/browse`);
|
|
const categoryButton = page.locator('button').filter({ hasText: 'การออกแบบ' }).first();
|
|
|
|
if (await categoryButton.isVisible()) {
|
|
await categoryButton.click();
|
|
// ในหน้า browse จะใช้ <NuxtLink> ซึ่ง render เป็น tag <a>
|
|
const courseCard = page.locator('a[href*="/course/"]').filter({ has: page.locator('img') }).first();
|
|
await expect(courseCard).toBeVisible({ timeout: 15_000 });
|
|
}
|
|
});
|
|
});
|
|
|
|
test.describe('หน้ารายละเอียดคอร์ส (Course Detail)', () => {
|
|
test('โหลดเนื้อหาวิชา (Curriculum) แถบรายละเอียดขึ้นปกติ', async ({ page }) => {
|
|
await page.goto(`${BASE_URL}`);
|
|
const courseCard = page.locator('div.cursor-pointer').filter({ has: page.locator('img') }).first();
|
|
await expect(courseCard).toBeVisible({ timeout: 10_000 });
|
|
// Get URL from navigating when clicking the div or finding another link. Since it's a div, we cannot easily get href.
|
|
// So let's click it or fallback to /course/1
|
|
const targetUrl = '/course/1';
|
|
|
|
await page.goto(`${BASE_URL}${targetUrl}`);
|
|
|
|
const courseTitle = page.locator('h1').first();
|
|
await expect(courseTitle).toBeVisible({ timeout: 15_000 });
|
|
|
|
const curriculumTab = page.getByRole('tab', { name: /เนื้อหาวิชา|ส่วนหลักสูตร|Curriculum/i }).first();
|
|
if (await curriculumTab.isVisible()) {
|
|
await curriculumTab.click();
|
|
}
|
|
|
|
const lessonItems = page.locator('.q-expansion-item, .lesson-item, [role="listitem"]');
|
|
await expect(lessonItems.first()).toBeVisible().catch(() => {});
|
|
});
|
|
|
|
test('การแสดงผลปุ่ม เข้าเรียน/ลงทะเบียน (Enroll / Start Learning)', async ({ page }) => {
|
|
await page.goto(`${BASE_URL}`);
|
|
const courseCard = page.locator('div.cursor-pointer').filter({ has: page.locator('img') }).first();
|
|
await expect(courseCard).toBeVisible({ timeout: 10_000 });
|
|
const targetUrl = '/course/1';
|
|
|
|
await page.goto(`${BASE_URL}${targetUrl}`);
|
|
await page.waitForLoadState('networkidle').catch(() => {});
|
|
|
|
const enrollStartBtn = page.locator('button').filter({ hasText: /(เข้าสู่ระบบ|ลงทะเบียน|เข้าเรียน|เรียนต่อ|ซื้อ|ฟรี|Enroll|Start|Buy|Login)/i }).first();
|
|
await expect(enrollStartBtn).toBeVisible({ timeout: 10_000 });
|
|
});
|
|
});
|
|
});
|