整車上路實測 (端到端測試)

// tests/e2e/navigation.e2e.spec.ts
import { describe, test, expect } from 'vitest';
import { setup, createPage } from '@nuxt/test-utils/e2e';

describe('網站導航 E2E 測試', async () => {
  // 在所有測試開始前，啟動 Nuxt 伺服器
  // 這可能需要一點時間，因為它真的在背景建置並運行您的專案
  await setup();

  test('從首頁導航到關於我們頁面', async () => {
    // 1. 開啟一個新的瀏覽器分頁，並前往首頁 ('/')
    const page = await createPage('/');

    // 2. 找到畫面上 role 為 'link' 且名稱為 'About' 的元素，並點擊它
    //    這是 Playwright 的語法，非常接近真人的語意
    await page.getByRole('link', { name: 'About' }).click();

    // 3. 斷言：期望跳轉後的頁面上，role 為 'heading' 且名稱為 'About Page' 的元素是「可見的」
    await expect(page.getByRole('heading', { name: 'About Page' })).toBeVisible();
  });
});