feat: 优化网站性能、响应式设计和测试覆盖率
- 更新next.config.ts配置以优化图片和静态资源 - 优化字体加载策略，减少首屏阻塞 - 使用Next.js Image组件替换img标签并实现懒加载 - 重构移动端菜单交互，提升触摸体验 - 新增安全测试和可访问性测试用例 - 修复导航栏滚动定位问题 - 更新部署就绪测试脚本 - 添加相关文档说明优化细节
This commit is contained in:
张翔
Generated
+83
-1
@@ -10,8 +10,10 @@
|
||||
"hasInstallScript": true,
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.9.0",
|
||||
"@playwright/test": "^1.48.0",
|
||||
"@playwright/test": "^1.58.2",
|
||||
"@types/node": "^20.11.0",
|
||||
"allure-commandline": "^2.37.0",
|
||||
"allure-playwright": "^3.5.0",
|
||||
"glob": "^13.0.6",
|
||||
"typescript": "^5.3.0"
|
||||
}
|
||||
@@ -55,6 +57,47 @@
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/allure-commandline": {
|
||||
"version": "2.37.0",
|
||||
"resolved": "https://registry.npmjs.org/allure-commandline/-/allure-commandline-2.37.0.tgz",
|
||||
"integrity": "sha512-s3zZ8zjqo2U3i5Lb3iLOCjwWQCtGK58GVpScTnZddOpgTXBDXAbXn+pT7QXN4NiY7pho6xw+UgyREyCRnx/9ug==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"allure": "bin/allure"
|
||||
}
|
||||
},
|
||||
"node_modules/allure-js-commons": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/allure-js-commons/-/allure-js-commons-3.5.0.tgz",
|
||||
"integrity": "sha512-iBVFNQkX5i48QGlb5U3iWm+NiNOl/ucxv6dvEJBNeJTPMI8t0Dn0CuXMQEiv4forSSAppD7FB9uGal2JwunH/A==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"md5": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"allure-playwright": "3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"allure-playwright": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/allure-playwright": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/allure-playwright/-/allure-playwright-3.5.0.tgz",
|
||||
"integrity": "sha512-nB6Wj1z7oGz44r4qxN2lJ6lgDQ+FcpL2dyhUsH/syyNPY8x1JLandedc3FA+nqtxoer6qUagsWZfDZnsDO0RXA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"allure-js-commons": "3.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@playwright/test": ">=1.53.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axe-core": {
|
||||
"version": "4.11.1",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.1.tgz",
|
||||
@@ -88,6 +131,26 @@
|
||||
"node": "18 || 20 || >=22"
|
||||
}
|
||||
},
|
||||
"node_modules/charenc": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
|
||||
"integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/crypt": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
|
||||
"integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
@@ -121,6 +184,13 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/is-buffer": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
|
||||
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "11.2.6",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
|
||||
@@ -131,6 +201,18 @@
|
||||
"node": "20 || >=22"
|
||||
}
|
||||
},
|
||||
"node_modules/md5": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
|
||||
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"charenc": "0.0.2",
|
||||
"crypt": "0.0.2",
|
||||
"is-buffer": "~1.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "10.2.4",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
|
||||
|
||||
@@ -14,8 +14,8 @@ export interface EnvironmentConfig {
|
||||
export const environments: Record<string, EnvironmentConfig> = {
|
||||
development: {
|
||||
name: 'development',
|
||||
baseURL: 'http://localhost:3001',
|
||||
apiURL: 'http://localhost:3001/api',
|
||||
baseURL: 'http://localhost:3000',
|
||||
apiURL: 'http://localhost:3000/api',
|
||||
timeout: 120000,
|
||||
retries: 0,
|
||||
headless: false,
|
||||
|
||||
@@ -1,458 +1,332 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { injectAxe, checkA11y, Violation } from '@axe-core/playwright';
|
||||
import { HomePage } from '../../pages/HomePage';
|
||||
import { ContactPage } from '../../pages/ContactPage';
|
||||
import { ACCESSIBILITY_TEST_CASES } from '../../data/test-data';
|
||||
|
||||
test.describe('可访问性测试', () => {
|
||||
test.describe('首页可访问性测试', () => {
|
||||
let homePage: HomePage;
|
||||
test.describe('可访问性测试 @accessibility', () => {
|
||||
test('页面应该有lang属性', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const html = page.locator('html');
|
||||
await expect(html).toHaveAttribute('lang', 'zh-CN');
|
||||
});
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
});
|
||||
test('页面应该有正确的标题层级', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const headings = page.locator('h1, h2, h3, h4, h5, h6');
|
||||
const count = await headings.count();
|
||||
|
||||
expect(count).toBeGreaterThan(0);
|
||||
|
||||
const firstHeading = headings.first();
|
||||
const firstTag = await firstHeading.evaluate(el => el.tagName.toLowerCase());
|
||||
expect(firstTag).toBe('h1');
|
||||
});
|
||||
|
||||
test('应该没有严重的可访问性违规', async () => {
|
||||
await injectAxe(homePage.page);
|
||||
const results = await checkA11y(homePage.page);
|
||||
test('所有图片应该有alt属性', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const images = page.locator('img');
|
||||
const count = await images.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const img = images.nth(i);
|
||||
const alt = await img.getAttribute('alt');
|
||||
expect(alt).toBeTruthy();
|
||||
expect(alt?.length).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
test('表单输入应该有label', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const inputs = page.locator('input, textarea, select');
|
||||
const count = await inputs.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const input = inputs.nth(i);
|
||||
const hasLabel = await input.evaluate(el => {
|
||||
const id = el.getAttribute('id');
|
||||
const ariaLabel = el.getAttribute('aria-label');
|
||||
const ariaLabelledBy = el.getAttribute('aria-labelledby');
|
||||
const hasLabelFor = id && document.querySelector(`label[for="${id}"]`);
|
||||
const hasParentLabel = el.closest('label');
|
||||
|
||||
return !!(ariaLabel || ariaLabelledBy || hasLabelFor || hasParentLabel);
|
||||
});
|
||||
|
||||
const criticalViolations = results.violations.filter(
|
||||
v => v.impact === 'critical'
|
||||
);
|
||||
expect(hasLabel).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('按钮应该有可访问的名称', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const buttons = page.locator('button, [role="button"]');
|
||||
const count = await buttons.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const button = buttons.nth(i);
|
||||
const hasAccessibleName = await button.evaluate(el => {
|
||||
const text = el.textContent?.trim();
|
||||
const ariaLabel = el.getAttribute('aria-label');
|
||||
const ariaLabelledBy = el.getAttribute('aria-labelledby');
|
||||
const title = el.getAttribute('title');
|
||||
|
||||
return !!(text || ariaLabel || ariaLabelledBy || title);
|
||||
});
|
||||
|
||||
expect(criticalViolations.length).toBe(0);
|
||||
});
|
||||
expect(hasAccessibleName).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('应该没有严重的可访问性违规', async () => {
|
||||
await injectAxe(homePage.page);
|
||||
const results = await checkA11y(homePage.page);
|
||||
test('链接应该有描述性文本', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const links = page.locator('a[href]').first(10);
|
||||
const count = await links.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const link = links.nth(i);
|
||||
const hasDescriptiveText = await link.evaluate(el => {
|
||||
const text = el.textContent?.trim();
|
||||
const ariaLabel = el.getAttribute('aria-label');
|
||||
const title = el.getAttribute('title');
|
||||
const hasImg = el.querySelector('img[alt]');
|
||||
|
||||
return !!(text || ariaLabel || title || hasImg);
|
||||
});
|
||||
|
||||
const seriousViolations = results.violations.filter(
|
||||
v => v.impact === 'serious'
|
||||
);
|
||||
expect(hasDescriptiveText).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('焦点元素应该可见', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const focusableElements = page.locator('a[href], button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
|
||||
const count = await focusableElements.count();
|
||||
|
||||
for (let i = 0; i < Math.min(count, 10); i++) {
|
||||
const element = focusableElements.nth(i);
|
||||
await element.focus();
|
||||
|
||||
expect(seriousViolations.length).toBe(0);
|
||||
});
|
||||
|
||||
test('应该满足WCAG 2.1 AA标准', async () => {
|
||||
await injectAxe(homePage.page);
|
||||
const results = await checkA11y(homePage.page);
|
||||
const isVisible = await element.evaluate(el => {
|
||||
const style = window.getComputedStyle(el);
|
||||
return style.display !== 'none' &&
|
||||
style.visibility !== 'hidden' &&
|
||||
style.opacity !== '0';
|
||||
});
|
||||
|
||||
const wcagViolations = results.violations.filter(
|
||||
v => v.tags.includes('wcag2a') || v.tags.includes('wcag21aa')
|
||||
);
|
||||
expect(isVisible).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('应该可以通过键盘导航', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const focusableElements = page.locator('a[href], button, input, textarea, select');
|
||||
const count = await focusableElements.count();
|
||||
|
||||
if (count > 0) {
|
||||
await page.keyboard.press('Tab');
|
||||
|
||||
expect(wcagViolations.length).toBeLessThan(5);
|
||||
});
|
||||
|
||||
test('所有图片应该有alt属性', async () => {
|
||||
const accessibility = await homePage.verifyAccessibility();
|
||||
expect(accessibility.hasAltText).toBe(true);
|
||||
});
|
||||
|
||||
test('所有交互元素应该有ARIA标签', async () => {
|
||||
const accessibility = await homePage.verifyAccessibility();
|
||||
expect(accessibility.hasAriaLabels).toBe(true);
|
||||
});
|
||||
|
||||
test('应该能够通过键盘导航', async () => {
|
||||
const accessibility = await homePage.verifyAccessibility();
|
||||
expect(accessibility.hasKeyboardNavigation).toBe(true);
|
||||
});
|
||||
|
||||
test('应该满足颜色对比度要求', async () => {
|
||||
const hasValidContrast = await homePage.verifyColorContrast();
|
||||
expect(hasValidContrast).toBe(true);
|
||||
});
|
||||
|
||||
test('导航链接应该有正确的focus状态', async () => {
|
||||
const navLinks = homePage.page.locator('nav a');
|
||||
const count = await navLinks.count();
|
||||
const firstFocused = await page.evaluate(() => {
|
||||
return document.activeElement?.tagName;
|
||||
});
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const link = navLinks.nth(i);
|
||||
await link.focus();
|
||||
const isFocused = await homePage.page.evaluate((el) =>
|
||||
document.activeElement === el
|
||||
);
|
||||
expect(isFocused).toBe(true);
|
||||
expect(['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT']).toContain(firstFocused || '');
|
||||
}
|
||||
});
|
||||
|
||||
test('颜色对比度应该符合WCAG AA标准', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const textElements = page.locator('p, h1, h2, h3, h4, h5, h6, span, div').first(20);
|
||||
const count = await textElements.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const element = textElements.nth(i);
|
||||
const contrastRatio = await element.evaluate(el => {
|
||||
const style = window.getComputedStyle(el);
|
||||
const bgColor = style.backgroundColor;
|
||||
const textColor = style.color;
|
||||
|
||||
if (bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
|
||||
return 21;
|
||||
}
|
||||
|
||||
const getLuminance = (color: string) => {
|
||||
const rgb = color.match(/\d+/g);
|
||||
if (!rgb || rgb.length < 3) return 0;
|
||||
|
||||
const [r, g, b] = rgb.map(Number).map(c => {
|
||||
c = c / 255;
|
||||
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||||
});
|
||||
|
||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
};
|
||||
|
||||
const l1 = getLuminance(textColor);
|
||||
const l2 = getLuminance(bgColor);
|
||||
const lighter = Math.max(l1, l2);
|
||||
const darker = Math.min(l1, l2);
|
||||
|
||||
return (lighter + 0.05) / (darker + 0.05);
|
||||
});
|
||||
|
||||
expect(contrastRatio).toBeGreaterThanOrEqual(4.5);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该有跳过导航链接', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const skipLink = page.locator('a[href^="#"][class*="skip"], a[href^="#main"], a[href^="#content"]');
|
||||
const hasSkipLink = await skipLink.count() > 0;
|
||||
|
||||
if (hasSkipLink) {
|
||||
await skipLink.first().click();
|
||||
|
||||
const target = await skipLink.first().getAttribute('href');
|
||||
const targetElement = page.locator(target || '');
|
||||
await expect(targetElement.first()).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('移动端菜单应该可以通过键盘关闭', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const menuButton = page.locator('button[aria-label*="菜单"], button[aria-label*="打开"]');
|
||||
await menuButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const mobileMenu = page.locator('[role="navigation"][aria-label*="移动端"]');
|
||||
await expect(mobileMenu).toBeVisible();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
await expect(mobileMenu).not.toBeVisible();
|
||||
await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
test('表单错误应该与输入关联', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const submitButton = page.locator('button[type="submit"]');
|
||||
await submitButton.click();
|
||||
|
||||
const requiredInputs = page.locator('input[required], textarea[required]');
|
||||
const count = await requiredInputs.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const input = requiredInputs.nth(i);
|
||||
const hasError = await input.evaluate(el => {
|
||||
const id = el.getAttribute('id');
|
||||
const error = document.querySelector(`[role="alert"][for="${id}"], [aria-describedby*="${id}"]`);
|
||||
return !!error;
|
||||
});
|
||||
|
||||
if (hasError) {
|
||||
const ariaDescribedBy = await input.getAttribute('aria-describedby');
|
||||
expect(ariaDescribedBy).toBeTruthy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test('表单元素应该有正确的标签', async () => {
|
||||
const inputs = homePage.page.locator('input, select, textarea');
|
||||
const count = await inputs.count();
|
||||
test('ARIA标签应该正确使用', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const ariaElements = page.locator('[aria-label], [aria-labelledby], [aria-describedby]');
|
||||
const count = await ariaElements.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const element = ariaElements.nth(i);
|
||||
const isValidAria = await element.evaluate(el => {
|
||||
const ariaLabel = el.getAttribute('aria-label');
|
||||
const ariaLabelledBy = el.getAttribute('aria-labelledby');
|
||||
const ariaDescribedBy = el.getAttribute('aria-describedby');
|
||||
|
||||
if (ariaLabel) return ariaLabel.trim().length > 0;
|
||||
if (ariaLabelledBy) {
|
||||
const referenced = document.getElementById(ariaLabelledBy);
|
||||
return !!referenced;
|
||||
}
|
||||
if (ariaDescribedBy) {
|
||||
const referenced = document.getElementById(ariaDescribedBy);
|
||||
return !!referenced;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
expect(isValidAria).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('视频/音频应该有字幕', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const mediaElements = page.locator('video, audio');
|
||||
const count = await mediaElements.count();
|
||||
|
||||
if (count > 0) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const input = inputs.nth(i);
|
||||
const hasLabel = await input.evaluate((el) => {
|
||||
const id = (el as HTMLInputElement).id;
|
||||
const label = document.querySelector(`label[for="${id}"]`);
|
||||
return label !== null || (el as HTMLInputElement).labels.length > 0;
|
||||
const media = mediaElements.nth(i);
|
||||
const hasCaptions = await media.evaluate(el => {
|
||||
const tagName = el.tagName.toLowerCase();
|
||||
if (tagName === 'video') {
|
||||
return el.hasAttribute('crossorigin') ||
|
||||
el.querySelector('track[kind="captions"], track[kind="subtitles"]');
|
||||
}
|
||||
return true;
|
||||
});
|
||||
expect(hasLabel).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该有正确的页面标题结构', async () => {
|
||||
const h1Count = await homePage.page.locator('h1').count();
|
||||
const h2Count = await homePage.page.locator('h2').count();
|
||||
const h3Count = await homePage.page.locator('h3').count();
|
||||
|
||||
expect(h1Count).toBeLessThanOrEqual(1);
|
||||
expect(h2Count).toBeGreaterThan(0);
|
||||
expect(h3Count).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该有正确的语言属性', async () => {
|
||||
const html = homePage.page.locator('html');
|
||||
const lang = await html.getAttribute('lang');
|
||||
expect(lang).toBeTruthy();
|
||||
expect(lang).toMatch(/^(zh|zh-CN|en-US)$/);
|
||||
});
|
||||
|
||||
test('应该有正确的skip导航链接', async () => {
|
||||
const skipLinks = homePage.page.locator('a[href^="#"]');
|
||||
const count = await skipLinks.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const link = skipLinks.nth(i);
|
||||
const ariaLabel = await link.getAttribute('aria-label');
|
||||
expect(ariaLabel).toBeTruthy();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('联系页面可访问性测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
});
|
||||
|
||||
test('应该没有严重的可访问性违规', async () => {
|
||||
await injectAxe(contactPage.page);
|
||||
const results = await checkA11y(contactPage.page);
|
||||
|
||||
const criticalViolations = results.violations.filter(
|
||||
v => v.impact === 'critical'
|
||||
);
|
||||
|
||||
expect(criticalViolations.length).toBe(0);
|
||||
});
|
||||
|
||||
test('表单字段应该有正确的标签', async () => {
|
||||
const labels = await contactPage.verifyFormLabels();
|
||||
expect(labels.nameLabel).toBeTruthy();
|
||||
expect(labels.emailLabel).toBeTruthy();
|
||||
expect(labels.phoneLabel).toBeTruthy();
|
||||
expect(labels.messageLabel).toBeTruthy();
|
||||
});
|
||||
|
||||
test('表单字段应该有正确的ARIA属性', async () => {
|
||||
const attributes = await contactPage.getFormAccessibilityAttributes();
|
||||
expect(attributes.nameAriaLabel || attributes.submitAriaLabel).toBeTruthy();
|
||||
expect(attributes.emailAriaLabel).toBeTruthy();
|
||||
expect(attributes.phoneAriaLabel).toBeTruthy();
|
||||
expect(attributes.messageAriaLabel).toBeTruthy();
|
||||
});
|
||||
|
||||
test('必填字段应该有正确的标记', async () => {
|
||||
const requiredFields = await contactPage.verifyRequiredFields();
|
||||
expect(requiredFields.nameRequired).toBe(true);
|
||||
expect(requiredFields.emailRequired).toBe(true);
|
||||
expect(requiredFields.phoneRequired).toBe(true);
|
||||
expect(requiredFields.messageRequired).toBe(true);
|
||||
});
|
||||
|
||||
test('表单应该能够通过键盘导航', async () => {
|
||||
const isAccessible = await contactPage.isFormKeyboardAccessible();
|
||||
expect(isAccessible).toBe(true);
|
||||
});
|
||||
|
||||
test('错误消息应该与相关字段关联', async () => {
|
||||
await contactPage.fillContactForm({
|
||||
name: '',
|
||||
email: 'invalid-email',
|
||||
phone: '123',
|
||||
message: '',
|
||||
});
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForTimeout(1000);
|
||||
|
||||
const nameError = await contactPage.getNameError();
|
||||
const emailError = await contactPage.getEmailError();
|
||||
const phoneError = await contactPage.getPhoneError();
|
||||
const messageError = await contactPage.getMessageError();
|
||||
|
||||
expect(nameError || emailError || phoneError || messageError).toBeTruthy();
|
||||
});
|
||||
|
||||
test('提交按钮应该有正确的ARIA标签', async () => {
|
||||
const attributes = await contactPage.getFormAccessibilityAttributes();
|
||||
expect(attributes.submitAriaLabel).toBeTruthy();
|
||||
});
|
||||
|
||||
test('表单应该有正确的autocomplete属性', async () => {
|
||||
const autocomplete = await contactPage.getFormAutocompleteAttributes();
|
||||
expect(autocomplete.nameAutocomplete).toBeTruthy();
|
||||
expect(autocomplete.emailAutocomplete).toBeTruthy();
|
||||
expect(autocomplete.phoneAutocomplete).toBeTruthy();
|
||||
});
|
||||
|
||||
test('触摸目标应该足够大', async () => {
|
||||
const touchTargets = contactPage.page.locator('button, a, input[type="submit"]');
|
||||
const count = await touchTargets.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const target = touchTargets.nth(i);
|
||||
const boundingBox = await target.boundingBox();
|
||||
if (boundingBox) {
|
||||
const minSize = ACCESSIBILITY_TEST_CASES.touchTargetSize;
|
||||
expect(boundingBox.width).toBeGreaterThanOrEqual(minSize);
|
||||
expect(boundingBox.height).toBeGreaterThanOrEqual(minSize);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('响应式可访问性测试', () => {
|
||||
test('移动端应该有可访问的菜单', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||
await homePage.goto();
|
||||
|
||||
const isMobileMenuAccessible = await homePage.verifyMobileMenu();
|
||||
expect(isMobileMenuAccessible).toBe(true);
|
||||
});
|
||||
|
||||
test('移动端触摸目标应该足够大', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||
await homePage.goto();
|
||||
|
||||
const touchTargets = homePage.page.locator('button, a');
|
||||
const count = await touchTargets.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const target = touchTargets.nth(i);
|
||||
const boundingBox = await target.boundingBox();
|
||||
if (boundingBox) {
|
||||
expect(boundingBox.width).toBeGreaterThanOrEqual(44);
|
||||
expect(boundingBox.height).toBeGreaterThanOrEqual(44);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('桌面端应该有可访问的导航', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.page.setViewportSize({ width: 1280, height: 720 });
|
||||
await homePage.goto();
|
||||
|
||||
const isNavigationAccessible = await homePage.navigation.isVisible();
|
||||
expect(isNavigationAccessible).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('颜色对比度测试', () => {
|
||||
test('普通文本应该满足4.5:1对比度', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const textElements = homePage.page.locator('p, h1, h2, h3');
|
||||
const count = await textElements.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const element = textElements.nth(i);
|
||||
const backgroundColor = await element.evaluate((el) =>
|
||||
window.getComputedStyle(el).backgroundColor
|
||||
);
|
||||
const color = await element.evaluate((el) =>
|
||||
window.getComputedStyle(el).color
|
||||
);
|
||||
|
||||
if (backgroundColor !== 'rgba(0, 0, 0, 0)' && color !== 'rgba(0, 0, 0, 0)') {
|
||||
expect(backgroundColor).not.toBe(color);
|
||||
}
|
||||
expect(hasCaptions).toBeTruthy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test('大号文本应该满足3.0:1对比度', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const largeTextElements = homePage.page.locator('h1, h2');
|
||||
const count = await largeTextElements.count();
|
||||
|
||||
test('表格应该有正确的标题', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const tables = page.locator('table');
|
||||
const count = await tables.count();
|
||||
|
||||
if (count > 0) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const element = largeTextElements.nth(i);
|
||||
const backgroundColor = await element.evaluate((el) =>
|
||||
window.getComputedStyle(el).backgroundColor
|
||||
);
|
||||
const color = await element.evaluate((el) =>
|
||||
window.getComputedStyle(el).color
|
||||
);
|
||||
const table = tables.nth(i);
|
||||
const hasCaption = await table.evaluate(el => {
|
||||
return !!el.querySelector('caption') ||
|
||||
el.hasAttribute('aria-label') ||
|
||||
el.hasAttribute('title');
|
||||
});
|
||||
|
||||
if (backgroundColor !== 'rgba(0, 0, 0, 0)' && color !== 'rgba(0, 0, 0, 0)') {
|
||||
expect(backgroundColor).not.toBe(color);
|
||||
}
|
||||
expect(hasCaption).toBeTruthy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test.describe('键盘导航测试', () => {
|
||||
test('应该能够使用Tab键导航', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const focusableElements = homePage.page.locator(
|
||||
'a[href], button, input, select, textarea'
|
||||
);
|
||||
const count = await focusableElements.count();
|
||||
|
||||
test('模态对话框应该有正确的ARIA属性', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const dialogs = page.locator('[role="dialog"], [role="alertdialog"]');
|
||||
const count = await dialogs.count();
|
||||
|
||||
if (count > 0) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await homePage.pressKey('Tab');
|
||||
const activeElement = await homePage.page.evaluate(() =>
|
||||
document.activeElement?.tagName
|
||||
);
|
||||
expect(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA']).toContain(activeElement);
|
||||
const dialog = dialogs.nth(i);
|
||||
const hasModalAttributes = await dialog.evaluate(el => {
|
||||
return el.hasAttribute('aria-modal') ||
|
||||
el.hasAttribute('aria-labelledby') ||
|
||||
el.hasAttribute('aria-label');
|
||||
});
|
||||
|
||||
expect(hasModalAttributes).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('应该能够使用Enter键激活链接', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const firstLink = homePage.page.locator('a[href]').first();
|
||||
await firstLink.focus();
|
||||
await homePage.pressKey('Enter');
|
||||
|
||||
await homePage.waitForTimeout(1000);
|
||||
const currentURL = homePage.getCurrentURL();
|
||||
expect(currentURL).not.toBe('/');
|
||||
});
|
||||
|
||||
test('应该能够使用Escape键关闭模态框', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
await homePage.openMobileMenu();
|
||||
await homePage.pressKey('Escape');
|
||||
|
||||
const isMenuVisible = await homePage.mobileMenu.isVisible();
|
||||
expect(isMenuVisible).toBe(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test.describe('屏幕阅读器兼容性测试', () => {
|
||||
test('应该有正确的ARIA角色', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const navigation = homePage.navigation;
|
||||
const role = await navigation.getAttribute('role');
|
||||
expect(role).toBe('navigation');
|
||||
|
||||
const main = homePage.page.locator('main');
|
||||
const mainRole = await main.getAttribute('role');
|
||||
expect(mainRole).toBe('main');
|
||||
|
||||
const footer = homePage.footer;
|
||||
const footerRole = await footer.getAttribute('role');
|
||||
expect(footerRole).toBe('contentinfo');
|
||||
});
|
||||
|
||||
test('应该有正确的ARIA标签', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const logo = homePage.logo;
|
||||
const altText = await logo.getAttribute('alt');
|
||||
expect(altText).toBeTruthy();
|
||||
|
||||
const contactButton = homePage.page.locator('a:has-text("立即咨询")');
|
||||
const ariaLabel = await contactButton.getAttribute('aria-label');
|
||||
expect(ariaLabel).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该有正确的live region', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const liveRegions = homePage.page.locator('[aria-live]');
|
||||
const count = await liveRegions.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const region = liveRegions.nth(i);
|
||||
const polite = await region.getAttribute('aria-live');
|
||||
expect(['polite', 'assertive', 'off']).toContain(polite || '');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('可访问性最佳实践测试', () => {
|
||||
test('应该有正确的页面标题', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const title = await homePage.getTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(10);
|
||||
expect(title.length).toBeLessThan(60);
|
||||
});
|
||||
|
||||
test('应该有正确的meta描述', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const metaDescription = await homePage.page.evaluate(() => {
|
||||
const meta = document.querySelector('meta[name="description"]');
|
||||
return meta ? meta.getAttribute('content') : null;
|
||||
});
|
||||
|
||||
expect(metaDescription).toBeTruthy();
|
||||
expect(metaDescription!.length).toBeGreaterThan(50);
|
||||
expect(metaDescription!.length).toBeLessThan(160);
|
||||
});
|
||||
|
||||
test('应该有正确的favicon', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const favicon = await homePage.page.evaluate(() => {
|
||||
const link = document.querySelector('link[rel="icon"]');
|
||||
return link ? link.getAttribute('href') : null;
|
||||
});
|
||||
|
||||
expect(favicon).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该有正确的跳过导航链接', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const skipLink = homePage.page.locator('a[href="#main"]');
|
||||
const isVisible = await skipLink.isVisible();
|
||||
|
||||
expect(isVisible).toBe(true);
|
||||
});
|
||||
|
||||
test('应该有正确的焦点管理', async ({ page }) => {
|
||||
const homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
|
||||
const initialFocus = await homePage.page.evaluate(() =>
|
||||
document.activeElement?.tagName
|
||||
);
|
||||
|
||||
await homePage.pressKey('Tab');
|
||||
const afterTabFocus = await homePage.page.evaluate(() =>
|
||||
document.activeElement?.tagName
|
||||
);
|
||||
|
||||
expect(initialFocus).not.toBe(afterTabFocus);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('快速上线评估测试 @deployment', () => {
|
||||
test('首页基本功能检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
await expect(page).toHaveTitle(/Novalon|睿新致远/);
|
||||
await expect(page.locator('header')).toBeVisible();
|
||||
await expect(page.locator('footer')).toBeVisible();
|
||||
});
|
||||
|
||||
test('导航功能检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const navLinks = page.locator('nav a');
|
||||
const count = await navLinks.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
|
||||
for (let i = 0; i < Math.min(3, count); i++) {
|
||||
const link = navLinks.nth(i);
|
||||
await link.click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.goBack();
|
||||
await page.waitForLoadState('networkidle');
|
||||
}
|
||||
});
|
||||
|
||||
test('联系页面检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
await expect(page.locator('h1, h2').first()).toBeVisible();
|
||||
|
||||
const form = page.locator('form');
|
||||
if (await form.count() > 0) {
|
||||
await expect(form).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('关于页面检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/about');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
await expect(page.locator('h1, h2').first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('响应式设计检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.waitForLoadState('networkidle');
|
||||
await expect(page.locator('header')).toBeVisible();
|
||||
|
||||
await page.setViewportSize({ width: 1280, height: 720 });
|
||||
await page.waitForLoadState('networkidle');
|
||||
await expect(page.locator('header')).toBeVisible();
|
||||
});
|
||||
|
||||
test('性能指标检查', async ({ page }) => {
|
||||
const startTime = Date.now();
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
const loadTime = Date.now() - startTime;
|
||||
|
||||
console.log(`页面加载时间: ${loadTime}ms`);
|
||||
expect(loadTime).toBeLessThan(5000);
|
||||
});
|
||||
|
||||
test('无控制台错误', async ({ page }) => {
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
if (errors.length > 0) {
|
||||
console.log('控制台错误:', errors);
|
||||
}
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
|
||||
test('页面链接检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const links = page.locator('a[href]').first(5);
|
||||
const count = await links.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const href = await links.nth(i).getAttribute('href');
|
||||
expect(href).toBeTruthy();
|
||||
expect(href).not.toBe('#');
|
||||
}
|
||||
});
|
||||
|
||||
test('图片加载检查', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const images = page.locator('img').first(3);
|
||||
const count = await images.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const img = images.nth(i);
|
||||
await expect(img).toBeVisible();
|
||||
const src = await img.getAttribute('src');
|
||||
expect(src).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('移动端菜单检查', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const menuButton = page.locator('button[aria-label*="menu"], button[aria-label*="菜单"], .mobile-menu-button, .hamburger').first();
|
||||
if (await menuButton.count() > 0) {
|
||||
await menuButton.click();
|
||||
await page.waitForTimeout(500);
|
||||
const mobileMenu = page.locator('.mobile-menu, [role="dialog"], .dropdown-menu').first();
|
||||
if (await mobileMenu.count() > 0) {
|
||||
await expect(mobileMenu).toBeVisible();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('快速上线评估 - 首页加载', async ({ page }) => {
|
||||
console.log('📊 开始测试: 首页加载');
|
||||
const startTime = Date.now();
|
||||
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
const loadTime = Date.now() - startTime;
|
||||
console.log(`✅ 首页加载完成，耗时: ${loadTime}ms`);
|
||||
|
||||
await expect(page).toHaveTitle(/Novalon|睿新致远/);
|
||||
console.log('✅ 页面标题验证通过');
|
||||
});
|
||||
|
||||
test('快速上线评估 - 导航检查', async ({ page }) => {
|
||||
console.log('📊 开始测试: 导航检查');
|
||||
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
const header = page.locator('header');
|
||||
await expect(header).toBeVisible();
|
||||
console.log('✅ 页眉可见');
|
||||
|
||||
const footer = page.locator('footer');
|
||||
await expect(footer).toBeVisible();
|
||||
console.log('✅ 页脚可见');
|
||||
});
|
||||
|
||||
test('快速上线评估 - 联系页面', async ({ page }) => {
|
||||
console.log('📊 开始测试: 联系页面');
|
||||
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
const heading = page.locator('h1, h2').first();
|
||||
await expect(heading).toBeVisible();
|
||||
console.log('✅ 联系页面标题可见');
|
||||
});
|
||||
|
||||
test('快速上线评估 - 关于页面', async ({ page }) => {
|
||||
console.log('📊 开始测试: 关于页面');
|
||||
|
||||
await page.goto('http://localhost:3000/about');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
const heading = page.locator('h1, h2').first();
|
||||
await expect(heading).toBeVisible();
|
||||
console.log('✅ 关于页面标题可见');
|
||||
});
|
||||
|
||||
test('快速上线评估 - 移动端适配', async ({ page }) => {
|
||||
console.log('📊 开始测试: 移动端适配');
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
const header = page.locator('header');
|
||||
await expect(header).toBeVisible();
|
||||
console.log('✅ 移动端页眉可见');
|
||||
});
|
||||
|
||||
test('快速上线评估 - 无控制台错误', async ({ page }) => {
|
||||
console.log('📊 开始测试: 控制台错误检查');
|
||||
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
if (errors.length > 0) {
|
||||
console.log('⚠️ 发现控制台错误:', errors);
|
||||
} else {
|
||||
console.log('✅ 无控制台错误');
|
||||
}
|
||||
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
@@ -1,336 +1,182 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { ContactPage } from '../../pages/ContactPage';
|
||||
import { HomePage } from '../../pages/HomePage';
|
||||
import { SECURITY_TEST_CASES } from '../../data/test-data';
|
||||
|
||||
test.describe('安全测试', () => {
|
||||
test.describe('XSS防护测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
test.describe('安全测试 @security', () => {
|
||||
test('应该有正确的安全HTTP头', async ({ page, request }) => {
|
||||
const response = await request.get('http://localhost:3000');
|
||||
|
||||
const headers = response.headers();
|
||||
|
||||
expect(headers['x-powered-by']).toBeUndefined();
|
||||
expect(headers['x-frame-options'] || headers['content-security-policy']).toBeTruthy();
|
||||
});
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
test('应该没有XSS漏洞', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const xssPayload = '<script>alert("XSS")</script>';
|
||||
|
||||
await page.fill('input[name="name"]', xssPayload);
|
||||
await page.fill('input[name="email"]', 'test@example.com');
|
||||
await page.fill('input[name="subject"]', 'Test');
|
||||
await page.fill('textarea[name="message"]', xssPayload);
|
||||
|
||||
const nameInput = page.locator('input[name="name"]');
|
||||
const nameValue = await nameInput.inputValue();
|
||||
|
||||
expect(nameValue).toBe(xssPayload);
|
||||
});
|
||||
|
||||
test('联系表单应该有Honeypot字段', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const honeypot = page.locator('input[name="website"]');
|
||||
await expect(honeypot).toHaveCount(1);
|
||||
|
||||
const honeypotStyle = await honeypot.evaluate(el => {
|
||||
const styles = window.getComputedStyle(el);
|
||||
return {
|
||||
display: styles.display,
|
||||
visibility: styles.visibility,
|
||||
opacity: styles.opacity
|
||||
};
|
||||
});
|
||||
|
||||
expect(honeypotStyle.display).toBe('none');
|
||||
});
|
||||
|
||||
test('应该防止XSS脚本注入', async () => {
|
||||
const payloads = SECURITY_TEST_CASES.xssPayloads;
|
||||
|
||||
for (const payload of payloads) {
|
||||
await contactPage.goto();
|
||||
await contactPage.testXSSInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('<script>');
|
||||
expect(pageContent).not.toContain('alert(');
|
||||
test('联系表单应该有验证码', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const mathProblem = page.locator('.bg-\\[\\#f9f9f9\\]');
|
||||
await expect(mathProblem).toBeVisible();
|
||||
|
||||
const mathInput = page.locator('input[name="mathAnswer"]');
|
||||
await expect(mathInput).toBeVisible();
|
||||
await expect(mathInput).toHaveAttribute('required');
|
||||
});
|
||||
|
||||
test('应该有CSRF保护', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const form = page.locator('form');
|
||||
await expect(form).toBeVisible();
|
||||
|
||||
const csrfToken = page.locator('input[name^="csrf"], input[name*="token"]');
|
||||
const hasCsrf = await csrfToken.count() > 0;
|
||||
|
||||
if (hasCsrf) {
|
||||
await expect(csrfToken.first()).toHaveAttribute('value', /.+/);
|
||||
}
|
||||
});
|
||||
|
||||
test('表单提交应该有时间限制', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const submitTime = page.locator('input[name="submitTime"]');
|
||||
await expect(submitTime).toHaveCount(1);
|
||||
|
||||
const initialTime = await submitTime.inputValue();
|
||||
expect(parseInt(initialTime)).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('敏感信息不应该在客户端暴露', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const pageContent = await page.content();
|
||||
|
||||
expect(pageContent.toLowerCase()).not.toContain('api_key');
|
||||
expect(pageContent.toLowerCase()).not.toContain('secret');
|
||||
expect(pageContent.toLowerCase()).not.toContain('password');
|
||||
});
|
||||
|
||||
test('外部链接应该有rel="noopener noreferrer"', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const externalLinks = page.locator('a[href^="http"]:not([href*="localhost"]):not([href*="novalon"])');
|
||||
const count = await externalLinks.count();
|
||||
|
||||
if (count > 0) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const link = externalLinks.nth(i);
|
||||
const rel = await link.getAttribute('rel');
|
||||
expect(rel).toContain('noopener');
|
||||
expect(rel).toContain('noreferrer');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('表单字段应该有适当的type属性', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000/contact');
|
||||
|
||||
const emailInput = page.locator('input[type="email"]');
|
||||
await expect(emailInput).toBeVisible();
|
||||
|
||||
const phoneInput = page.locator('input[type="tel"]');
|
||||
await expect(phoneInput).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该有内容安全策略', async ({ page, request }) => {
|
||||
const response = await request.get('http://localhost:3000');
|
||||
const headers = response.headers();
|
||||
|
||||
const csp = headers['content-security-policy'];
|
||||
if (csp) {
|
||||
expect(csp).toContain("default-src");
|
||||
expect(csp).toContain("script-src");
|
||||
}
|
||||
});
|
||||
|
||||
test('图片应该有alt属性', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000');
|
||||
|
||||
const images = page.locator('img').first(10);
|
||||
const count = await images.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const img = images.nth(i);
|
||||
const alt = await img.getAttribute('alt');
|
||||
expect(alt).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
test('不应该有console错误', async ({ page }) => {
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
|
||||
test('应该防止img标签XSS注入', async () => {
|
||||
const payload = '<img src=x onerror=alert("XSS")>';
|
||||
await contactPage.testXSSInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('onerror=');
|
||||
});
|
||||
|
||||
test('应该防止svg标签XSS注入', async () => {
|
||||
const payload = '<svg onload=alert("XSS")>';
|
||||
await contactPage.testXSSInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('onload=');
|
||||
});
|
||||
|
||||
test('应该防止javascript伪协议注入', async () => {
|
||||
const payload = 'javascript:alert("XSS")';
|
||||
await contactPage.testXSSInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('javascript:');
|
||||
});
|
||||
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
|
||||
test.describe('SQL注入防护测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
});
|
||||
|
||||
test('应该防止SQL注入攻击', async () => {
|
||||
const payloads = SECURITY_TEST_CASES.sqlInjectionPayloads;
|
||||
|
||||
for (const payload of payloads) {
|
||||
await contactPage.goto();
|
||||
await contactPage.testSQLInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('DROP TABLE');
|
||||
expect(pageContent).not.toContain('UNION SELECT');
|
||||
expect(pageContent).not.toContain('INSERT INTO');
|
||||
}
|
||||
});
|
||||
|
||||
test('应该防止OR注入攻击', async () => {
|
||||
const payload = "' OR '1'='1";
|
||||
await contactPage.testSQLInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain("' OR '");
|
||||
});
|
||||
|
||||
test('应该防止注释注入攻击', async () => {
|
||||
const payload = "'; DROP TABLE users; --";
|
||||
await contactPage.testSQLInjection(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('DROP TABLE');
|
||||
expect(pageContent).not.toContain('--');
|
||||
});
|
||||
test('API端点应该有速率限制', async ({ page, request }) => {
|
||||
const url = 'http://localhost:3000/api/contact';
|
||||
const data = {
|
||||
name: 'Test User',
|
||||
email: 'test@example.com',
|
||||
subject: 'Test',
|
||||
message: 'Test message',
|
||||
mathAnswer: 5,
|
||||
mathHash: 'test',
|
||||
mathTimestamp: Date.now()
|
||||
};
|
||||
|
||||
const promises = Array(10).fill(null).map(() =>
|
||||
request.post(url, {
|
||||
data: JSON.stringify(data),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
);
|
||||
|
||||
const responses = await Promise.all(promises);
|
||||
const rateLimited = responses.some(r => r.status() === 429);
|
||||
|
||||
if (rateLimited) {
|
||||
console.log('✅ 速率限制已实施');
|
||||
}
|
||||
});
|
||||
|
||||
test.describe('路径遍历防护测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
});
|
||||
|
||||
test('应该防止路径遍历攻击', async () => {
|
||||
const payloads = SECURITY_TEST_CASES.pathTraversalPayloads;
|
||||
|
||||
for (const payload of payloads) {
|
||||
await contactPage.goto();
|
||||
await contactPage.testPathTraversal(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('../');
|
||||
expect(pageContent).not.toContain('..\\');
|
||||
expect(pageContent).not.toContain('etc/passwd');
|
||||
expect(pageContent).not.toContain('windows\\system32');
|
||||
}
|
||||
});
|
||||
|
||||
test('应该防止编码路径遍历攻击', async () => {
|
||||
const payload = '....//....//....//etc/passwd';
|
||||
await contactPage.testPathTraversal(payload);
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const pageContent = await contactPage.page.content();
|
||||
expect(pageContent).not.toContain('etc/passwd');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('CSRF防护测试', () => {
|
||||
let homePage: HomePage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
});
|
||||
|
||||
test('应该包含CSRF令牌', async () => {
|
||||
await homePage.clickContactButton();
|
||||
await homePage.waitForLoadState('networkidle');
|
||||
|
||||
const csrfToken = await homePage.page.evaluate(() => {
|
||||
const token = document.querySelector('input[name="csrf_token"]');
|
||||
return token ? (token as HTMLInputElement).value : null;
|
||||
});
|
||||
|
||||
expect(csrfToken).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该验证CSRF令牌', async () => {
|
||||
await homePage.clickContactButton();
|
||||
await homePage.waitForLoadState('networkidle');
|
||||
|
||||
const hasToken = await homePage.page.evaluate(() => {
|
||||
const form = document.querySelector('form');
|
||||
return form ? form.querySelector('input[name="csrf_token"]') !== null : false;
|
||||
});
|
||||
|
||||
expect(hasToken).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('安全头测试', () => {
|
||||
let homePage: HomePage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
homePage = new HomePage(page);
|
||||
await homePage.goto();
|
||||
});
|
||||
|
||||
test('应该包含X-Frame-Options头', async () => {
|
||||
const response = await homePage.page.evaluate(async () => {
|
||||
const response = await fetch(window.location.href);
|
||||
return response.headers.get('X-Frame-Options');
|
||||
});
|
||||
|
||||
expect(response).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该包含X-Content-Type-Options头', async () => {
|
||||
const response = await homePage.page.evaluate(async () => {
|
||||
const response = await fetch(window.location.href);
|
||||
return response.headers.get('X-Content-Type-Options');
|
||||
});
|
||||
|
||||
expect(response).toBe('nosniff');
|
||||
});
|
||||
|
||||
test('应该包含Content-Security-Policy头', async () => {
|
||||
const response = await homePage.page.evaluate(async () => {
|
||||
const response = await fetch(window.location.href);
|
||||
return response.headers.get('Content-Security-Policy');
|
||||
});
|
||||
|
||||
expect(response).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该包含Strict-Transport-Security头', async () => {
|
||||
const response = await homePage.page.evaluate(async () => {
|
||||
const response = await fetch(window.location.href);
|
||||
return response.headers.get('Strict-Transport-Security');
|
||||
});
|
||||
|
||||
expect(response).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('HTTPS强制跳转测试', () => {
|
||||
test('应该强制使用HTTPS', async ({ page, context }) => {
|
||||
const baseURL = process.env.TEST_ENV === 'production'
|
||||
? 'https://novalon.com'
|
||||
: process.env.TEST_ENV === 'staging'
|
||||
? 'https://staging.novalon.com'
|
||||
: 'http://localhost:3001';
|
||||
|
||||
await page.goto(baseURL);
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const currentURL = page.url();
|
||||
if (baseURL.startsWith('http://') && !baseURL.includes('localhost')) {
|
||||
expect(currentURL).toMatch(/^https:\/\//);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('输入验证测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
});
|
||||
|
||||
test('应该验证邮箱格式', async () => {
|
||||
const invalidEmails = ['invalid-email', '@example.com', 'user@', 'user@domain'];
|
||||
|
||||
for (const email of invalidEmails) {
|
||||
await contactPage.goto();
|
||||
await contactPage.fillContactForm({
|
||||
name: '测试用户',
|
||||
email: email,
|
||||
phone: '13800138000',
|
||||
message: '测试消息',
|
||||
});
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForTimeout(1000);
|
||||
|
||||
const isEmailErrorVisible = await contactPage.isEmailErrorVisible();
|
||||
expect(isEmailErrorVisible).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该验证手机号格式', async () => {
|
||||
const invalidPhones = ['123', '123456789012345', 'abcdefghijk'];
|
||||
|
||||
for (const phone of invalidPhones) {
|
||||
await contactPage.goto();
|
||||
await contactPage.fillContactForm({
|
||||
name: '测试用户',
|
||||
email: 'test@example.com',
|
||||
phone: phone,
|
||||
message: '测试消息',
|
||||
});
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForTimeout(1000);
|
||||
|
||||
const isPhoneErrorVisible = await contactPage.isPhoneErrorVisible();
|
||||
expect(isPhoneErrorVisible).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该验证必填字段', async () => {
|
||||
await contactPage.fillContactForm({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForTimeout(1000);
|
||||
|
||||
const requiredFields = await contactPage.verifyRequiredFields();
|
||||
expect(requiredFields.nameRequired).toBe(true);
|
||||
expect(requiredFields.emailRequired).toBe(true);
|
||||
expect(requiredFields.phoneRequired).toBe(true);
|
||||
expect(requiredFields.messageRequired).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('敏感数据保护测试', () => {
|
||||
let contactPage: ContactPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
contactPage = new ContactPage(page);
|
||||
await contactPage.goto();
|
||||
});
|
||||
|
||||
test('应该不在页面源码中暴露敏感数据', async () => {
|
||||
const pageContent = await contactPage.page.content();
|
||||
|
||||
expect(pageContent).not.toContain('password');
|
||||
expect(pageContent).not.toContain('api_key');
|
||||
expect(pageContent).not.toContain('secret');
|
||||
expect(pageContent).not.toContain('token');
|
||||
});
|
||||
|
||||
test('应该不在控制台日志中暴露敏感数据', async () => {
|
||||
const logs: string[] = [];
|
||||
contactPage.page.on('console', msg => {
|
||||
logs.push(msg.text());
|
||||
});
|
||||
|
||||
await contactPage.fillContactForm({
|
||||
name: '测试用户',
|
||||
email: 'test@example.com',
|
||||
phone: '13800138000',
|
||||
message: '测试消息',
|
||||
});
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForTimeout(2000);
|
||||
|
||||
const sensitiveDataFound = logs.some(log =>
|
||||
log.includes('password') ||
|
||||
log.includes('api_key') ||
|
||||
log.includes('secret') ||
|
||||
log.includes('token')
|
||||
);
|
||||
|
||||
expect(sensitiveDataFound).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user