novalon-website/e2e/src/tests/responsive/responsive.spec.ts

import { test, expect } from '../../fixtures/base.fixture';
import { devices, getDesktopDevices, getMobileDevices, getTabletDevices } from '../../utils/devices';

test.describe('响应式测试 @responsive', () => {
  for (const device of getDesktopDevices()) {
    test(`桌面端 ${device.name} - 首页应该正常显示`, async ({ homePage, page }) => {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await expect(homePage.header).toBeVisible();
      await expect(homePage.heroSection).toBeVisible();
      await expect(homePage.footer).toBeVisible();
      await expect(homePage.navigation).toBeVisible();
      await expect(homePage.mobileMenuButton).not.toBeVisible();
    });
  }

  for (const device of getMobileDevices()) {
    test(`移动端 ${device.name} - 首页应该正常显示`, async ({ homePage, page }) => {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await expect(homePage.header).toBeVisible();
      await expect(homePage.heroSection).toBeVisible();
      await expect(homePage.footer).toBeVisible();
      await expect(homePage.mobileMenuButton).toBeVisible();
    });
  }

  for (const device of getTabletDevices()) {
    test(`平板端 ${device.name} - 首页应该正常显示`, async ({ homePage, page }) => {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await expect(homePage.header).toBeVisible();
      await expect(homePage.heroSection).toBeVisible();
      await expect(homePage.footer).toBeVisible();
      await expect(homePage.mobileMenuButton).toBeVisible();
    });
  }

  test('桌面端 - 导航应该水平显示', async ({ homePage, page }) => {
    const device = devices['desktop-1280x720'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await expect(homePage.navigation).toBeVisible();
    await expect(homePage.mobileMenuButton).not.toBeVisible();
    
    const navItems = await homePage.getNavigationItemCount();
    expect(navItems).toBeGreaterThan(0);
  });

  test('移动端 - 导航应该隐藏在汉堡菜单中', async ({ homePage, page }) => {
    const device = devices['mobile-375x667'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await expect(homePage.mobileMenuButton).toBeVisible();
    await expect(homePage.navigation).not.toBeVisible();
    
    await homePage.openMobileMenu();
    await expect(homePage.mobileMenu).toBeVisible();
  });

  test('平板端 - 导航应该隐藏在汉堡菜单中', async ({ homePage, page }) => {
    const device = devices['tablet-768x1024'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await expect(homePage.mobileMenuButton).toBeVisible();
    await expect(homePage.navigation).not.toBeVisible();
    
    await homePage.openMobileMenu();
    await expect(homePage.mobileMenu).toBeVisible();
  });

  test('所有设备 - 页面应该能够滚动', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await homePage.scrollToSection('services');
      const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
      expect(scrollPosition).toBeGreaterThan(0);
      
      await homePage.scrollToTop();
      const topPosition = await homePage.page.evaluate(() => window.scrollY);
      expect(topPosition).toBe(0);
    }
  });

  test('所有设备 - 所有区块应该可见', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    const sections = ['services', 'products', 'cases', 'about', 'news', 'contact'];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      for (const sectionId of sections) {
        await homePage.scrollToSection(sectionId);
        const isVisible = await homePage.isSectionVisible(sectionId);
        expect(isVisible).toBe(true);
      }
    }
  });

  test('移动端 - 移动菜单应该能够打开和关闭', async ({ homePage, page }) => {
    const device = devices['mobile-375x667'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await homePage.openMobileMenu();
    await expect(homePage.mobileMenu).toBeVisible();
    
    await homePage.closeMobileMenu();
    await expect(homePage.mobileMenu).not.toBeVisible();
  });

  test('桌面端 - Logo应该可见', async ({ homePage, page }) => {
    const device = devices['desktop-1280x720'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await expect(homePage.logo).toBeVisible();
    const altText = await homePage.getLogoAltText();
    expect(altText).toBeTruthy();
  });

  test('移动端 - Logo应该可见', async ({ homePage, page }) => {
    const device = devices['mobile-375x667'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await expect(homePage.logo).toBeVisible();
    const altText = await homePage.getLogoAltText();
    expect(altText).toBeTruthy();
  });

  test('所有设备 - 页脚应该可见', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await homePage.scrollToBottom();
      await expect(homePage.footer).toBeVisible();
    }
  });

  test('桌面端 - 立即咨询按钮应该可见', async ({ homePage, page }) => {
    const device = devices['desktop-1280x720'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    const contactButton = homePage.page.locator('a:has-text("立即咨询")').first();
    await expect(contactButton).toBeVisible();
  });

  test('移动端 - 立即咨询按钮应该可见', async ({ homePage, page }) => {
    const device = devices['mobile-375x667'];
    await page.setViewportSize(device.viewport);
    await homePage.goto();
    await homePage.waitForPageLoad();
    
    await homePage.openMobileMenu();
    const contactButton = homePage.mobileMenu.locator('a:has-text("联系我们")').first();
    await expect(contactButton).toBeVisible();
  });

  test('所有设备 - 应该能够点击导航项', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      if (device.isMobile) {
        await homePage.openMobileMenu();
      }
      
      const labels = await homePage.getAllNavigationLabels();
      if (labels.length > 0) {
        await homePage.clickNavigationItem(labels[0]);
        await homePage.page.waitForTimeout(1000);
      }
    }
  });

  test('所有设备 - 应该能够点击Logo返回首页', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await homePage.logo.click();
      await homePage.page.waitForTimeout(1000);
      const url = homePage.page.url();
      expect(url).toMatch(/\/$/);
    }
  });

  test('所有设备 - 应该没有水平滚动条', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      const hasHorizontalScroll = await homePage.page.evaluate(() => {
        return document.body.scrollWidth > document.body.clientWidth;
      });
      
      expect(hasHorizontalScroll).toBe(false);
    }
  });

  test('所有设备 - 文字应该可读', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      const heroTitle = await homePage.getHeroSectionTitle();
      expect(heroTitle).toBeTruthy();
      expect(heroTitle.length).toBeGreaterThan(0);
    }
  });

  test('所有设备 - 应该能够滚动到页面底部', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await homePage.scrollToBottom();
      const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
      expect(scrollPosition).toBeGreaterThan(0);
    }
  });

  test('所有设备 - 应该能够滚动到页面顶部', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      await homePage.scrollToBottom();
      const bottomScrollPosition = await homePage.page.evaluate(() => window.scrollY);
      await homePage.scrollToTop();
      const topScrollPosition = await homePage.page.evaluate(() => window.scrollY);
      expect(topScrollPosition).toBeLessThan(bottomScrollPosition);
      expect(topScrollPosition).toBeLessThan(1000);
    }
  });

  test('所有设备 - 页面应该没有JavaScript错误', async ({ homePage, page }) => {
    const testDevices = [
      devices['desktop-1280x720'],
      devices['mobile-375x667'],
      devices['tablet-768x1024'],
    ];
    
    for (const device of testDevices) {
      const errors: string[] = [];
      page.on('pageerror', error => {
        errors.push(error.toString());
      });
      
      await page.setViewportSize(device.viewport);
      await homePage.goto();
      await homePage.waitForPageLoad();
      
      expect(errors.length).toBe(0);
    }
  });
});