From e164313b8726a237c545d2f7f2fc3f19508ff6d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Fri, 6 Mar 2026 12:14:51 +0800 Subject: [PATCH] feat: add E2E test examples using shared layer --- test-framework/e2e/accessibility.spec.ts | 31 ++++++++++++++++++++++++ test-framework/e2e/contact-page.spec.ts | 25 +++++++++++++++++++ test-framework/e2e/home-page.spec.ts | 28 +++++++++++++++++++++ test-framework/e2e/performance.spec.ts | 23 ++++++++++++++++++ test-framework/e2e/seo.spec.ts | 29 ++++++++++++++++++++++ 5 files changed, 136 insertions(+) create mode 100644 test-framework/e2e/accessibility.spec.ts create mode 100644 test-framework/e2e/contact-page.spec.ts create mode 100644 test-framework/e2e/home-page.spec.ts create mode 100644 test-framework/e2e/performance.spec.ts create mode 100644 test-framework/e2e/seo.spec.ts diff --git a/test-framework/e2e/accessibility.spec.ts b/test-framework/e2e/accessibility.spec.ts new file mode 100644 index 0000000..c7ceab4 --- /dev/null +++ b/test-framework/e2e/accessibility.spec.ts @@ -0,0 +1,31 @@ +import { test } from '@playwright/test'; +import { AccessibilityTester } from '../../test-framework/shared/utils/accessibility/AccessibilityTester'; +import { accessibilityThresholds } from '../../test-framework/shared/config/test-data'; + +test.describe('可访问性测试', () => { + test('首页应该通过可访问性检查', async ({ page }) => { + const tester = new AccessibilityTester(page); + await page.goto('/'); + + const result = await tester.runAxeScan('首页', '/'); + + console.log(`可访问性得分: ${result.score}`); + console.log(`违规数量: ${result.violations.length}`); + + expect(result.score).toBeGreaterThanOrEqual(accessibilityThresholds.score); + expect(result.violations.length).toBeLessThanOrEqual(accessibilityThresholds.maxViolations); + }); + + test('所有图片应该有Alt文本', async ({ page }) => { + const tester = new AccessibilityTester(page); + await page.goto('/'); + + const result = await tester.checkAltText(); + + console.log(`图片总数: ${result.total}`); + console.log(`有Alt文本: ${result.withAlt}`); + console.log(`无Alt文本: ${result.withoutAlt}`); + + expect(result.withoutAlt).toBe(0); + }); +}); diff --git a/test-framework/e2e/contact-page.spec.ts b/test-framework/e2e/contact-page.spec.ts new file mode 100644 index 0000000..89636ca --- /dev/null +++ b/test-framework/e2e/contact-page.spec.ts @@ -0,0 +1,25 @@ +import { test, expect } from '@playwright/test'; +import { ContactPage } from '../../test-framework/shared/pages'; +import { formData } from '../../test-framework/shared/config/test-data'; + +test.describe('联系页面测试', () => { + test('应该能够填写联系表单', async ({ page }) => { + const contactPage = new ContactPage(page); + await contactPage.navigate(); + + await contactPage.fillContactForm(formData.valid); + + const name = await page.locator('#name').inputValue(); + expect(name).toBe(formData.valid.name); + }); + + test('应该显示成功消息', async ({ page }) => { + const contactPage = new ContactPage(page); + await contactPage.navigate(); + + await contactPage.fillContactForm(formData.valid); + await contactPage.submitForm(); + + await expect(page.locator('.success-message')).toBeVisible({ timeout: 5000 }); + }); +}); diff --git a/test-framework/e2e/home-page.spec.ts b/test-framework/e2e/home-page.spec.ts new file mode 100644 index 0000000..e079a83 --- /dev/null +++ b/test-framework/e2e/home-page.spec.ts @@ -0,0 +1,28 @@ +import { test, expect } from '@playwright/test'; +import { HomePage } from '../../test-framework/shared/pages'; + +test.describe('首页测试', () => { + test('应该显示首页标题', async ({ page }) => { + const homePage = new HomePage(page); + await homePage.navigate(); + + const title = await homePage.getHeroTitle(); + expect(title).toBeTruthy(); + }); + + test('应该显示功能区域', async ({ page }) => { + const homePage = new HomePage(page); + await homePage.navigate(); + + const hasFeatures = await homePage.getFeaturesSection(); + expect(hasFeatures).toBe(true); + }); + + test('应该能够导航到关于页面', async ({ page }) => { + const homePage = new HomePage(page); + await homePage.navigate(); + + await homePage.navigateToAbout(); + await expect(page).toHaveURL(/\/about/); + }); +}); diff --git a/test-framework/e2e/performance.spec.ts b/test-framework/e2e/performance.spec.ts new file mode 100644 index 0000000..dc2c0a5 --- /dev/null +++ b/test-framework/e2e/performance.spec.ts @@ -0,0 +1,23 @@ +import { test, expect } from '@playwright/test'; +import { PerformanceMonitor } from '../../test-framework/shared/utils/performance/PerformanceMonitor'; +import { performanceThresholds } from '../../test-framework/shared/config/test-data'; + +test.describe('性能测试', () => { + test('首页加载时间应该小于阈值', async ({ page }) => { + const monitor = new PerformanceMonitor(page); + await page.goto('/'); + + const metrics = await monitor.measurePageLoad(); + + expect(metrics.loadTime).toBeLessThan(performanceThresholds.loadTime); + }); + + test('DOM内容加载时间应该小于阈值', async ({ page }) => { + const monitor = new PerformanceMonitor(page); + await page.goto('/'); + + const metrics = await monitor.measurePageLoad(); + + expect(metrics.domContentLoaded).toBeLessThan(performanceThresholds.domContentLoaded); + }); +}); diff --git a/test-framework/e2e/seo.spec.ts b/test-framework/e2e/seo.spec.ts new file mode 100644 index 0000000..7796835 --- /dev/null +++ b/test-framework/e2e/seo.spec.ts @@ -0,0 +1,29 @@ +import { test } from '@playwright/test'; +import { SEOValidator } from '../../test-framework/shared/utils/seo/SEOValidator'; +import { seoThresholds } from '../../test-framework/shared/config/test-data'; + +test.describe('SEO测试', () => { + test('首页应该通过SEO验证', async ({ page }) => { + const validator = new SEOValidator(page); + await page.goto('/'); + + const result = await validator.validateSEO(); + + console.log(`SEO得分: ${result.score}`); + console.log(`Meta标签: ${JSON.stringify(result.metaTags)}`); + console.log(`标题结构: ${JSON.stringify(result.headings)}`); + + expect(result.score).toBeGreaterThanOrEqual(seoThresholds.score); + }); + + test('应该有正确的标题结构', async ({ page }) => { + const validator = new SEOValidator(page); + await page.goto('/'); + + const headings = await validator.validateHeadings(); + + expect(headings.hasH1).toBe(true); + expect(headings.multipleH1).toBe(false); + expect(headings.headingStructure).toBe(true); + }); +});