E2E/Playwright: Instantiate page in pw (#29765)

* instantiate page in pw

* update spec

* fix storage key and require user when logging in via API

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/ui/components/channels/center_view.ts

@@ -13,7 +13,7 @@ export default class ChannelsCenterView {
     readonly header;
     readonly postCreate;
     readonly scheduledDraftOptions;
-    readonly scheduledDraftChannelInfo;
+    readonly postBoxIndicator;
     readonly scheduledDraftChannelIcon;
     readonly scheduledDraftChannelInfoMessage;
     readonly scheduledDraftChannelInfoMessageText;
@@ -27,7 +27,7 @@ export default class ChannelsCenterView {
         this.scheduledDraftOptions = new components.ChannelsPostCreate(
             container.locator('#dropdown_send_post_options'),
         );
-        this.scheduledDraftChannelInfo = container.locator('div.postBoxIndicator');
+        this.postBoxIndicator = container.locator('div.postBoxIndicator');
         this.scheduledDraftChannelIcon = container.locator('#create_post i.icon-draft-indicator');
         this.scheduledDraftChannelInfoMessage = container.locator('div.ScheduledPostIndicator span');
         this.scheduledDraftChannelInfoMessageText = container.locator('span:has-text("Message scheduled for")');
@@ -110,7 +110,7 @@ export default class ChannelsCenterView {
     }
 
     async verifyscheduledDraftChannelInfo() {
-        await this.scheduledDraftChannelInfo.isVisible();
+        await this.postBoxIndicator.isVisible();
         await this.scheduledDraftChannelIcon.isVisible();
         const messageLocator = this.scheduledDraftChannelInfoMessage.first();
         await expect(messageLocator).toContainText('Message scheduled for');

e2e-tests/playwright/support/ui/components/channels/generic_confirm_modal.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {expect, Locator, Page} from '@playwright/test';
+import {expect, Locator} from '@playwright/test';
 
 /**
  * This is the generic confirm modal that is used in the app.
@@ -15,11 +15,10 @@ export default class GenericConfirmModal {
     readonly confirmButton: Locator;
     readonly cancelButton: Locator;
 
-    constructor(page: Page, id?: string) {
-        const modalId = `#confirmModal ${id}`.trim();
-        this.container = page.locator(modalId);
-        this.confirmButton = page.locator('#confirmModalButton');
-        this.cancelButton = page.locator('#cancelModalButton');
+    constructor(container: Locator) {
+        this.container = container;
+        this.confirmButton = container.locator('#confirmModalButton');
+        this.cancelButton = container.locator('#cancelModalButton');
     }
 
     async toBeVisible() {

e2e-tests/playwright/support/ui/components/channels/sidebar_right.ts

@@ -11,7 +11,7 @@ export default class ChannelsSidebarRight {
     readonly closeButton;
     readonly postCreate;
     readonly rhsPostBody;
-    readonly scheduledDraftChannelInfo;
+    readonly postBoxIndicator;
     readonly scheduledDraftChannelInfoMessage;
     readonly scheduledDraftSeeAllLink;
     readonly scheduledDraftChannelInfoMessageText;
@@ -19,7 +19,7 @@ export default class ChannelsSidebarRight {
     constructor(container: Locator) {
         this.container = container;
 
-        this.scheduledDraftChannelInfo = container.locator('div.postBoxIndicator');
+        this.postBoxIndicator = container.locator('div.postBoxIndicator');
         this.scheduledDraftChannelInfoMessage = container.locator('div.ScheduledPostIndicator span');
         this.scheduledDraftSeeAllLink = container.locator('a:has-text("See all scheduled messages")');
         this.scheduledDraftChannelInfoMessageText = container.locator('span:has-text("Message scheduled for")');

e2e-tests/playwright/support/ui/pages/index.ts

@@ -21,4 +21,5 @@ const pages = {
     DraftPage,
 };
 
-export {pages, ChannelsPage, LandingLoginPage, LoginPage, SignupPage, ScheduledDraftPage, DraftPage};
+export {ChannelsPage, LandingLoginPage, LoginPage, SignupPage, ScheduledDraftPage, DraftPage};
+export default pages;

e2e-tests/playwright/support/ui/pages/login.ts

@@ -3,14 +3,11 @@
 
 import {expect, Page} from '@playwright/test';
 
-import {AdminConfig} from '@mattermost/types/config';
 import {UserProfile} from '@mattermost/types/users';
 
 import {components} from '@e2e-support/ui/components';
 
 export default class LoginPage {
-    readonly adminConfig: AdminConfig;
-
     readonly page: Page;
 
     readonly title;
@@ -18,6 +15,7 @@ export default class LoginPage {
     readonly bodyCard;
     readonly loginInput;
     readonly loginPlaceholder;
+    readonly loginWithAdLdapPlaceholder;
     readonly passwordInput;
     readonly passwordToggleButton;
     readonly signInButton;
@@ -30,19 +28,15 @@ export default class LoginPage {
     readonly header;
     readonly footer;
 
-    constructor(page: Page, adminConfig: AdminConfig) {
+    constructor(page: Page) {
         this.page = page;
-        this.adminConfig = adminConfig;
-
-        const loginInputPlaceholder = adminConfig.LdapSettings.Enable
-            ? 'Email, Username or AD/LDAP Username'
-            : 'Email or Username';
 
         this.title = page.locator('h1:has-text("Log in to your account")');
         this.subtitle = page.locator('text=Collaborate with your team in real-time');
         this.bodyCard = page.locator('.login-body-card-content');
         this.loginInput = page.locator('#input_loginId');
-        this.loginPlaceholder = page.locator(`[placeholder="${loginInputPlaceholder}"]`);
+        this.loginPlaceholder = page.locator(`[placeholder="Email or Username"]`);
+        this.loginWithAdLdapPlaceholder = page.locator(`[placeholder="Email, Username or AD/LDAP Username"]`);
         this.passwordInput = page.locator('#input_password-input');
         this.passwordToggleButton = page.getByRole('button', {name: 'Show or hide password'});
         this.signInButton = page.locator('button:has-text("Log in")');

e2e-tests/playwright/support/ui/pages/system_console.ts

@@ -20,6 +20,10 @@ class SystemConsolePage {
     readonly systemUsersDateRangeMenu;
     readonly systemUsersColumnToggleMenu;
     readonly systemUsersActionMenus;
+
+    // modal
+    readonly confirmModal;
+    readonly exportModal;
     readonly saveChangesModal;
 
     constructor(page: Page) {
@@ -47,6 +51,9 @@ class SystemConsolePage {
         this.systemUsersActionMenus = Array.from(Array(10).keys()).map(
             (index) => new components.SystemUsersFilterMenu(page.locator(`#actionMenu-systemUsersTable-${index}`)),
         );
+
+        this.confirmModal = new components.GenericConfirmModal(page.locator('#confirmModal'));
+        this.exportModal = new components.GenericConfirmModal(page.getByRole('dialog', {name: 'Export user data'}));
         this.saveChangesModal = new components.SystemUsers(page.locator('div.modal-content'));
     }