feat: 创建完整的导航测试
- 添加Smoke测试（首页导航、联系页面导航） - 添加Regression测试（区域导航、平滑滚动、页面导航） - 添加移动端导航测试（菜单开关、移动端导航） - 添加导航链接验证（所有链接、正确标签、可点击） - 添加导航可访问性测试（键盘导航、ARIA标签） - 添加导航响应式测试（移动端、桌面端、平板端）
This commit is contained in:
张翔
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user