From 318081a62ab52c14be307a5341ad1357a05b0d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Thu, 5 Mar 2026 21:49:12 +0800
Subject: [PATCH] fix: add data-testid attributes for contact page elements

---
 e2e/src/pages/ContactPage.ts         | 45 +++++++++++++++-------------
 src/app/(marketing)/contact/page.tsx | 20 ++++++-------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/e2e/src/pages/ContactPage.ts b/e2e/src/pages/ContactPage.ts
index 6960a3c..37d9314 100644
--- a/e2e/src/pages/ContactPage.ts
+++ b/e2e/src/pages/ContactPage.ts
@@ -16,13 +16,17 @@ export class ContactPage extends BasePage {
 
   readonly contactInfoCard: Locator;
   readonly workHoursCard: Locator;
+  readonly emailInfo: Locator;
+  readonly phoneInfo: Locator;
+  readonly addressInfo: Locator;
+  readonly emailLink: Locator;
+  readonly phoneLink: Locator;
+  readonly addressText: Locator;
+  readonly pageBadge: Locator;
+  readonly pageDescription: Locator;
 
   readonly successMessage: Locator;
 
-  readonly addressInfo: Locator;
-  readonly phoneInfo: Locator;
-  readonly emailInfo: Locator;
-
   readonly nameError: Locator;
   readonly emailError: Locator;
   readonly phoneError: Locator;
@@ -32,7 +36,7 @@ export class ContactPage extends BasePage {
     super(page);
     this.url = '/contact';
 
-    this.pageHeader = page.locator('h1:has-text("与我们取得联系")');
+    this.pageHeader = page.locator('h1');
     this.contactForm = page.locator('form');
     this.nameInput = page.locator('input[name="name"]');
     this.phoneInput = page.locator('input[name="phone"]');
@@ -41,15 +45,19 @@ export class ContactPage extends BasePage {
     this.messageInput = page.locator('textarea[name="message"]');
     this.submitButton = page.locator('button[type="submit"]');
 
-    this.contactInfoCard = page.locator('[data-slot="card"]').filter({ hasText: '联系方式' }).first();
-    this.workHoursCard = page.locator('[data-slot="card"]').filter({ hasText: '工作时间' }).first();
+    this.contactInfoCard = page.locator('[data-testid="contact-info"]');
+    this.workHoursCard = page.locator('[data-testid="work-hours-card"]');
+    this.emailInfo = page.locator('[data-testid="email-info"]');
+    this.phoneInfo = page.locator('[data-testid="phone-info"]');
+    this.addressInfo = page.locator('[data-testid="address-info"]');
+    this.emailLink = page.locator('[data-testid="email-link"]');
+    this.phoneLink = page.locator('[data-testid="phone-link"]');
+    this.addressText = page.locator('[data-testid="address-text"]');
+    this.pageBadge = page.locator('[data-testid="page-badge"]');
+    this.pageDescription = page.locator('[data-testid="page-description"]');
 
     this.successMessage = page.locator('text=消息已发送');
 
-    this.addressInfo = this.contactInfoCard.locator('text=公司地址');
-    this.phoneInfo = this.contactInfoCard.locator('text=联系电话');
-    this.emailInfo = this.contactInfoCard.locator('text=电子邮箱');
-
     this.nameError = page.locator('input[name="name"] + .error-message, input[name="name"] ~ .text-destructive').first();
     this.emailError = page.locator('input[name="email"] + .error-message, input[name="email"] ~ .text-destructive').first();
     this.phoneError = page.locator('input[name="phone"] + .error-message, input[name="phone"] ~ .text-destructive').first();
@@ -202,18 +210,15 @@ export class ContactPage extends BasePage {
   }
 
   async getAddress(): Promise<string> {
-    const addressElement = this.contactInfoCard.locator('div').nth(3).locator('div').nth(1);
-    return await addressElement.textContent() || '';
+    return await this.addressText.textContent() || '';
   }
 
   async getPhone(): Promise<string> {
-    const phoneElement = this.contactInfoCard.locator('div').nth(6).locator('div').nth(1);
-    return await phoneElement.textContent() || '';
+    return await this.phoneLink.textContent() || '';
   }
 
   async getEmail(): Promise<string> {
-    const emailElement = this.contactInfoCard.locator('div').nth(9).locator('div').nth(1);
-    return await emailElement.textContent() || '';
+    return await this.emailLink.textContent() || '';
   }
 
   async getPageTitle(): Promise<string> {
@@ -221,13 +226,11 @@ export class ContactPage extends BasePage {
   }
 
   async getPageDescription(): Promise<string> {
-    const description = this.pageHeader.locator('..').locator('p');
-    return await description.textContent() || '';
+    return await this.pageDescription.textContent() || '';
   }
 
   async getBadgeText(): Promise<string> {
-    const badge = this.page.locator('[data-slot="badge"]').first();
-    return await badge.textContent() || '';
+    return await this.pageBadge.textContent() || '';
   }
 
   async isRequiredFieldVisible(fieldName: string): Promise<boolean> {
diff --git a/src/app/(marketing)/contact/page.tsx b/src/app/(marketing)/contact/page.tsx
index dcc3708..192f527 100644
--- a/src/app/(marketing)/contact/page.tsx
+++ b/src/app/(marketing)/contact/page.tsx
@@ -164,12 +164,12 @@ export default function ContactPage() {
           >
             <div className="flex items-center gap-3 mb-4">
               <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
-              <span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
+              <span className="text-sm text-[#5C5C5C] tracking-wide" data-testid="page-badge">联系我们</span>
             </div>
             <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
               开启 <span className="text-[#C41E3A]">合作</span>
             </h1>
-            <p className="mt-4 text-[#5C5C5C] max-w-2xl">
+            <p className="mt-4 text-[#5C5C5C] max-w-2xl" data-testid="page-description">
               无论您有任何问题或合作意向，我们都很乐意与您交流
             </p>
           </div>
@@ -184,42 +184,42 @@ export default function ContactPage() {
             >
               <div>
                 <h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
-                <div className="space-y-4">
-                  <div className="flex items-start gap-4 group">
+                <div className="space-y-4" data-testid="contact-info">
+                  <div className="flex items-start gap-4 group" data-testid="email-info">
                     <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                       <Mail className="w-5 h-5 text-white" />
                     </div>
                     <div>
                       <p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
-                      <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
+                      <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="email-link">
                         {COMPANY_INFO.email}
                       </a>
                     </div>
                   </div>
-                  <div className="flex items-start gap-4 group">
+                  <div className="flex items-start gap-4 group" data-testid="phone-info">
                     <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                       <Phone className="w-5 h-5 text-white" />
                     </div>
                     <div>
                       <p className="text-sm text-[#5C5C5C] mb-1">电话</p>
-                      <a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
+                      <a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="phone-link">
                         {COMPANY_INFO.phone}
                       </a>
                     </div>
                   </div>
-                  <div className="flex items-start gap-4 group">
+                  <div className="flex items-start gap-4 group" data-testid="address-info">
                     <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                       <MapPin className="w-5 h-5 text-white" />
                     </div>
                     <div>
                       <p className="text-sm text-[#5C5C5C] mb-1">地址</p>
-                      <p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
+                      <p className="text-[#1C1C1C]" data-testid="address-text">{COMPANY_INFO.address}</p>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
+              <div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" data-testid="work-hours-card">
                 <div className="flex items-center gap-2 mb-3">
                   <Clock className="w-4 h-4 text-[#C41E3A]" />
                   <h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>