fix: update mobile menu tests to use mobile viewport
This commit is contained in:
@@ -35,8 +35,8 @@ export class HomePage extends BasePage {
|
|||||||
this.contactSection = page.locator('#contact');
|
this.contactSection = page.locator('#contact');
|
||||||
this.footer = page.locator('footer');
|
this.footer = page.locator('footer');
|
||||||
|
|
||||||
this.mobileMenuButton = page.locator('button[aria-label="打开菜单"]');
|
this.mobileMenuButton = page.locator('button[aria-label*="菜单"]');
|
||||||
this.mobileMenu = page.locator('#mobile-menu-panel');
|
this.mobileMenu = page.locator('#mobile-menu');
|
||||||
}
|
}
|
||||||
|
|
||||||
async goto(): Promise<void> {
|
async goto(): Promise<void> {
|
||||||
@@ -69,16 +69,17 @@ export class HomePage extends BasePage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async openMobileMenu(): Promise<void> {
|
async openMobileMenu(): Promise<void> {
|
||||||
|
await this.mobileMenuButton.waitFor({ state: 'visible', timeout: 5000 });
|
||||||
if (!(await this.mobileMenu.isVisible())) {
|
if (!(await this.mobileMenu.isVisible())) {
|
||||||
await this.mobileMenuButton.click();
|
await this.mobileMenuButton.click();
|
||||||
await this.mobileMenu.waitFor({ state: 'visible' });
|
await this.mobileMenu.waitFor({ state: 'visible', timeout: 5000 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async closeMobileMenu(): Promise<void> {
|
async closeMobileMenu(): Promise<void> {
|
||||||
if (await this.mobileMenu.isVisible()) {
|
if (await this.mobileMenu.isVisible()) {
|
||||||
await this.mobileMenuButton.click();
|
await this.mobileMenuButton.click();
|
||||||
await this.mobileMenu.waitFor({ state: 'hidden' });
|
await this.mobileMenu.waitFor({ state: 'hidden', timeout: 5000 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -84,6 +84,7 @@ test.describe('交互性能测试 @performance', () => {
|
|||||||
test('移动端菜单打开应该快速', async ({ homePage, page }) => {
|
test('移动端菜单打开应该快速', async ({ homePage, page }) => {
|
||||||
await homePage.goto();
|
await homePage.goto();
|
||||||
await homePage.waitForPageLoad();
|
await homePage.waitForPageLoad();
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
|
|
||||||
const monitor = new PerformanceMonitor(page);
|
const monitor = new PerformanceMonitor(page);
|
||||||
await monitor.startMonitoring();
|
await monitor.startMonitoring();
|
||||||
@@ -101,6 +102,7 @@ test.describe('交互性能测试 @performance', () => {
|
|||||||
test('移动端菜单关闭应该快速', async ({ homePage, page }) => {
|
test('移动端菜单关闭应该快速', async ({ homePage, page }) => {
|
||||||
await homePage.goto();
|
await homePage.goto();
|
||||||
await homePage.waitForPageLoad();
|
await homePage.waitForPageLoad();
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
|
|
||||||
const monitor = new PerformanceMonitor(page);
|
const monitor = new PerformanceMonitor(page);
|
||||||
|
|||||||
@@ -59,6 +59,7 @@ test.describe('首页回归测试 @regression', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('应该能够打开和关闭移动端菜单', async ({ homePage }) => {
|
test('应该能够打开和关闭移动端菜单', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
await expect(homePage.mobileMenu).toBeVisible();
|
await expect(homePage.mobileMenu).toBeVisible();
|
||||||
|
|
||||||
@@ -67,6 +68,7 @@ test.describe('首页回归测试 @regression', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('移动端菜单应该包含所有导航项', async ({ homePage }) => {
|
test('移动端菜单应该包含所有导航项', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
const desktopNavItems = await homePage.getAllNavigationLabels();
|
const desktopNavItems = await homePage.getAllNavigationLabels();
|
||||||
const mobileNavItems = homePage.mobileMenu.locator('a');
|
const mobileNavItems = homePage.mobileMenu.locator('a');
|
||||||
@@ -76,6 +78,7 @@ test.describe('首页回归测试 @regression', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('应该能够通过移动端菜单导航', async ({ homePage }) => {
|
test('应该能够通过移动端菜单导航', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
const firstLink = homePage.mobileMenu.locator('a').first();
|
const firstLink = homePage.mobileMenu.locator('a').first();
|
||||||
await firstLink.click();
|
await firstLink.click();
|
||||||
|
|||||||
@@ -44,15 +44,18 @@ test.describe('导航冒烟测试 @smoke', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('应该显示移动端菜单按钮', async ({ homePage }) => {
|
test('应该显示移动端菜单按钮', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await expect(homePage.mobileMenuButton).toBeVisible();
|
await expect(homePage.mobileMenuButton).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('应该能够打开移动端菜单', async ({ homePage }) => {
|
test('应该能够打开移动端菜单', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
await expect(homePage.mobileMenu).toBeVisible();
|
await expect(homePage.mobileMenu).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('应该能够关闭移动端菜单', async ({ homePage }) => {
|
test('应该能够关闭移动端菜单', async ({ homePage }) => {
|
||||||
|
await homePage.page.setViewportSize({ width: 375, height: 667 });
|
||||||
await homePage.openMobileMenu();
|
await homePage.openMobileMenu();
|
||||||
await homePage.closeMobileMenu();
|
await homePage.closeMobileMenu();
|
||||||
await expect(homePage.mobileMenu).not.toBeVisible();
|
await expect(homePage.mobileMenu).not.toBeVisible();
|
||||||
|
|||||||
Reference in New Issue
Block a user