Chore: Tests with Playwright (task: ROC-66, Intermittent resolution in tests)

apps/meteor/.gitignore

@@ -85,3 +85,4 @@ coverage
 .nyc_output
 /data
 tests/e2e/test-failures/
+out.txt

apps/meteor/client/components/UserCard/UserCard.tsx

@@ -70,7 +70,7 @@ const UserCard = forwardRef(function UserCard(
 	const t = useTranslation();
 
 	return (
-		<UserCardContainer className={className} ref={ref} style={style}>
+		<UserCardContainer data-qa='UserCard' className={className} ref={ref} style={style}>
 			<Box>
 				{!username ? <Skeleton width='x124' height='x124' variant='rect' /> : <UserAvatar username={username} etag={etag} size='x124' />}
 				{actions && (

apps/meteor/client/views/account/AccountProfilePage.js

@@ -228,7 +228,7 @@ const AccountProfilePage = () => {
 					<Button primary danger disabled={!hasUnsavedChanges} onClick={reset}>
 						{t('Reset')}
 					</Button>
-					<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
+					<Button data-qa='AccountProfilePageSaveButton' primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx

@@ -43,7 +43,7 @@ const AnnouncementComponent: FC<AnnouncementComponentParams> = ({ children, onCl
 			textAlign='center'
 			className={announcementBar}
 		>
-			<Box withTruncatedText w='none'>
+			<Box withTruncatedText w='none' data-qa='AnnouncementAnnoucementComponent'>
 				{children}
 			</Box>
 		</Box>

apps/meteor/client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js

@@ -25,7 +25,7 @@ export const MemberItem = ({ _id, status, name, username, onClickView, style, ri
 			<Option.Column>
 				<ReactiveUserStatus uid={_id} />
 			</Option.Column>
-			<OptionContent>
+			<OptionContent data-qa={`MemberItem-${username}`}>
 				{name} <Option.Description>({username})</Option.Description>
 			</OptionContent>
 			<Option.Menu onClick={onClick}>

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js

@@ -102,7 +102,7 @@ function UserInfo({
 					{name && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Full_Name')}</InfoPanel.Label>
-							<InfoPanel.Text>{name}</InfoPanel.Text>
+							<InfoPanel.Text data-qa='UserInfoUserName'>{name}</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 

apps/meteor/client/views/room/contextualBar/UserInfo/actions/UserActions.js

@@ -22,6 +22,7 @@ const UserActions = ({ user, rid, backToList }) => {
 				renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
 				flexShrink={0}
 				options={menuOptions}
+				data-qa='UserUserInfo-menu'
 			/>
 		);
 	}, [menuOptions]);

apps/meteor/tests/e2e/04-main-elements-render.spec.ts

@@ -137,15 +137,6 @@ test.describe('[Main Elements Render]', function () {
 			test('expect show the emoji button', async () => {
 				await expect(mainContent.emojiBtn()).toBeVisible();
 			});
-			// TODO: Verify why is intermitent
-			test.skip('expect show the last message', async () => {
-				await expect(mainContent.lastMessage()).toBeVisible();
-			});
-			// TODO: Verify why is intermitent
-			test.skip('expect be that the last message is from the logged user', async () => {
-				await expect(mainContent.lastMessageUser()).toBeVisible();
-			});
-
 			test('expect not show the Admin tag', async () => {
 				await expect(mainContent.lastMessageUserTag()).not.toBeVisible();
 			});
@@ -203,12 +194,12 @@ test.describe('[Main Elements Render]', function () {
 					await flexTab.operateFlexTab('members', false);
 				});
 
-				test('expect show the members tab button', async () => {
-					await expect(flexTab.membersTab()).toBeVisible();
+				test('expect show the members tab button', () => {
+					expect(flexTab.membersTab().isVisible()).toBeTruthy();
 				});
 
 				test('expect show the members content', async () => {
-					await expect(flexTab.membersTabContent()).toBeVisible();
+					expect(flexTab.membersTabContent().isVisible()).toBeTruthy();
 				});
 			});
 

apps/meteor/tests/e2e/05-channel-creation.spec.ts

@@ -34,8 +34,7 @@ test.describe('[Channel]', async () => {
 			await channelCreation.createChannel(channelName, false);
 		});
 	});
-	// TODO: Verify why is intermitent
-	test.skip('expect send message to channel created', async () => {
+	test('expect send message to channel created', async () => {
 		await channelCreation.sendMessage(ROCKET_CAT, HELLO);
 	});
 });

apps/meteor/tests/e2e/07-emoji.spec.ts

@@ -107,7 +107,7 @@ test.describe('[Emoji]', function () {
 				await mainContent.sendBtn().click();
 			});
 
-			test.skip('expect be that the value on the message is the same as the emoji clicked', async () => {
+			test('expect be that the value on the message is the same as the emoji clicked', async () => {
 				await expect(mainContent.lastMessage()).toContainText('😀');
 			});
 		});
@@ -141,19 +141,17 @@ test.describe('[Emoji]', function () {
 				await mainContent.sendBtn().click();
 			});
 
-			test.skip('expect be that the value on the message is the same as the emoji clicked', async () => {
+			test('expect be that the value on the message is the same as the emoji clicked', async () => {
 				await expect(mainContent.lastMessage()).toContainText('😃');
 			});
 		});
 
 		test.describe("send texts and make sure they're not converted to emojis:", () => {
-			// TODO: Verify why is intermitent
-			test.skip('should render numbers', async () => {
+			test('should render numbers', async () => {
 				await mainContent.sendMessage('0 1 2 3 4 5 6 7 8 9');
 				await mainContent.waitForLastMessageEqualsHtml('0 1 2 3 4 5 6 7 8 9');
 			});
-			// TODO: Verify why is intermitent
-			test.skip('should render special characters', async () => {
+			test('should render special characters', async () => {
 				await mainContent.sendMessage('# * ® © ™');
 				await mainContent.waitForLastMessageEqualsHtml('# * ® © ™');
 			});

apps/meteor/tests/e2e/09-channel.spec.ts

@@ -13,7 +13,7 @@ import { targetUser } from './utils/mocks/interations';
 
 let hasUserAddedInChannel = false;
 
-test.describe.serial('[Channel]', () => {
+test.describe('[Channel]', () => {
 	let flexTab: FlexTab;
 	let loginPage: LoginPage;
 	let mainContent: MainContent;
@@ -36,7 +36,6 @@ test.describe.serial('[Channel]', () => {
 		if (!publicChannelCreated) {
 			await sideNav.createChannel(publicChannelName, false);
 			await setPublicChannelCreated(true);
-			console.log('public channel not found, creating one...');
 		}
 		await sideNav.openChannel('general');
 	});
@@ -96,9 +95,6 @@ test.describe.serial('[Channel]', () => {
 		});
 	});
 
-	/*
-	 * Skipped tests below
-	 * */
 	test.describe('[Usage]', () => {
 		test.beforeAll(async () => {
 			await sideNav.openChannel(publicChannelName);
@@ -170,17 +166,16 @@ test.describe.serial('[Channel]', () => {
 					}
 				});
 
-				test.skip('expect edit the announcement input', async () => {
+				test('expect edit the announcement input', async () => {
 					await flexTab.editAnnouncementTextInput().type('ANNOUNCEMENT EDITED');
 				});
 
-				test.skip('expect save the announcement', async () => {
+				test('expect save the announcement', async () => {
 					await flexTab.editNameSave().click();
 				});
 
-				// FIXME: breaking in CI
-				test.skip('expect show the new announcement', async () => {
-					await expect(flexTab.thirdSetting('ANNOUNCEMENT EDITED')).toHaveText('ANNOUNCEMENT EDITED');
+				test('expect show the new announcement', async () => {
+					await expect(flexTab.thirdSetting()).toHaveText('ANNOUNCEMENT EDITED');
 				});
 			});
 
@@ -264,11 +259,11 @@ test.describe.serial('[Channel]', () => {
 					}
 				});
 
-				test.skip('expect the last message should be a subscription role added', async () => {
+				test('expect the last message should be a subscription role added', async () => {
 					await expect(mainContent.lastMessageRoleAdded()).toBeVisible();
 				});
 
-				test.skip('expect show the target username in owner add message', async () => {
+				test('expect show the target username in owner add message', async () => {
 					await expect(mainContent.lastMessageRoleAdded()).toContainText(targetUser);
 				});
 			});
@@ -289,13 +284,12 @@ test.describe.serial('[Channel]', () => {
 					}
 					await flexTab.operateFlexTab('members', false);
 				});
-				// FIXME: breaking in CI
-				test.skip('expect set rocket cat as moderator', async () => {
+
+				test('expect set rocket cat as moderator', async () => {
 					await flexTab.setUserModerator(targetUser);
 				});
 
-				// FIXME: not finding element in CI
-				test.skip('expect be that the last message is a subscription role added', async () => {
+				test('expect be that the last message is a subscription role added', async () => {
 					await expect(mainContent.lastMessageRoleAdded()).toBeVisible();
 				});
 			});

apps/meteor/tests/e2e/10-user-preferences.spec.ts

@@ -1,13 +1,18 @@
 import { test, expect } from '@playwright/test';
+import faker from '@faker-js/faker';
 
 import MainContent from './utils/pageobjects/MainContent';
 import SideNav from './utils/pageobjects/SideNav';
 import LoginPage from './utils/pageobjects/LoginPage';
 import FlexTab from './utils/pageobjects/FlexTab';
 import PreferencesMainContent from './utils/pageobjects/PreferencesMainContent';
-import { adminLogin, adminRegister } from './utils/mocks/userAndPasswordMock';
+import { adminLogin } from './utils/mocks/userAndPasswordMock';
+import { clearMessages } from './utils/helpers/clearMessages';
 
-test.describe('[User Preferences]', function () {
+test.describe('[User Preferences]', () => {
+	test.beforeAll(async () => {
+		await clearMessages(['GENERAL']);
+	});
 	test.describe('default', () => {
 		let flexTab: FlexTab;
 		let loginPage: LoginPage;
@@ -26,6 +31,7 @@ test.describe('[User Preferences]', function () {
 			sideNav = new SideNav(page);
 			mainContent = new MainContent(page);
 			preferencesMainContent = new PreferencesMainContent(page);
+			flexTab = new FlexTab(page);
 
 			await sideNav.sidebarUserMenu().click();
 			await sideNav.account().click();
@@ -66,20 +72,23 @@ test.describe('[User Preferences]', function () {
 			});
 		});
 
-		test.describe('user info change:', () => {
+		test.describe('[User Info Change]', () => {
+			const newName = faker.name.findName();
+			const newUserName = `${faker.name.lastName()}${faker.name.firstName()}`;
+
 			test('expect click on the profile link', async () => {
 				await sideNav.profile().click();
 			});
 
 			test('expect change the name field', async () => {
-				await preferencesMainContent.changeRealName(`Edited${adminRegister.name}${Date.now()}`);
+				await preferencesMainContent.changeRealName(newName);
 			});
 
 			test('expect change the Username field', async () => {
-				await preferencesMainContent.changeUsername(`Edited${adminRegister.name}${Date.now()}`);
+				await preferencesMainContent.changeUsername(newUserName);
 			});
-			// TODO: verify why intermitent
-			test.skip('expect save the settings', async () => {
+
+			test('expect save the settings', async () => {
 				await preferencesMainContent.saveChanges();
 			});
 
@@ -88,23 +97,23 @@ test.describe('[User Preferences]', function () {
 				await sideNav.getChannelFromList('general').scrollIntoViewIfNeeded();
 				await sideNav.getChannelFromList('general').click();
 			});
-			// TODO: Verify why is intermitent
-			test.skip('expect send a message to be tested', async () => {
+
+			test('send message with different user name', async () => {
 				await mainContent.sendMessage('HI');
-				await mainContent.waitForLastMessageEqualsText('HI');
 			});
-			// TODO: Verify why is intermitent
-			test.skip('expect be that the name on the last message is the edited one', async () => {
-				await expect(mainContent.lastMessageUser()).toContainText(`Edited${adminRegister.name}`);
+
+			test('expect be that the name on the last message is the edited one', async () => {
+				await expect(mainContent.lastMessageUser()).toContainText(newUserName);
 			});
-			// TODO: Verify why is intermitent
-			test.skip('expect be that the user name on the members flex tab is the edited one', async () => {
-				mainContent.lastMessageUser().click();
-				await expect(flexTab.memberUserName()).toContainText(`Edited${adminRegister.name}`);
+
+			test('expect be that the user name on the members flex tab is the edited one', async () => {
+				await mainContent.lastMessageUser().click();
+				await expect(mainContent.userCard()).toBeVisible();
 			});
-			// TODO: Verify why is intermitent
-			test.skip('expect that the real name on the members flex tab is the edited one', async () => {
-				await expect(flexTab.memberRealName()).toContainText(`Edited${adminRegister.name}`);
+
+			test('expect that the real name on the members flex tab is the edited one', async () => {
+				await mainContent.viewUserProfile().click();
+				await expect(flexTab.memberRealName()).toHaveText(newUserName);
 			});
 		});
 	});

apps/meteor/tests/e2e/utils/helpers/clearMessages.ts

@@ -0,0 +1,11 @@
+import { MongoHelper } from './MongoHelper';
+
+const mongoBaseUrl = process.env.MONGO_URL
+	? `${process.env.MONGO_URL}?retryWrites=false`
+	: 'mongodb://localhost:3001/meteor?retryWrites=false';
+export const clearMessages = async (channelIds: string[]): Promise<void> => {
+	await MongoHelper.connect(mongoBaseUrl);
+	const messageCollection = await MongoHelper.getCollection('rocketchat_message');
+	await messageCollection.deleteMany({ rid: { $in: channelIds } });
+	await MongoHelper.disconnect();
+};

apps/meteor/tests/e2e/utils/pageobjects/ChannelCreation.ts

@@ -63,7 +63,7 @@ export default class ChannelCreation extends BasePage {
 
 	public async sendMessage(targetUser: string, message: string): Promise<void> {
 		await this.searchChannel().click();
-		await this.searchChannelInput().type(targetUser);
+		await this.searchChannelInput().type(targetUser, { delay: 200 });
 		await this.keyboardPress(ENTER);
 
 		await this.textArea().type(message);

apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts

@@ -179,7 +179,7 @@ class FlexTab extends BasePage {
 	}
 
 	public memberRealName(): Locator {
-		return this.getPage().locator('.info p');
+		return this.getPage().locator('[data-qa="UserInfoUserName"]');
 	}
 
 	// Search Tab
@@ -270,8 +270,8 @@ class FlexTab extends BasePage {
 		return this.getPage().locator(`//header//*[contains(text(), "${topic}")]`);
 	}
 
-	public thirdSetting(announcement: string): Locator {
-		return this.getPage().locator(`//main//div[contains(@class, "messages-container-main")]//div[contains(text(), "${announcement}")]`);
+	public thirdSetting(): Locator {
+		return this.getPage().locator('[data-qa="AnnouncementAnnoucementComponent"] div:nth-child(1)');
 	}
 
 	public fourthSetting(): Locator {
@@ -380,7 +380,7 @@ class FlexTab extends BasePage {
 	}
 
 	public getUserEl(username: string): Locator {
-		return this.getPage().locator(`//li[@data-username="${username}"]`);
+		return this.getPage().locator(`[data-qa="MemberItem-${username}"]`);
 	}
 
 	public addUserTable(): Locator {
@@ -404,9 +404,7 @@ class FlexTab extends BasePage {
 	}
 
 	public userMoreActions(): Locator {
-		return this.getPage().locator(
-			'//main//aside//button[contains(text(), "Direct Message")]/..//i[contains(@class, "rcx-icon--name-kebab")]/..',
-		);
+		return this.getPage().locator('[data-qa="UserUserInfo-menu"]');
 	}
 
 	public async setUserOwner(user: string): Promise<void> {
@@ -445,7 +443,7 @@ class FlexTab extends BasePage {
 		await this.archiveSave().click();
 	}
 
-	public async addPeopleToChannel(user: any): Promise<void> {
+	public async addPeopleToChannel(user: string): Promise<void> {
 		await this.addUserButton().click();
 		await this.chooseUserSearch().type(user);
 		await this.getPage().waitForTimeout(3000);