upgrade playwright dependencies, screenshots and tests (#29466)

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

@@ -0,0 +1,36 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class SearchPopover {
+    readonly container: Locator;
+
+    readonly messagesButton;
+    readonly filesButton;
+    readonly searchInput;
+    readonly searchBoxClose;
+    readonly selectedSuggestion;
+    readonly searchHints;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        this.messagesButton = container.getByRole('button', {name: 'Messages'});
+        this.filesButton = container.getByRole('button', {name: 'Files'});
+        this.searchInput = container.getByLabel('Search messages');
+        this.searchBoxClose = container.getByTestId('searchBoxClose');
+        this.selectedSuggestion = container.locator('.suggestion--selected').locator('.suggestion-list__main');
+        this.searchHints = container.locator('#searchHints');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+
+    getSelectedSuggestion() {
+        return this.searchHints.locator('.suggestion--selected');
+    }
+}
+
+export {SearchPopover};

e2e-tests/playwright/support/ui/components/global_header.ts

@@ -43,6 +43,11 @@ export default class GlobalHeader {
         await expect(this.searchBox).toBeVisible();
         await this.searchBox.click();
     }
+
+    async closeSearch() {
+        await expect(this.searchBox).toBeVisible();
+        await this.searchBox.getByTestId('input-clear').click();
+    }
 }
 
 export {GlobalHeader};

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

@@ -13,6 +13,7 @@ import {FindChannelsModal} from './channels/find_channels_modal';
 import {SettingsModal} from './channels/settings/settings_modal';
 import {Footer} from './footer';
 import {GlobalHeader} from './global_header';
+import {SearchPopover} from './channels/search_popover';
 import {MainHeader} from './main_header';
 import {PostDotMenu} from './channels/post_dot_menu';
 import {PostReminderMenu} from './channels/post_reminder_menu';
@@ -33,6 +34,7 @@ import {SystemUsersColumnToggleMenu} from './system_console/sections/system_user
 
 const components = {
     GlobalHeader,
+    SearchPopover,
     ChannelsCenterView,
     ChannelsSidebarLeft,
     ChannelsSidebarRight,

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

@@ -11,6 +11,7 @@ export default class ChannelsPage {
     readonly page: Page;
 
     readonly globalHeader;
+    readonly searchPopover;
     readonly centerView;
     readonly scheduledDraftDropdown;
     readonly scheduledDraftModal;
@@ -33,6 +34,7 @@ export default class ChannelsPage {
 
         // The main areas of the app
         this.globalHeader = new components.GlobalHeader(page.locator('#global-header'));
+        this.searchPopover = new components.SearchPopover(page.locator('#searchPopover'));
         this.centerView = new components.ChannelsCenterView(page.getByTestId('channel_view'));
         this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));
         this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));