Chore: Major refactors in pageobjects

.github/workflows/build_and_test.yml

@@ -681,7 +681,7 @@ jobs:
           docker logs presence --tail=50
 
           cd ./apps/meteor
-          npm run test:playwright
+          IS_EE=true npm run test:playwright
 
       - name: Store playwright test trace
         uses: actions/upload-artifact@v2

apps/meteor/app/ui-message/client/message.html

@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-own={{isOwnMessageAndNotSystem}} data-context={{actionContext}} class="message {{className}} {{ignoredClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}" data-qa-type="message">
+	<li data-qa-id="UserMessage" id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-own={{isOwnMessageAndNotSystem}} data-context={{actionContext}} class="message {{className}} {{ignoredClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}" data-alias="{{msg.alias}}" data-qa-type="message">
 		{{#if isThreadReply}}
 			{{> messageThread parentMessage=parentMessage msg=msg tmid=msg.tmid class=bodyClass following=msg.following}}
 			<div class="thread-replied js-open-thread">

apps/meteor/playwright.config.ts

@@ -1,33 +1,29 @@
 import { PlaywrightTestConfig } from '@playwright/test';
 
-import { verifyTestBaseUrl } from './tests/e2e/utils/configs/verifyTestBaseUrl';
+import * as constants from './tests/e2e/utils/constants';
 
-const { isLocal, baseURL } = verifyTestBaseUrl();
-
-const localInserts = isLocal
+const setupIsLocalhost = constants.IS_LOCALHOST
 	? {
-			globalSetup: require.resolve('./tests/e2e/utils/configs/setup.ts'),
-			globalTeardown: require.resolve('./tests/e2e/utils/configs/teardown.ts'),
+			globalSetup: require.resolve('./tests/e2e/configs/setup.ts'),
+			globalTeardown: require.resolve('./tests/e2e/configs/teardown.ts'),
 	  }
 	: { testIgnore: '00-wizard.spec.ts' };
 
-const config: PlaywrightTestConfig = {
-	...localInserts,
+export default {
+	...setupIsLocalhost,
 	use: {
 		headless: true,
 		viewport: { width: 1368, height: 768 },
 		ignoreHTTPSErrors: true,
 		video: 'retain-on-failure',
 		screenshot: 'only-on-failure',
 		trace: 'retain-on-failure',
-		baseURL,
+		baseURL: constants.BASE_URL,
 	},
 	outputDir: 'tests/e2e/test-failures',
 	reporter: process.env.CI ? 'github' : 'list',
 	testDir: 'tests/e2e',
 	retries: 3,
 	workers: 1,
 	timeout: 42 * 1000,
-};
-
-export default config;
+} as PlaywrightTestConfig;

apps/meteor/tests/e2e/00-wizard.spec.ts

@@ -1,23 +1,24 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
-import { VALID_EMAIL, adminLogin } from './utils/mocks/userAndPasswordMock';
+import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { setupWizardStepRegex } from './utils/mocks/urlMock';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';
 import { LoginPage, SetupWizard } from './pageobjects';
 
 test.describe('[Wizard]', () => {
 	let setupWizard: SetupWizard;
 	let loginPage: LoginPage;
+	let page: Page;
 
-	test.beforeEach(async ({ page }) => {
+	test.beforeEach(async ({ browser }) => {
+		page = await browser.newPage();
 		setupWizard = new SetupWizard(page);
 		loginPage = new LoginPage(page);
 	});
 
 	test.describe('[Step 2]', async () => {
-		test.beforeEach(async ({ baseURL }) => {
-			const baseUrl = baseURL;
-			await setupWizard.goto(baseUrl as string);
+		test.beforeEach(async () => {
+			await page.goto('/');
 			await loginPage.doLogin(adminLogin, false);
 		});
 
@@ -33,7 +34,7 @@ test.describe('[Wizard]', () => {
 
 	test.describe('[Step 3]', async () => {
 		test.beforeEach(async () => {
-			await setupWizard.goto('');
+			await page.goto('');
 			await loginPage.doLogin(adminLogin, false);
 			await setupWizard.stepTwoSuccess();
 		});
@@ -51,7 +52,7 @@ test.describe('[Wizard]', () => {
 		});
 
 		test('expect enable "Register" button when email is valid and terms checked', async () => {
-			await setupWizard.registeredServer.type(VALID_EMAIL);
+			await setupWizard.registeredServer.type('mail@mail.com');
 			await setupWizard.agreementField.click();
 			await expect(setupWizard.registerButton).toBeEnabled();
 		});
@@ -63,7 +64,7 @@ test.describe('[Wizard]', () => {
 
 	test.describe('[Final Step]', async () => {
 		test.beforeEach(async () => {
-			await setupWizard.goto('');
+			await page.goto('');
 			await loginPage.doLogin(adminLogin, false);
 			await setupWizard.stepTwoSuccess();
 			await setupWizard.stepThreeSuccess();
@@ -76,7 +77,7 @@ test.describe('[Wizard]', () => {
 
 		test('expect confirm standalone', async () => {
 			await setupWizard.goToWorkspace.click();
-			await setupWizard.waitForSelector(HOME_SELECTOR);
+			await page.waitForSelector(HOME_SELECTOR);
 		});
 	});
 });

apps/meteor/tests/e2e/01-forgot-password.spec.ts

@@ -1,41 +1,40 @@
 import { test, expect } from '@playwright/test';
 
 import { Global, LoginPage } from './pageobjects';
-import { VALID_EMAIL, INVALID_EMAIL, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Forgot Password]', () => {
 	let loginPage: LoginPage;
 	let global: Global;
 
-	test.beforeEach(async ({ page, baseURL }) => {
+	test.beforeEach(async ({ page }) => {
 		loginPage = new LoginPage(page);
 		global = new Global(page);
-		const baseUrl = baseURL as string;
-		await loginPage.goto(baseUrl);
-		await loginPage.gotToForgotPassword();
+
+		await page.goto('/');
+		await loginPage.btnForgotPassword.click();
 	});
 
 	test('expect be required', async () => {
-		loginPage.submit();
+		loginPage.btnSubmit.click();
 
 		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect invalid for email without domain', async () => {
-		await loginPage.emailField.type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
-		await loginPage.submit();
+		await loginPage.emailField.type('mail');
+		await loginPage.btnSubmit.click();
 		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect be invalid for email with invalid domain', async () => {
-		await loginPage.emailField.type(INVALID_EMAIL);
-		await loginPage.submit();
+		await loginPage.emailField.type('mail@mail');
+		await loginPage.btnSubmit.click();
 		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect user type a valid email', async () => {
-		await loginPage.emailField.type(VALID_EMAIL);
-		await loginPage.submit();
+		await loginPage.emailField.type('mail@mail.com');
+		await loginPage.btnSubmit.click();
 		await expect(global.getToastBarSuccess).toBeVisible();
 	});
 });

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

@@ -1,27 +1,39 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 
-import { registerUser, WRONG_PASSWORD } from './utils/mocks/userAndPasswordMock';
+import { registerUser } from './utils/mocks/userAndPasswordMock';
 import { LoginPage } from './pageobjects';
 
 test.describe('[Register]', () => {
 	let loginPage: LoginPage;
 
-	test.beforeEach(async ({ page, baseURL }) => {
-		const URL = baseURL as string;
+	test.beforeEach(async ({ page }) => {
 		loginPage = new LoginPage(page);
-		await loginPage.goto(URL);
+		await page.goto('/');
 	});
 
 	test('expect user click in register button without data', async () => {
-		await loginPage.registerFail();
+		await loginPage.btnRegister.click();
+		await loginPage.btnSubmit.click();
+
+		await expect(loginPage.nameInvalidText).toBeVisible();
+		await expect(loginPage.emailInvalidText).toBeVisible();
+		await expect(loginPage.passwordInvalidText).toBeVisible();
 	});
 
 	test('expect user click in register button with different password', async () => {
-		await loginPage.registerFailWithDifferentPassword(registerUser, WRONG_PASSWORD);
+		await loginPage.btnRegister.click();
+		await loginPage.passwordField.type(registerUser.password);
+		await loginPage.emailField.type(registerUser.email);
+		await loginPage.nameField.type(registerUser.name);
+		await loginPage.confirmPasswordField.type('wrong_password');
+
+		await loginPage.btnSubmit.click();
+		await expect(loginPage.confirmPasswordInvalidText).toBeVisible();
+		await expect(loginPage.confirmPasswordInvalidText).toHaveText('The password confirmation does not match password');
 	});
 
 	test('expect new user is created', async () => {
-		await loginPage.gotToRegister();
+		await loginPage.btnRegister.click();
 		await loginPage.registerNewUser(registerUser);
 	});
 });

apps/meteor/tests/e2e/03-login.spec.ts

@@ -1,18 +1,19 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
 import { validUser } from './utils/mocks/userAndPasswordMock';
 import { Global, LoginPage } from './pageobjects';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';
 
 test.describe('[Login]', () => {
+	let page: Page;
 	let loginPage: LoginPage;
 	let global: Global;
 
-	test.beforeEach(async ({ page, baseURL }) => {
-		const baseUrl = baseURL;
+	test.beforeEach(async ({ browser }) => {
+		page = await browser.newPage();
 		loginPage = new LoginPage(page);
 		global = new Global(page);
-		await loginPage.goto(baseUrl as string);
+		await page.goto('/');
 	});
 
 	test('expect user write a password incorrectly', async () => {
@@ -26,6 +27,6 @@ test.describe('[Login]', () => {
 
 	test('expect user make login', async () => {
 		await loginPage.doLogin(validUser);
-		await loginPage.waitForSelector(HOME_SELECTOR);
+		await page.waitForSelector(HOME_SELECTOR);
 	});
 });

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

@@ -18,14 +18,14 @@ test.describe('[Main Elements Render]', function () {
 		mainContent = new MainContent(page);
 		flexTab = new FlexTab(page);
 
-		await loginPage.goto('/');
+		await page.goto('/');
 		await loginPage.doLogin(adminLogin);
 	});
 
 	test.describe('[Side Nav Bar]', () => {
 		test.describe('[Render]', () => {
 			test('expect show the new channel button', async () => {
-				await expect(sideNav.newChannelBtnToolbar).toBeVisible();
+				await expect(sideNav.btnSidebarCreate).toBeVisible();
 			});
 
 			test('expect show "general" channel', async () => {

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

@@ -1,27 +1,27 @@
 import { test } from '@playwright/test';
 import { faker } from '@faker-js/faker';
 
-import { LoginPage, ChannelCreation } from './pageobjects';
+import { LoginPage, SideNav } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Channel]', async () => {
-	let channelCreation: ChannelCreation;
+	let sideNav: SideNav;
 	let loginPage: LoginPage;
 
 	test.beforeAll(async ({ browser }) => {
 		const page = await browser.newPage();
 		loginPage = new LoginPage(page);
-		channelCreation = new ChannelCreation(page);
+		sideNav = new SideNav(page);
 
-		await loginPage.goto('/');
+		await page.goto('/');
 		await loginPage.doLogin(adminLogin);
 	});
 
 	test('expect create private channel', async () => {
-		await channelCreation.doCreateChannel(faker.animal.type() + Date.now(), true);
+		await sideNav.doCreateChannel(faker.animal.type() + Date.now(), true);
 	});
 
 	test('expect create public channel', async () => {
-		await channelCreation.doCreateChannel(faker.animal.type() + Date.now());
+		await sideNav.doCreateChannel(faker.animal.type() + Date.now());
 	});
 });

apps/meteor/tests/e2e/06-messaging.spec.ts

@@ -16,7 +16,7 @@ const createBrowserContextForChat = async (
 	const mainContent = new MainContent(page);
 	const sideNav = new SideNav(page);
 
-	await loginPage.goto(baseURL);
+	await page.goto(baseURL);
 	await loginPage.doLogin(validUserInserted);
 
 	return { mainContent, sideNav };
@@ -27,17 +27,15 @@ test.describe('[Messaging]', () => {
 	let mainContent: MainContent;
 	let sideNav: SideNav;
 	let flexTab: FlexTab;
-	test.beforeAll(async ({ browser, baseURL }) => {
-		const context = await browser.newContext();
-		const page = await context.newPage();
+	test.beforeAll(async ({ browser }) => {
+		const page = await browser.newPage();
 
 		loginPage = new LoginPage(page);
 		mainContent = new MainContent(page);
 		sideNav = new SideNav(page);
 		flexTab = new FlexTab(page);
 
-		await loginPage.goto(baseURL as string);
-
+		await page.goto('/');
 		await loginPage.doLogin(adminLogin);
 	});
 

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

@@ -8,17 +8,14 @@ test.describe('[Emoji]', () => {
 	let mainContent: MainContent;
 	let sideNav: SideNav;
 
-	test.beforeAll(async ({ browser, baseURL }) => {
-		const context = await browser.newContext();
-		const page = await context.newPage();
-		const URL = baseURL as string;
+	test.beforeAll(async ({ browser }) => {
+		const page = await browser.newPage();
 		loginPage = new LoginPage(page);
-		await loginPage.goto(URL);
-
-		await loginPage.doLogin(adminLogin);
 		sideNav = new SideNav(page);
 		mainContent = new MainContent(page);
 
+		await page.goto('/');
+		await loginPage.doLogin(adminLogin);
 		await sideNav.doOpenChat('general');
 	});