feat(test): add mobile user journey tests

2026-04-09 19:28:38 +08:00
parent dd27caff53
commit e151c46263
1 changed files with 60 additions and 0 deletions
@@ -0,0 +1,60 @@
+import { test, expect, devices } from '@playwright/test';
+import { FrontendHomePage, FrontendContactPage } from '../../pages/frontend';
+import { TestDataFactory } from '../../fixtures/test-data-factory';
+
+test.use({ ...devices['Pixel 5'] });
+
+test.describe('移动端用户旅程 @journey @mobile', () => {
+  let homePage: FrontendHomePage;
+  let contactPage: FrontendContactPage;
+
+  test.beforeEach(async ({ page }) => {
+    homePage = new FrontendHomePage(page);
+    contactPage = new FrontendContactPage(page);
+  });
+
+  test('移动端用户通过汉堡菜单导航', async ({ page }) => {
+    await test.step('步骤1: 在移动端视口打开首页', async () => {
+      await homePage.goto();
+      await homePage.expectMobileMenuButtonVisible();
+    });
+
+    await test.step('步骤2: 点击汉堡菜单', async () => {
+      await homePage.clickMobileMenuButton();
+      await homePage.expectMobileMenuOpen();
+    });
+
+    await test.step('步骤3: 导航到产品页面', async () => {
+      await homePage.clickMobileMenuItem('产品服务');
+      await page.waitForURL(/\/products/);
+      await expect(page.locator('h1')).toBeVisible();
+    });
+
+    await test.step('步骤4: 再次打开菜单，导航到联系页面', async () => {
+      await homePage.clickMobileMenuButton();
+      await homePage.clickMobileMenuItem('联系我们');
+      await page.waitForURL(/\/contact/);
+    });
+  });
+
+  test('移动端用户提交联系表单', async () => {
+    const contactData = TestDataFactory.createContactForm({
+      name: '移动端测试用户',
+      email: 'mobile@example.com',
+    });
+
+    await test.step('步骤1: 移动端访问联系页面', async () => {
+      await contactPage.goto();
+      await contactPage.expectContactFormVisible();
+    });
+
+    await test.step('步骤2: 填写表单（触摸优化）', async () => {
+      await contactPage.fillForm(contactData);
+    });
+
+    await test.step('步骤3: 提交并验证', async () => {
+      await contactPage.submitForm();
+      await contactPage.expectSubmitSuccess();
+    });
+  });
+});