diff --git a/e2e/src/tests/regression/navigation.spec.ts b/e2e/src/tests/regression/navigation.spec.ts new file mode 100644 index 0000000..9a556c9 --- /dev/null +++ b/e2e/src/tests/regression/navigation.spec.ts @@ -0,0 +1,203 @@ +import { test, expect } from '@playwright/test'; +import { HomePage } from '../../pages/HomePage'; +import { NAVIGATION_ITEMS } from '../../data/test-data'; + +test.describe('导航测试', () => { + let homePage: HomePage; + + test.beforeEach(async ({ page }) => { + homePage = new HomePage(page); + await homePage.goto(); + }); + + test.describe('Smoke测试', () => { + test('应该能够导航到首页', async () => { + await homePage.navigateToHome(); + await homePage.waitForPageLoad(); + expect(await homePage.getCurrentURL()).toBe('/'); + }); + + test('应该能够导航到联系页面', async () => { + await homePage.clickContactButton(); + await homePage.waitForLoadState('networkidle'); + expect(await homePage.getCurrentURL()).toContain('/contact'); + }); + }); + + test.describe('Regression测试', () => { + test('应该能够点击导航到关于区域', async () => { + await homePage.clickNavigationItem('关于我们'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('about')).toBe(true); + }); + + test('应该能够点击导航到服务区域', async () => { + await homePage.clickNavigationItem('服务'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('services')).toBe(true); + }); + + test('应该能够点击导航到产品区域', async () => { + await homePage.clickNavigationItem('产品'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('products')).toBe(true); + }); + + test('应该能够点击导航到案例区域', async () => { + await homePage.clickNavigationItem('案例'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('cases')).toBe(true); + }); + + test('应该能够点击导航到新闻区域', async () => { + await homePage.clickNavigationItem('新闻'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('news')).toBe(true); + }); + + test('应该能够点击导航到联系区域', async () => { + await homePage.clickNavigationItem('联系我们'); + await homePage.waitForTimeout(1000); + expect(await homePage.isSectionVisible('contact')).toBe(true); + }); + + test('应该能够平滑滚动到区域', async () => { + await homePage.scrollToSection('services'); + const scrollPosition = await homePage.getScrollPosition(); + expect(scrollPosition.y).toBeGreaterThan(0); + }); + + test('应该能够返回上一页', async () => { + await homePage.clickContactButton(); + await homePage.waitForLoadState('networkidle'); + await homePage.goBack(); + await homePage.waitForLoadState('networkidle'); + expect(await homePage.getCurrentURL()).toBe('/'); + }); + + test('应该能够前进到下一页', async () => { + await homePage.clickContactButton(); + await homePage.waitForLoadState('networkidle'); + await homePage.goBack(); + await homePage.waitForLoadState('networkidle'); + await homePage.goForward(); + await homePage.waitForLoadState('networkidle'); + expect(await homePage.getCurrentURL()).toContain('/contact'); + }); + + test('应该能够刷新页面', async () => { + await homePage.scrollToSection('services'); + await homePage.reload(); + await homePage.waitForPageLoad(); + expect(await homePage.isSectionVisible('services')).toBe(true); + }); + + test('应该能够滚动到页面底部', async () => { + await homePage.scrollToBottom(); + const scrollPosition = await homePage.getScrollPosition(); + const pageHeight = await homePage.page.evaluate(() => document.body.scrollHeight); + expect(scrollPosition.y).toBeCloseTo(pageHeight, 100); + }); + + test('应该能够滚动到页面顶部', async () => { + await homePage.scrollToBottom(); + await homePage.scrollToTop(); + const scrollPosition = await homePage.getScrollPosition(); + expect(scrollPosition.y).toBe(0); + }); + + test('应该能够验证粘性页头', async () => { + const isSticky = await homePage.verifyStickyHeader(); + expect(isSticky).toBe(true); + }); + + test('应该能够验证平滑滚动', async () => { + const isSmooth = await homePage.verifySmoothScroll(); + expect(isSmooth).toBe(true); + }); + }); + + test.describe('移动端导航测试', () => { + test.beforeEach(async () => { + await homePage.page.setViewportSize({ width: 375, height: 667 }); + }); + + test('应该能够打开移动端菜单', async () => { + await homePage.openMobileMenu(); + expect(await homePage.mobileMenu.isVisible()).toBe(true); + }); + + test('应该能够关闭移动端菜单', async () => { + await homePage.openMobileMenu(); + await homePage.closeMobileMenu(); + expect(await homePage.mobileMenu.isVisible()).toBe(false); + }); + + test('应该能够通过移动端菜单导航', async () => { + await homePage.openMobileMenu(); + const menuItem = homePage.mobileMenu.locator('a').first(); + await menuItem.click(); + await homePage.waitForTimeout(1000); + expect(await homePage.mobileMenu.isVisible()).toBe(false); + }); + + test('应该能够验证移动端菜单按钮可见性', async () => { + expect(await homePage.mobileMenuButton.isVisible()).toBe(true); + }); + }); + + test.describe('导航链接验证', () => { + test('应该包含所有导航链接', async () => { + const labels = await homePage.getAllNavigationLabels(); + expect(labels).toHaveLength(NAVIGATION_ITEMS.length); + }); + + test('应该包含正确的导航标签', async () => { + const labels = await homePage.getAllNavigationLabels(); + NAVIGATION_ITEMS.forEach(item => { + expect(labels).toContain(item.label); + }); + }); + + test('应该能够点击所有导航链接', async () => { + for (const item of NAVIGATION_ITEMS) { + await homePage.goto(); + await homePage.clickNavigationItem(item.label); + await homePage.waitForTimeout(500); + expect(await homePage.getCurrentURL()).toContain(item.expectedUrl); + } + }); + }); + + test.describe('导航可访问性测试', () => { + test('应该能够通过键盘导航', async () => { + await homePage.pressKey('Tab'); + await homePage.pressKey('Tab'); + const activeElement = await homePage.page.evaluate(() => document.activeElement?.tagName); + expect(['A', 'BUTTON']).toContain(activeElement); + }); + + test('应该有正确的ARIA标签', async () => { + const navigation = homePage.navigation; + const role = await navigation.getAttribute('role'); + expect(role).toBe('navigation'); + }); + }); + + test.describe('导航响应式测试', () => { + test('应该在移动端显示汉堡菜单', async () => { + await homePage.page.setViewportSize({ width: 375, height: 667 }); + expect(await homePage.mobileMenuButton.isVisible()).toBe(true); + }); + + test('应该在桌面端显示完整导航', async () => { + await homePage.page.setViewportSize({ width: 1280, height: 720 }); + expect(await homePage.navigation.isVisible()).toBe(true); + }); + + test('应该在平板端显示完整导航', async () => { + await homePage.page.setViewportSize({ width: 768, height: 1024 }); + expect(await homePage.navigation.isVisible()).toBe(true); + }); + }); +});