feat(e2e): 添加完整的E2E测试框架和测试用例
添加Playwright测试框架配置和基础页面对象 实现冒烟测试用例覆盖首页和联系页面核心功能 更新导航组件以支持滚动高亮功能 添加BackButton组件统一返回按钮行为 配置Woodpecker CI集成和测试报告生成
This commit is contained in:
张翔
@@ -0,0 +1,339 @@
|
||||
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();
|
||||
await homePage.scrollToTop();
|
||||
const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBe(0);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user