fix: add name and data-testid attributes for form input fields

e2e/src/pages/ContactPage.ts

@@ -38,12 +38,12 @@ export class ContactPage extends BasePage {
 
     this.pageHeader = page.locator('h1');
     this.contactForm = page.locator('form');
-    this.nameInput = page.locator('input[name="name"]');
-    this.phoneInput = page.locator('input[name="phone"]');
-    this.emailInput = page.locator('input[name="email"]');
-    this.subjectInput = page.locator('input[name="subject"]');
-    this.messageInput = page.locator('textarea[name="message"]');
-    this.submitButton = page.locator('button[type="submit"]');
+    this.nameInput = page.locator('[data-testid="name-input"]');
+    this.phoneInput = page.locator('[data-testid="phone-input"]');
+    this.emailInput = page.locator('[data-testid="email-input"]');
+    this.subjectInput = page.locator('[data-testid="subject-input"]');
+    this.messageInput = page.locator('[data-testid="message-input"]');
+    this.submitButton = page.locator('[data-testid="submit-button"]');
 
     this.contactInfoCard = page.locator('[data-testid="contact-info"]');
     this.workHoursCard = page.locator('[data-testid="work-hours-card"]');
@@ -58,10 +58,10 @@ export class ContactPage extends BasePage {
 
     this.successMessage = page.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();
-    this.messageError = page.locator('textarea[name="message"] + .error-message, textarea[name="message"] ~ .text-destructive').first();
+    this.nameError = page.locator('[data-testid="name-input"] + .error-message, [data-testid="name-input"] ~ .text-destructive').first();
+    this.emailError = page.locator('[data-testid="email-input"] + .error-message, [data-testid="email-input"] ~ .text-destructive').first();
+    this.phoneError = page.locator('[data-testid="phone-input"] + .error-message, [data-testid="phone-input"] ~ .text-destructive').first();
+    this.messageError = page.locator('[data-testid="message-input"] + .error-message, [data-testid="message-input"] ~ .text-destructive').first();
   }
 
   get breadcrumb(): Locator {
@@ -300,37 +300,37 @@ export class ContactPage extends BasePage {
   }
 
   async focusOnField(fieldName: string): Promise<void> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     await input.focus();
   }
 
   async blurField(fieldName: string): Promise<void> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     await input.blur();
   }
 
   async typeInField(fieldName: string, text: string, options?: { delay?: number }): Promise<void> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     await input.type(text, options);
   }
 
   async clearField(fieldName: string): Promise<void> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     await input.fill('');
   }
 
   async isFieldVisible(fieldName: string): Promise<boolean> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     return await input.isVisible();
   }
 
   async isFieldEnabled(fieldName: string): Promise<boolean> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     return await input.isEnabled();
   }
 
   async getFieldAttribute(fieldName: string, attribute: string): Promise<string | null> {
-    const input = this.page.locator(`[name="${fieldName}"]`);
+    const input = this.page.locator(`[data-testid="${fieldName}-input"]`);
     return await input.getAttribute(attribute);
   }
 

src/app/(marketing)/contact/page.tsx

@@ -277,6 +277,8 @@ export default function ContactPage() {
                     <input type="hidden" name="_csrf" value={csrfToken} />
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <Input 
+                        name="name"
+                        data-testid="name-input"
                         label="姓名"
                         id="name" 
                         placeholder="请输入您的姓名" 
@@ -287,6 +289,8 @@ export default function ContactPage() {
                         error={errors.name}
                       />
                       <Input 
+                        name="phone"
+                        data-testid="phone-input"
                         label="电话"
                         id="phone" 
                         type="tel" 
@@ -299,6 +303,8 @@ export default function ContactPage() {
                       />
                     </div>
                     <Input 
+                      name="email"
+                      data-testid="email-input"
                       label="邮箱"
                       id="email" 
                       type="email" 
@@ -306,32 +312,37 @@ export default function ContactPage() {
                       required 
                       value={formData.email}
                       onChange={(e) => handleChange('email', e.target.value)}
-                      onBlur={(e) => handleBlur('email', e.target.value)}
-                      error={errors.email}
-                    />
+                        onBlur={(e) => handleBlur('email', e.target.value)}
+                        error={errors.email}
+                      />
                     <Input 
+                      name="subject"
+                      data-testid="subject-input"
                       label="主题"
                       id="subject" 
                       placeholder="请输入消息主题" 
                       required 
                       value={formData.subject}
-                      onChange={(e) => handleChange('subject', e.target.value)}
-                      onBlur={(e) => handleBlur('subject', e.target.value)}
-                      error={errors.subject}
-                    />
+                        onChange={(e) => handleChange('subject', e.target.value)}
+                        onBlur={(e) => handleBlur('subject', e.target.value)}
+                        error={errors.subject}
+                      />
                     <Textarea 
+                      name="message"
+                      data-testid="message-input"
                       label="留言内容"
                       id="message" 
                       placeholder="请输入您想咨询的内容" 
                       rows={5}
                       required 
                       value={formData.message}
-                      onChange={(e) => handleChange('message', e.target.value)}
-                      onBlur={(e) => handleBlur('message', e.target.value)}
-                      error={errors.message}
-                    />
+                        onChange={(e) => handleChange('message', e.target.value)}
+                        onBlur={(e) => handleBlur('message', e.target.value)}
+                        error={errors.message}
+                      />
                     <Button 
                       type="submit" 
+                      data-testid="submit-button"
                       size="lg"
                       className="w-full group mt-auto min-h-[52px] md:min-h-0"
                       disabled={isSubmitting}