novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add data-testid attributes for contact page elements

Browse Source
This commit is contained in:
张翔
2026-03-05 21:49:12 +08:00
parent 2f6f6a6aca
commit 318081a62a
2 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/src/pages/ContactPage.ts
+24 -21
View File
@@ -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> {
src/app/(marketing)/contact/page.tsx
+10 -10
View File
@@ -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>