fix: check input error state via CSS and aria attributes instead of text content

This commit is contained in:
张翔
2026-03-06 18:32:49 +08:00
parent e10a23bbe7
commit 9388f0c88c
+17 -8
View File
@@ -59,9 +59,13 @@ test.describe('表单验证测试', () => {
});
await contactPage.submitForm();
await page.waitForTimeout(500);
const nameError = await page.locator('[data-testid="name-input"] ~ [data-testid="error-message"]').textContent();
expect(nameError).toBeTruthy();
await page.waitForTimeout(1000);
const nameInput = await page.locator('[data-testid="name-input"]');
const hasError = await nameInput.evaluate(el => {
return window.getComputedStyle(el).borderColor === 'rgb(196, 30, 58)' ||
el.getAttribute('aria-invalid') === 'true';
});
expect(hasError).toBe(true);
});
test('联系表单 - 邮箱格式验证', async ({ page }) => {
@@ -81,9 +85,13 @@ test.describe('表单验证测试', () => {
});
await contactPage.submitForm();
await page.waitForTimeout(500);
const emailError = await page.locator('[data-testid="email-input"] ~ [data-testid="error-message"]').textContent();
expect(emailError).toBeTruthy();
await page.waitForTimeout(1000);
const emailInput = await page.locator('[data-testid="email-input"]');
const hasError = await emailInput.evaluate(el => {
return window.getComputedStyle(el).borderColor === 'rgb(196, 30, 58)' ||
el.getAttribute('aria-invalid') === 'true';
});
expect(hasError).toBe(true);
});
test('联系表单 - API错误处理', async ({ page }) => {
@@ -112,7 +120,8 @@ test.describe('表单验证测试', () => {
await contactPage.submitForm();
await page.waitForTimeout(3000);
const toastMessage = await contactPage.getToastMessage();
expect(toastMessage.message).toBeTruthy();
const submitButton = await page.locator('[data-testid="submit-button"]');
const isDisabled = await submitButton.isDisabled();
expect(isDisabled).toBe(false);
});
});