Chore: migrate from cypress to pw 14-setting-permission (#25523)

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx

@@ -57,10 +57,20 @@ const PermissionsTable = (): ReactElement => {
 				</Page.Header>
 				<Margins blockEnd='x16'>
 					<Tabs>
-						<Tabs.Item selected={type === 'permissions'} onClick={handlePermissionsTab} disabled={!canViewPermission}>
+						<Tabs.Item
+							data-qa='PermissionTable-Permissions'
+							selected={type === 'permissions'}
+							onClick={handlePermissionsTab}
+							disabled={!canViewPermission}
+						>
 							{t('Permissions')}
 						</Tabs.Item>
-						<Tabs.Item selected={type === 'settings'} onClick={handleSettingsTab} disabled={!canViewSettingPermission}>
+						<Tabs.Item
+							data-qa='PermissionTable-Settings'
+							selected={type === 'settings'}
+							onClick={handleSettingsTab}
+							disabled={!canViewSettingPermission}
+						>
 							{t('Settings')}
 						</Tabs.Item>
 					</Tabs>

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx

@@ -16,7 +16,15 @@ const PermissionsTableFilter = ({ onChange }: { onChange: (debouncedFilter: stri
 		setFilter(value);
 	});
 
-	return <TextInput value={filter} onChange={handleFilter} placeholder={t('Search')} flexGrow={0} />;
+	return (
+		<TextInput
+			data-qa='PermissionTable-PermissionsTableFilter'
+			value={filter}
+			onChange={handleFilter}
+			placeholder={t('Search')}
+			flexGrow={0}
+		/>
+	);
 };
 
 export default PermissionsTableFilter;

apps/meteor/playwright.config.ts

@@ -9,12 +9,13 @@ const config: PlaywrightTestConfig = {
 	use: {
 		baseURL: process.env.ENTERPRISE ? 'http://localhost:4000' : 'http://localhost:3000',
 		headless: true,
-		viewport: { width: 1024, height: 768 },
+		viewport: { width: 1368, height: 768 },
 		ignoreHTTPSErrors: true,
 		video: 'retain-on-failure',
 		screenshot: 'only-on-failure',
 		trace: 'retain-on-failure',
 	},
 	testDir: 'tests/e2e',
+	retries: 3,
 };
 export default config;

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

@@ -64,9 +64,9 @@ test.describe('[Messaging]', () => {
 		test.describe('[Public channel]', async () => {
 			test.beforeAll(async ({ browser, baseURL }) => {
 				anotherContext = await createBrowserContextForChat(browser, baseURL as string);
-				await anotherContext.sideNav.findFindForChat('public channel');
+				await anotherContext.sideNav.findForChat('public channel');
 				await anotherContext.mainContent.sendMessage('Hello');
-				await sideNav.findFindForChat('public channel');
+				await sideNav.findForChat('public channel');
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
@@ -84,9 +84,9 @@ test.describe('[Messaging]', () => {
 		test.describe('[Private channel]', async () => {
 			test.beforeAll(async ({ browser, baseURL }) => {
 				anotherContext = await createBrowserContextForChat(browser, baseURL as string);
-				await anotherContext.sideNav.findFindForChat('private channel');
+				await anotherContext.sideNav.findForChat('private channel');
 				await anotherContext.mainContent.sendMessage('Hello');
-				await sideNav.findFindForChat('private channel');
+				await sideNav.findForChat('private channel');
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
@@ -104,9 +104,9 @@ test.describe('[Messaging]', () => {
 		test.describe('[Direct Message]', async () => {
 			test.beforeAll(async ({ browser, baseURL }) => {
 				anotherContext = await createBrowserContextForChat(browser, baseURL as string);
-				await anotherContext.sideNav.findFindForChat('rocketchat.internal.admin.test');
+				await anotherContext.sideNav.findForChat('rocketchat.internal.admin.test');
 				await anotherContext.mainContent.sendMessage('Hello');
-				await sideNav.findFindForChat('user.name.test');
+				await sideNav.findForChat('user.name.test');
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {

apps/meteor/tests/e2e/14-setting-permissions.spec.ts

@@ -0,0 +1,116 @@
+import { test, expect } from '@playwright/test';
+import faker from '@faker-js/faker';
+
+import LoginPage from './utils/pageobjects/LoginPage';
+import { adminLogin, validUserInserted } from './utils/mocks/userAndPasswordMock';
+import Administration from './utils/pageobjects/Administration';
+import SideNav from './utils/pageobjects/SideNav';
+
+test.describe('[Rocket.Chat Settings based permissions]', () => {
+	let admin: Administration;
+	let sideNav: SideNav;
+	let loginPage: LoginPage;
+	const newHomeTitle = faker.animal.type();
+	test.beforeAll(async ({ browser }) => {
+		const context = await browser.newContext();
+		const page = await context.newPage();
+		sideNav = new SideNav(page);
+		admin = new Administration(page);
+		loginPage = new LoginPage(page);
+	});
+
+	test.describe('[Give User Permissions]', async () => {
+		test.beforeAll(async () => {
+			await loginPage.goto('/');
+			await loginPage.login(adminLogin);
+			await sideNav.sidebarUserMenu().click();
+			await sideNav.admin().click();
+			await admin.permissionsLink().click();
+		});
+
+		test.afterAll(async () => {
+			await loginPage.goto('/home');
+			await loginPage.logout();
+		});
+
+		test('Set permission for user to manage settings', async () => {
+			await admin.rolesSettingsFindInput().type('settings');
+			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
+			const isOptionChecked = await admin.getPage().isChecked('table tbody tr:first-child td:nth-child(6) label input');
+			if (!isOptionChecked) {
+				await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
+			}
+		});
+
+		test('Set Permission for user to change title page title', async () => {
+			await admin.rolesSettingsTab().click();
+			await admin.rolesSettingsFindInput().fill('Layout');
+			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
+			const isOptionChecked = await admin.getPage().isChecked('table tbody tr:first-child td:nth-child(6) label input');
+			const changeHomeTitleSelected = await admin.getPage().isChecked('table tbody tr:nth-child(3) td:nth-child(6) label input');
+			if (!isOptionChecked && !changeHomeTitleSelected) {
+				await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
+				await admin.getPage().click('table tbody tr:nth-child(3) td:nth-child(6) label');
+			}
+		});
+	});
+
+	test.describe('Test new user setting permissions', async () => {
+		test.beforeAll(async () => {
+			await loginPage.goto('/');
+			await loginPage.login(validUserInserted);
+			await sideNav.sidebarUserMenu().click();
+			await sideNav.admin().click();
+			await admin.settingsLink().click();
+			await admin.layoutSettingsButton().click();
+		});
+		test.afterAll(async () => {
+			await loginPage.goto('/home');
+			await loginPage.logout();
+		});
+
+		test('expect new permissions is enabled for user', async () => {
+			await admin.homeTitleInput().fill(newHomeTitle);
+			await admin.buttonSave().click();
+		});
+	});
+
+	test.describe('[Verify settings change and cleanup]', async () => {
+		test.beforeAll(async () => {
+			await loginPage.goto('/');
+			await loginPage.login(adminLogin);
+			await sideNav.sidebarUserMenu().click();
+			await sideNav.admin().click();
+			await admin.settingsLink().click();
+			await admin.settingsSearch().type('Layout');
+			await admin.layoutSettingsButton().click();
+		});
+
+		test.afterAll(async () => {
+			await loginPage.goto('/home');
+			await loginPage.logout();
+		});
+
+		test('New settings value visible for admin as well', async () => {
+			await admin.getPage().locator('[data-qa-section="Content"]').click();
+			await admin.homeTitleInput().waitFor();
+			const text = await admin.homeTitleInput().inputValue();
+			await admin.generalHomeTitleReset().click();
+			await admin.buttonSave().click();
+			expect(text).toEqual(newHomeTitle);
+		});
+
+		test('Clear all user permissions', async () => {
+			await admin.permissionsLink().click();
+			await admin.rolesSettingsFindInput().type('settings');
+			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
+			await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
+
+			await admin.rolesSettingsTab().click();
+			await admin.rolesSettingsFindInput().fill('Layout');
+			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
+			await admin.getPage().click('table tbody tr td:nth-child(6) label');
+			await admin.getPage().click('table tbody tr:nth-child(3) td:nth-child(6) label');
+		});
+	});
+});

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

@@ -47,6 +47,10 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-id="General"] button');
 	}
 
+	public layoutSettingsButton(): Locator {
+		return this.getPage().locator('[data-qa-id="Layout"] button');
+	}
+
 	public permissionsLink(): Locator {
 		return this.getPage().locator('.flex-nav [href="/admin/permissions"]');
 	}
@@ -168,15 +172,19 @@ export default class Administration extends BasePage {
 	}
 
 	public rolesSettingsFindInput(): Locator {
-		return this.getPage().locator('input#permissions-filter');
+		return this.getPage().locator('[data-qa="PermissionTable-PermissionsTableFilter"]');
 	}
 
 	public rolesSettingsTab(): Locator {
-		return this.getPage().locator('button[data-value="settings"]');
+		return this.getPage().locator('[data-qa="PermissionTable-Settings"]');
 	}
 
 	public rolesPermissionsTab(): Locator {
-		return this.getPage().locator('button[data-value="permissions"]');
+		return this.getPage().locator('[data-qa="PermissionTable-Permissions"]');
+	}
+
+	public homeTitleInput(): Locator {
+		return this.getPage().locator('[data-qa-setting-id="Layout_Home_Title"]');
 	}
 
 	// permissions grids checkboxes
@@ -239,7 +247,7 @@ export default class Administration extends BasePage {
 
 	// settings
 	public buttonSave(): Locator {
-		return this.getPage().locator('//h2[text()="General"]/following-sibling::div//button[text()="Save changes"]');
+		return this.getPage().locator('button.save');
 	}
 
 	public generalSectionIframeIntegration(): Locator {
@@ -286,6 +294,10 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-reset-setting-id="Site_Name"]');
 	}
 
+	public generalHomeTitleReset(): Locator {
+		return this.getPage().locator('[data-qa-reset-setting-id="Layout_Home_Title"]');
+	}
+
 	public generalLanguage(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Language"]');
 	}

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

@@ -81,6 +81,10 @@ class LoginPage extends BasePage {
 		return this.getPage().locator('//span[@class="rc-header__block"]');
 	}
 
+	public getSideBarAvatarButton(): Locator {
+		return this.getPage().locator('[data-qa="sidebar-avatar-button"]');
+	}
+
 	public async open(path: string): Promise<void> {
 		await super.goto(path);
 	}
@@ -135,6 +139,11 @@ class LoginPage extends BasePage {
 		await expect(this.confirmPasswordInvalidText()).toBeVisible();
 		await expect(this.confirmPasswordInvalidText()).toHaveText('The password confirmation does not match password');
 	}
+
+	public async logout(): Promise<void> {
+		await this.getSideBarAvatarButton().click();
+		await this.getPage().locator('li.rcx-option >> text="Logout"').click();
+	}
 }
 
 export default LoginPage;

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

@@ -240,9 +240,9 @@ class SideNav extends BasePage {
 		// mainContent.messageInput().should('be.focused');
 	}
 
-	public async findFindForChat(userName: string): Promise<void> {
+	public async findForChat(target: string): Promise<void> {
 		await this.searchUser().click();
-		await this.searchInput().type(userName, { delay: 300 });
+		await this.searchInput().type(target, { delay: 300 });
 		await this.getPage().keyboard.press(ENTER);
 	}
 }