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

This commit is contained in:
张翔
2026-03-05 21:51:50 +08:00
parent 318081a62a
commit 2d6cd79067
2 changed files with 39 additions and 28 deletions
+17 -17
View File
@@ -38,12 +38,12 @@ export class ContactPage extends BasePage {
this.pageHeader = page.locator('h1'); this.pageHeader = page.locator('h1');
this.contactForm = page.locator('form'); this.contactForm = page.locator('form');
this.nameInput = page.locator('input[name="name"]'); this.nameInput = page.locator('[data-testid="name-input"]');
this.phoneInput = page.locator('input[name="phone"]'); this.phoneInput = page.locator('[data-testid="phone-input"]');
this.emailInput = page.locator('input[name="email"]'); this.emailInput = page.locator('[data-testid="email-input"]');
this.subjectInput = page.locator('input[name="subject"]'); this.subjectInput = page.locator('[data-testid="subject-input"]');
this.messageInput = page.locator('textarea[name="message"]'); this.messageInput = page.locator('[data-testid="message-input"]');
this.submitButton = page.locator('button[type="submit"]'); this.submitButton = page.locator('[data-testid="submit-button"]');
this.contactInfoCard = page.locator('[data-testid="contact-info"]'); this.contactInfoCard = page.locator('[data-testid="contact-info"]');
this.workHoursCard = page.locator('[data-testid="work-hours-card"]'); this.workHoursCard = page.locator('[data-testid="work-hours-card"]');
@@ -58,10 +58,10 @@ export class ContactPage extends BasePage {
this.successMessage = page.locator('text=消息已发送'); this.successMessage = page.locator('text=消息已发送');
this.nameError = page.locator('input[name="name"] + .error-message, input[name="name"] ~ .text-destructive').first(); this.nameError = page.locator('[data-testid="name-input"] + .error-message, [data-testid="name-input"] ~ .text-destructive').first();
this.emailError = page.locator('input[name="email"] + .error-message, input[name="email"] ~ .text-destructive').first(); this.emailError = page.locator('[data-testid="email-input"] + .error-message, [data-testid="email-input"] ~ .text-destructive').first();
this.phoneError = page.locator('input[name="phone"] + .error-message, input[name="phone"] ~ .text-destructive').first(); this.phoneError = page.locator('[data-testid="phone-input"] + .error-message, [data-testid="phone-input"] ~ .text-destructive').first();
this.messageError = page.locator('textarea[name="message"] + .error-message, textarea[name="message"] ~ .text-destructive').first(); this.messageError = page.locator('[data-testid="message-input"] + .error-message, [data-testid="message-input"] ~ .text-destructive').first();
} }
get breadcrumb(): Locator { get breadcrumb(): Locator {
@@ -300,37 +300,37 @@ export class ContactPage extends BasePage {
} }
async focusOnField(fieldName: string): Promise<void> { 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(); await input.focus();
} }
async blurField(fieldName: string): Promise<void> { 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(); await input.blur();
} }
async typeInField(fieldName: string, text: string, options?: { delay?: number }): Promise<void> { 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); await input.type(text, options);
} }
async clearField(fieldName: string): Promise<void> { 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(''); await input.fill('');
} }
async isFieldVisible(fieldName: string): Promise<boolean> { 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(); return await input.isVisible();
} }
async isFieldEnabled(fieldName: string): Promise<boolean> { 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(); return await input.isEnabled();
} }
async getFieldAttribute(fieldName: string, attribute: string): Promise<string | null> { 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); return await input.getAttribute(attribute);
} }
+11
View File
@@ -277,6 +277,8 @@ export default function ContactPage() {
<input type="hidden" name="_csrf" value={csrfToken} /> <input type="hidden" name="_csrf" value={csrfToken} />
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Input <Input
name="name"
data-testid="name-input"
label="姓名" label="姓名"
id="name" id="name"
placeholder="请输入您的姓名" placeholder="请输入您的姓名"
@@ -287,6 +289,8 @@ export default function ContactPage() {
error={errors.name} error={errors.name}
/> />
<Input <Input
name="phone"
data-testid="phone-input"
label="电话" label="电话"
id="phone" id="phone"
type="tel" type="tel"
@@ -299,6 +303,8 @@ export default function ContactPage() {
/> />
</div> </div>
<Input <Input
name="email"
data-testid="email-input"
label="邮箱" label="邮箱"
id="email" id="email"
type="email" type="email"
@@ -310,6 +316,8 @@ export default function ContactPage() {
error={errors.email} error={errors.email}
/> />
<Input <Input
name="subject"
data-testid="subject-input"
label="主题" label="主题"
id="subject" id="subject"
placeholder="请输入消息主题" placeholder="请输入消息主题"
@@ -320,6 +328,8 @@ export default function ContactPage() {
error={errors.subject} error={errors.subject}
/> />
<Textarea <Textarea
name="message"
data-testid="message-input"
label="留言内容" label="留言内容"
id="message" id="message"
placeholder="请输入您想咨询的内容" placeholder="请输入您想咨询的内容"
@@ -332,6 +342,7 @@ export default function ContactPage() {
/> />
<Button <Button
type="submit" type="submit"
data-testid="submit-button"
size="lg" size="lg"
className="w-full group mt-auto min-h-[52px] md:min-h-0" className="w-full group mt-auto min-h-[52px] md:min-h-0"
disabled={isSubmitting} disabled={isSubmitting}