fix: error locators

Author: dougfabris

apps/meteor/tests/e2e/register.spec.ts

@@ -13,7 +13,8 @@ test.describe.parallel('register', () => {
 			poRegistration = new Registration(page);
 			poUtils = new Utils(page);
 		});
-		test('Successfully Registration flow', async ({ page }) => {
+
+		test('should complete the registration flow', async ({ page }) => {
 			await test.step('expect trigger a validation error if no data is provided on register', async () => {
 				await page.goto('/home');
 				await poRegistration.goToRegister.click();
@@ -44,24 +45,27 @@ test.describe.parallel('register', () => {
 			});
 		});
 
-		test.describe('Registration without Account confirmation password set', async () => {
+		test.describe('should complete registration without account confirmation password set', async () => {
 			test.beforeEach(async ({ api }) => {
 				const result = await api.post('/settings/Accounts_RequirePasswordConfirmation', { value: false });
 
 				await expect(result.ok()).toBeTruthy();
 			});
+
 			test.beforeEach(async ({ page }) => {
 				await page.goto('/home');
 				await poRegistration.goToRegister.click();
 			});
+
 			test.afterEach(async ({ api }) => {
 				const result = await api.post('/settings/Accounts_RequirePasswordConfirmation', {
 					value: true,
 				});
+
 				await expect(result.ok()).toBeTruthy();
 			});
 
-			test('expect to register a user without password confirmation', async () => {
+			test('should register a user without password confirmation', async () => {
 				await test.step('expect to not have password confirmation field', async () => {
 					await expect(poRegistration.inputPasswordConfirm).toBeHidden();
 				});
@@ -78,12 +82,13 @@ test.describe.parallel('register', () => {
 			});
 		});
 
-		test.describe('Registration with manually confirmation enabled', async () => {
+		test.describe('should complete registration with manually confirmation enabled', async () => {
 			test.beforeEach(async ({ api }) => {
 				const result = await api.post('/settings/Accounts_ManuallyApproveNewUsers', { value: true });
 
 				await expect(result.ok()).toBeTruthy();
 			});
+
 			test.beforeEach(async ({ page }) => {
 				poRegistration = new Registration(page);
 
@@ -98,7 +103,7 @@ test.describe.parallel('register', () => {
 				await expect(result.ok()).toBeTruthy();
 			});
 
-			test('it should expect to have a textbox asking the reason for the registration', async () => {
+			test('should expect to have a textbox asking the reason for the registration', async () => {
 				await test.step('expect to have a textbox asking the reason for the registration', async () => {
 					await expect(poRegistration.inputReason).toBeVisible();
 				});
@@ -120,7 +125,7 @@ test.describe.parallel('register', () => {
 				await api.post('/settings/Accounts_RegistrationForm', { value: 'Public' });
 			});
 
-			test('It should expect a message warning that registration is disabled', async ({ page }) => {
+			test('should expect a message warning that registration is disabled', async ({ page }) => {
 				await page.goto('/home');
 				await poRegistration.goToRegister.click();
 				await expect(poRegistration.registrationDisabledCallout).toBeVisible();
@@ -142,6 +147,7 @@ test.describe.parallel('register', () => {
 			poRegistration = new Registration(page);
 			poUtils = new Utils(page);
 		});
+
 		test('should not allow registration with an already registered email', async ({ page }) => {
 			const email = faker.internet.email();
 			await request.post('/api/v1/users.register').set('Content-Type', 'application/json').send({
@@ -150,6 +156,7 @@ test.describe.parallel('register', () => {
 				username: faker.internet.userName(),
 				pass: 'any_password',
 			});
+
 			await test.step('Attempt registration with the same email', async () => {
 				await page.goto('/home');
 				await poRegistration.goToRegister.click();
@@ -158,12 +165,9 @@ test.describe.parallel('register', () => {
 				await poRegistration.username.fill(faker.internet.userName());
 				await poRegistration.inputPassword.fill('any_password');
 				await poRegistration.inputPasswordConfirm.fill('any_password');
-
 				await poRegistration.btnRegister.click();
 
-				const errorMessageLocator = page.locator('span.rcx-field__error').filter({ hasText: 'Email already exists' });
-				await expect(errorMessageLocator).toBeVisible();
-				await expect(errorMessageLocator).toHaveText('Email already exists');
+				await expect(page.getByRole('alert').filter({ hasText: 'Email already exists' })).toBeVisible();
 			});
 		});
 	});
@@ -182,7 +186,7 @@ test.describe.parallel('register', () => {
 			await expect(result.ok()).toBeTruthy();
 		});
 
-		test('It should expect a message warning that registration is disabled', async ({ page }) => {
+		test('should expect a message warning that registration is disabled', async ({ page }) => {
 			await page.goto('/home');
 			await poRegistration.goToRegister.click();
 			await expect(poRegistration.registrationDisabledCallout).toBeVisible();
@@ -192,14 +196,15 @@ test.describe.parallel('register', () => {
 			test.beforeEach(async ({ page }) => {
 				await page.goto('/register/invalid_secret');
 			});
-			test('It should expect a invalid page informing that the secret password is invalid', async ({ page }) => {
+
+			test('should expect a invalid page informing that the secret password is invalid', async ({ page }) => {
 				await expect(page.locator('role=heading[level=2][name="The URL provided is invalid."]')).toBeVisible({
 					timeout: 10000,
 				});
 			});
 		});
 
-		test('It should register a user if the right secret password is provided', async ({ page }) => {
+		test('should register a user if the right secret password is provided', async ({ page }) => {
 			await page.goto('/register/secret');
 			await page.waitForSelector('role=form');
 			await poRegistration.inputName.fill(faker.person.firstName());
@@ -219,7 +224,7 @@ test.describe.parallel('register', () => {
 			await expect(result.ok()).toBeTruthy();
 		});
 
-		test('It should show an invalid page informing that the url is not valid', async ({ page }) => {
+		test('should show an invalid page informing that the url is not valid', async ({ page }) => {
 			await page.goto('/register/secret');
 			await page.waitForSelector('role=heading[level=2]');
 			await expect(page.locator('role=heading[level=2][name="The URL provided is invalid."]')).toBeVisible();

packages/web-ui-registration/src/RegisterForm.tsx

@@ -158,7 +158,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 							/>
 						</FieldRow>
 						{errors.name && (
-							<FieldError aria-live='assertive' id={`${nameId}-error`}>
+							<FieldError role='alert' id={`${nameId}-error`}>
 								{errors.name.message}
 							</FieldError>
 						)}
@@ -185,7 +185,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 							/>
 						</FieldRow>
 						{errors.email && (
-							<FieldError aria-live='assertive' id={`${emailId}-error`}>
+							<FieldError role='alert' id={`${emailId}-error`}>
 								{errors.email.message}
 							</FieldError>
 						)}
@@ -208,7 +208,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 							/>
 						</FieldRow>
 						{errors.username && (
-							<FieldError aria-live='assertive' id={`${usernameId}-error`}>
+							<FieldError role='alert' id={`${usernameId}-error`}>
 								{errors.username.message}
 							</FieldError>
 						)}
@@ -232,7 +232,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 							/>
 						</FieldRow>
 						{errors?.password && (
-							<FieldError aria-live='assertive' id={`${passwordId}-error`}>
+							<FieldError role='alert' id={`${passwordId}-error`}>
 								{errors.password.message}
 							</FieldError>
 						)}
@@ -260,7 +260,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 								/>
 							</FieldRow>
 							{errors.passwordConfirmation && (
-								<FieldError aria-live='assertive' id={`${passwordConfirmationId}-error`}>
+								<FieldError role='alert' id={`${passwordConfirmationId}-error`}>
 									{errors.passwordConfirmation.message}
 								</FieldError>
 							)}
@@ -284,7 +284,7 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 								/>
 							</FieldRow>
 							{errors.reason && (
-								<FieldError aria-live='assertive' id={`${reasonId}-error`}>
+								<FieldError role='alert' id={`${reasonId}-error`}>
 									{errors.reason.message}
 								</FieldError>
 							)}