import { test, expect } from '@playwright/test';

test.describe('响应式测试 @feature @frontend', () => {
  test('移动端首页显示正常', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/');

    await expect(page.locator('header')).toBeVisible();
    await expect(page.locator('nav')).toBeVisible();
    await expect(page.locator('footer')).toBeVisible();
  });

  test('平板端首页显示正常', async ({ page }) => {
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.goto('/');

    await expect(page.locator('header')).toBeVisible();
    await expect(page.locator('nav')).toBeVisible();
  });

  test('桌面端首页显示正常', async ({ page }) => {
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.goto('/');

    await expect(page.locator('header')).toBeVisible();
    await expect(page.locator('nav')).toBeVisible();
  });

  test('移动端导航菜单可展开', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/');

    const menuButton = page.locator('button[aria-label*="菜单"], button[aria-label*="menu"]');
    if (await menuButton.count() > 0) {
      await menuButton.click();
      
      const mobileMenu = page.locator('[role="dialog"], .mobile-menu, nav[class*="mobile"]');
      await expect(mobileMenu).toBeVisible();
    }
  });
});