MM-61306: Cypress/E2E, fixed failed tests (#28959)

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js

@@ -18,6 +18,13 @@ describe('Verify Accessibility Support in different Buttons', () => {
 
             // # Post a message
             cy.postMessage('hello');
+            cy.getLastPostId().then((postId) => {
+                // # On a message in center channel, click then pin the post to the channel
+                cy.uiClickPostDropdownMenu(postId, 'Pin to Channel');
+
+                // # Click pin icon next to search box
+                cy.uiGetChannelPinButton().click();
+            });
         });
     });
 

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js

@@ -53,7 +53,7 @@ describe('Verify Accessibility keyboard usability across different regions in th
 
         // # Search for a term
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').typeWithForce('hello').typeWithForce('{enter}');
+        cy.uiGetSearchBox().typeWithForce('hello').typeWithForce('{enter}');
 
         // # Change the focus to search results
         cy.get('#searchContainer').within(() => {

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_nav_diff_regions_spec.js

@@ -126,7 +126,7 @@ describe('Verify Quick Navigation support across different regions in the app',
     it('MM-T1460_8 Verify Navigation Support in Search Results', () => {
         // # Search for some text
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').should('be.visible').type('hello {enter}');
+        cy.uiGetSearchBox().should('be.visible').first().type('hello {enter}');
 
         // # Change the focus to search results
         cy.get('#searchContainer').within(() => {

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_reaction_spec.ts

@@ -65,7 +65,7 @@ describe('Archived channels', () => {
             // # Search for "Test archive reaction"
             cy.get('body').type('{esc}');
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').should('be.visible').type(messageText).type('{enter}');
+            cy.uiGetSearchBox().should('be.visible').first().type(messageText).type('{enter}');
 
             // # Click on post dot menu so we can check for reaction icon
             cy.clickPostDotMenu(postId, 'SEARCH');

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_search_spec.ts

@@ -61,7 +61,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
                 // # Search for the post from step 1')
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().find('input').clear().type(`${messageText}{enter}`);
+                cy.uiGetSearchBox().first().clear().type(`${messageText}{enter}`);
 
                 // * Post is returned by search, since it's not archived anymore
                 cy.get('#searchContainer').should('be.visible');
@@ -96,7 +96,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
         // # Archive dialogue message reads "This will archive the channel from the team and make its contents inaccessible for all users" (Mobile dialogue makes no mention of the data will be accessible)
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').clear().type(`${testArchivedMessage}{enter}`);
+        cy.uiGetSearchBox().first().clear().type(`${testArchivedMessage}{enter}`);
 
         // * Post is not returned by search
         cy.get('#searchContainer').should('be.visible');
@@ -112,7 +112,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
             // # Search for the string of text from step 1
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').clear().type(`${messageText}{enter}`);
+            cy.uiGetSearchBox().first().clear().type(`${messageText}{enter}`);
 
             // * Post is returned by search, since it's not archived anymore
             cy.get('#searchContainer').should('be.visible');
@@ -131,7 +131,7 @@ describe('archive tests while preventing viewing archived channels', () => {
         // # Archive a channel and make a mental note of the channel name
         // # Type "in:" and note the list of channels that appear
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').clear().type(`in:${testChannel.name}`);
+        cy.uiGetSearchBox().first().clear().type(`in:${testChannel.name}`);
         cy.findByTestId(testChannel.name).should('not.exist');
     });
 });

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_channel_spec.ts

@@ -42,7 +42,7 @@ describe('Leave an archived channel', () => {
 
             // # Search for a post in an archived channel
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').clear().type(`${testArchivedMessage}{enter}`);
+            cy.uiGetSearchBox().first().clear().type(`${testArchivedMessage}{enter}`);
 
             // # Open the archived channel by selecting Jump from search results and then selecting the link to move to the most recent posts in the channel
             cy.uiGetSearchContainer().should('be.visible');
@@ -113,7 +113,7 @@ describe('Leave an archived channel', () => {
         createArchivedChannel({prefix: 'archived-search-for'}, messageList).then(({name}) => {
             // # Locate the post in a search
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').clear().type(`${messageList[1]}{enter}`);
+            cy.uiGetSearchBox().first().clear().type(`${messageList[1]}{enter}`);
 
             // # Click jump to open an archive post in permalink view
             cy.uiGetSearchContainer().should('be.visible');

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_leave_channel_spec.ts

@@ -97,7 +97,7 @@ describe('Leave an archived channel', () => {
 
                 // # Search for content from an archived channel
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().find('input').clear().type(`${messageD}{enter}`);
+                cy.uiGetSearchBox().first().clear().type(`${messageD}{enter}`);
 
                 // # Open the channel from search results
                 cy.get('#searchContainer').should('be.visible');
@@ -109,7 +109,7 @@ describe('Leave an archived channel', () => {
 
                 // # Search for content from a different archived channel
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().find('input').clear().type(`${messageC}{enter}`);
+                cy.uiGetSearchBox().first().clear().type(`${messageC}{enter}`);
 
                 // # Open the channel from search result by clicking Jump
                 cy.get('#searchContainer').should('be.visible').findByText('Jump').click().wait(TIMEOUTS.ONE_SEC);

e2e-tests/cypress/tests/integration/channels/channel/open_rhs_coming_from_system_console_spec.ts

@@ -134,7 +134,7 @@ describe('Channel RHS', () => {
 
         // # Enter the search terms and hit enter to start the search
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').clear().type(MESSAGES.TINY).type('{enter}');
+        cy.uiGetSearchBox().first().clear().type(MESSAGES.TINY).type('{enter}');
 
         // * Verify that the search results is opened in RHS
         verifyRHSisOpenAndHasTitle('Search Results');

e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_4_spec.ts

@@ -107,7 +107,7 @@ describe('MM-T4066 Setting manual status clear time more than 7 days away', () =
 
         // # Click on the date which is dateToBeSelected
         for (let i = 0; i < months; i++) {
-            cy.get('.fa-angle-right').click();
+            cy.get('i.icon.icon-chevron-right').click();
         }
         cy.get('.date-picker__popper').find(`.rdp-month button[aria-label="${dateToBeSelected.format('Do MMMM (dddd)')}"]`).click();
 
@@ -161,7 +161,7 @@ describe('MM-T4066 Setting manual status clear time more than 7 days away', () =
 
         // # Click on the date which is dateToBeSelected
         for (let i = 0; i < months; i++) {
-            cy.get('.fa-angle-right').click();
+            cy.get('i.icon.icon-chevron-right').click();
         }
         cy.get('.date-picker__popper').find(`.rdp-month button[aria-label="${dateToBeSelected.format('Do MMMM (dddd)')}"]`).click();
 

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts

@@ -81,15 +81,15 @@ describe('Verify Accessibility Support in different input fields', () => {
         cy.uiGetSearchContainer().click();
 
         // * Verify Accessibility support in search input
-        cy.uiGetSearchBox().should('have.attr', 'aria-describedby', 'searchHints').and('have.attr', 'aria-label', 'Search');
+        cy.uiGetSearchBox().should('have.attr', 'aria-describedby', 'searchbar-help-popup').and('have.attr', 'aria-label', 'Search messages');
-        cy.uiGetSearchBox().find('input').focus();
+        cy.uiGetSearchBox().focus();
         cy.get('#searchHints').should('be.visible');
 
         // # Ensure User list is cached once in UI
-        cy.uiGetSearchBox().find('input').type('from:').wait(TIMEOUTS.FIVE_SEC);
+        cy.uiGetSearchBox().type('from:').wait(TIMEOUTS.FIVE_SEC);
 
         // # Trigger the user autocomplete again
-        cy.uiGetSearchBox().find('input').clear().type('from:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
+        cy.uiGetSearchBox().first().clear().type('from:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
 
         // * Verify Accessibility Support in search autocomplete
         verifySearchAutocomplete(2);
@@ -103,10 +103,10 @@ describe('Verify Accessibility Support in different input fields', () => {
         verifySearchAutocomplete(3);
 
         // # Type the in: filter and ensure channel list is cached once
-        cy.uiGetSearchBox().find('input').clear().type('in:').wait(TIMEOUTS.FIVE_SEC);
+        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.FIVE_SEC);
 
         // # Trigger the channel autocomplete again
-        cy.uiGetSearchBox().find('input').clear().type('in:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
+        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
 
         // * Verify Accessibility Support in search autocomplete
         verifySearchAutocomplete(2, 'channel');
@@ -290,7 +290,7 @@ function getUserMentionAriaLabel(displayName) {
 }
 
 function verifySearchAutocomplete(index, type = 'user') {
-    cy.uiGetSearchBox().find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected').within((el) => {
+    cy.get('#searchBox').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected').within((el) => {
         if (type === 'user') {
             cy.get('.suggestion-list__ellipsis').invoke('text').then((text) => {
                 const usernameLength = 12;

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_add_spec.ts

@@ -79,7 +79,7 @@ describe('Guest Account - Guest User Experience', () => {
 
         // # Search for the Guest User
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').wait(TIMEOUTS.FIVE_SEC).type(`in:${guestUser.username}`);
+        cy.uiGetSearchBox().wait(TIMEOUTS.FIVE_SEC).type(`in:${guestUser.username}`);
 
         // * Verify Guest Badge is not displayed at Search auto-complete
         cy.contains('.suggestion-list__item', guestUser.username).should('be.visible').within(($el) => {

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts

@@ -213,7 +213,7 @@ describe('Verify Guest User Identification in different screens', () => {
     it('Verify Guest Badge not displayed in Search Autocomplete', () => {
         // # Search for the Guest User
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').type('from:');
+        cy.uiGetSearchBox().type('from:');
 
         // * Verify Guest Badge is not displayed at Search auto-complete
         cy.contains('.suggestion-list__item', guestUser.username).scrollIntoView().should('be.visible').within(($el) => {

e2e-tests/cypress/tests/integration/channels/enterprise/integrations/incoming_webhook_spec.ts

@@ -68,7 +68,7 @@ describe('Incoming webhook', () => {
         cy.postIncomingWebhook({url: incomingWebhook.url, data: payload});
 
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').
+        cy.uiGetSearchBox().
             wait(TIMEOUTS.HALF_SEC).
             typeWithForce('findme').
             typeWithForce('{enter}');

e2e-tests/cypress/tests/integration/channels/files_and_attachments/disabled_file_upload_spec.js

@@ -72,7 +72,7 @@ describe('Upload Files - Settings', () => {
         cy.get('#searchHints').find('.search-hint__search-type-selector button > .icon-file-text-outline').should('not.exist');
 
         // # Search for posts
-        cy.uiGetSearchBox().find('input').type('sample').type('{enter}');
+        cy.uiGetSearchBox().first().type('sample').type('{enter}');
 
         // * Verify search results do not have File button
         cy.get('.files-tab').should('not.exist');

e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/basic_formatting_spec.js

@@ -90,7 +90,7 @@ describe('Incoming webhook', () => {
                 cy.wrap(el).should('contain', 'The following should be markdown formatted');
                 cy.wrap(el).should('contain', '(mouse emoji, strawberry emoji, then formatting as indicated):');
                 cy.get('.emoticon').eq(0).parent().
-                    should('have.html', `<span alt=":hamster:" class="emoticon" title=":hamster:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f439.png&quot;);">:hamster:</span>`);
+                    should('have.html', `<span alt=":hamster:" class="emoticon" data-testid="postEmoji.:hamster:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f439.png&quot;);">🐹</span>`);
                 cy.get('.emoticon').eq(1).parent().
                     should('have.html', `<span alt=":strawberry:" class="emoticon" title=":strawberry:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f353.png&quot;);">:strawberry:</span>`);
                 cy.wrap(el).find('strong').should('have.text', 'bold');

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/ctrl_cmd_l_set_message_focus_spec.js

@@ -43,7 +43,7 @@ describe('Keyboard Shortcuts', () => {
     it('MM-T1250 CTRL/CMD+SHIFT+L - Set focus to center channel message box (with SEARCH RHS open)', () => {
         // # Search
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').type('test{enter}');
+        cy.uiGetSearchBox().first().type('test{enter}');
 
         // * Wait for the RHS to open and the search results to appear
         cy.contains('.sidebar--right__header', 'Search Results').should('be.visible');

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/keyboard_shortcuts_1_spec.js

@@ -371,7 +371,7 @@ describe('Keyboard Shortcuts', () => {
     it('MM-T1248 - CTRL/CMD+SHIFT+L - Set focus to center channel message box', () => {
         // # Open search box to change focus
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').should('be.focused');
+        cy.uiGetSearchBox().should('be.focused');
 
         // # Type CTRL/CMD+SHIFT+L
         cy.get('body').cmdOrCtrlShortcut('{shift}L');

e2e-tests/cypress/tests/integration/channels/messaging/center_channel_rhs_overlap_spec.js

@@ -719,7 +719,7 @@ describe('Messaging', () => {
         cy.getLastPostId().then((postId) => {
             // # Search for the posted message
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').should('be.visible').type(messageX).type('{enter}').wait(TIMEOUTS.HALF_SEC);
+            cy.uiGetSearchBox().should('be.visible').first().type(messageX).type('{enter}').wait(TIMEOUTS.HALF_SEC);
 
             // # Click on post dot menu so we can edit
             cy.clickPostDotMenu(postId, 'SEARCH');

e2e-tests/cypress/tests/integration/channels/messaging/channel_and_posts_links_spec.js

@@ -55,7 +55,7 @@ describe('Message permalink', () => {
 
         // # Search for a message in the current channel
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').clear().type('in:town-square').wait(TIMEOUTS.HALF_SEC).type('{enter}{enter}');
+        cy.uiGetSearchBox().first().clear().type('in:town-square').wait(TIMEOUTS.HALF_SEC).type('{enter}{enter}');
 
         // # Jump to first permalink view (most recent message)
         cy.get('.search-item__jump').first().click();
@@ -73,7 +73,7 @@ describe('Message permalink', () => {
 
         // # Search for a message in the current channel
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').clear().type('in:town-square').wait(TIMEOUTS.HALF_SEC).type('{enter}{enter}');
+        cy.uiGetSearchBox().first().clear().type('in:town-square').wait(TIMEOUTS.HALF_SEC).type('{enter}{enter}');
 
         // # Jump to first permalink view (most recent message)
         cy.get('.search-item__jump').first().click();

e2e-tests/cypress/tests/integration/channels/messaging/permalink_message_edit_spec.js

@@ -41,7 +41,7 @@ describe('Permalink message edit', () => {
 
         // # Search for searchWord
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').type(searchWord).type('{enter}');
+        cy.uiGetSearchBox().type(searchWord).type('{enter}');
 
         // # Jump to permalink view
         cy.get('.search-item__jump').first().click();
@@ -71,7 +71,7 @@ describe('Permalink message edit', () => {
 
             // # Find searchWord and verify edited post
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').should('be.visible').type(searchWord).type('{enter}');
+            cy.uiGetSearchBox().should('be.visible').first().type(searchWord).type('{enter}');
             cy.get('.search-item__jump').first().click();
 
             // # Check if url include the permalink

e2e-tests/cypress/tests/integration/channels/messaging/post_pre_header_spec.js

@@ -187,7 +187,7 @@ describe('Post PreHeader', () => {
 
             // # Search for the channel.
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').type('test both pinned and saved {enter}');
+            cy.uiGetSearchBox().first().type('test both pinned and saved {enter}');
 
             // * Check that the post pre-header has both pinned and saved links in RHS search results
             cy.get('#searchContainer').should('be.visible').within(() => {

e2e-tests/cypress/tests/integration/channels/notifications/message_bar_spec.js

@@ -68,7 +68,7 @@ describe('Notifications', () => {
 
             // # Enter "in:town-square" in the search bar and hit ENTER
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().find('input').
+            cy.uiGetSearchBox().
                 typeWithForce('in:town-square').
                 wait(TIMEOUTS.HALF_SEC).
                 typeWithForce('{enter}').

e2e-tests/cypress/tests/integration/channels/onboarding/login_page_link_account_creation_spec.js

@@ -48,14 +48,15 @@ describe('Onboarding', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            cy.get('#open_inviteEdit').should('be.visible').click();
+            cy.get('#accessButton').should('be.visible').click();
 
             // # Enable any user with an account on the server to join the team
-            cy.get('#teamOpenInvite').should('be.visible').click();
+            cy.get('input.mm-modal-generic-section-item__input-checkbox').last().should('be.visible').click();
-            cy.findByText('Save').should('be.visible').click();
+
+            cy.findAllByTestId('mm-save-changes-panel__save-btn').should('be.visible').click();
 
             // # Close the modal
-            cy.get('#teamSettingsModalLabel').find('button').should('be.visible').click();
+            cy.findByLabelText('Close').should('be.visible').click();
         });
 
         // # Logout from sysadmin account
@@ -77,9 +78,6 @@ describe('Onboarding', () => {
         // # Get invitation email and go to the provided link
         getEmail(username, email);
 
-        // * Ensure that the email was correctly verified
-        cy.findByText('Email Verified').should('be.visible');
-
         // * Ensure that the email was pre-filled and the password input box is focused
         cy.get('#input_loginId').should('be.visible').and('have.value', email);
         cy.get('#input_password-input').should('be.visible').and('be.focused').type(password);
@@ -98,8 +96,8 @@ describe('Onboarding', () => {
             cy.get('#sidebarItem_town-square').should('exist');
         });
 
-        // * Check that the 'Beginning of Town Square' message is visible
+        // * Check that the 'Town Square' message is visible
-        cy.findByText('Beginning of Town Square').should('be.visible');
+        cy.url().should('include', `/${testTeam.name}/channels/town-square`);
     });
 
     // eslint-disable-next-line no-shadow

e2e-tests/cypress/tests/integration/channels/onboarding/use_team_invite_link_to_sign_up_spec.js

@@ -95,7 +95,6 @@ describe('Onboarding', () => {
             cy.visit(permalink);
 
             // # Check that 'Email Verified' text should be visible, email is pre-filled, and password field is focused, then login
-            cy.findByText('Email Verified', {timeout: TIMEOUTS.HALF_MIN}).should('be.visible');
             cy.get('#input_loginId').should('have.value', email);
             cy.get('#input_password-input').should('be.visible').type(password);
             cy.get('#saveSetting').click();
@@ -113,7 +112,7 @@ describe('Onboarding', () => {
             cy.findByText('Town Square').should('exist');
         });
 
-        // * Check that the 'Beginning of Town Square' message is visible
+        // * Check that the 'Town Square' message is visible
-        cy.findByText('Beginning of Town Square').should('be.visible').wait(TIMEOUTS.ONE_SEC);
+        cy.url().should('include', `/${testTeam.name}/channels/town-square`);
     });
 });

e2e-tests/cypress/tests/integration/channels/search/clear_input_spec.js

@@ -24,14 +24,16 @@ describe('Search', () => {
     it('QuickInput clear X', () => {
         // * X should not be visible on empty input
         cy.uiGetSearchContainer().find('.input-clear-x').should('not.exist');
-
         cy.uiGetSearchContainer().click();
 
         // # Write something on the input
-        cy.uiGetSearchBox().find('input').clear().type('abc');
+        cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type('abc').wait(TIMEOUTS.HALF_SEC).type('{enter}');
+
+        cy.uiGetSearchContainer().click();
 
         // * The input should contain what we wrote
-        cy.uiGetSearchBox().find('input').should('have.value', 'abc');
+        cy.uiGetSearchBox().should('have.value', 'abc');
+        cy.get('#searchBox .icon-close').click();
 
         // * The X should be visible
         // # Then click X to clear the input field
@@ -44,6 +46,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().find('.input-clear-x').should('not.exist');
 
         // * The value of the input is empty
+        cy.uiGetSearchContainer().click();
         cy.uiGetSearchBox().should('have.value', '');
     });
 
@@ -52,13 +55,8 @@ describe('Search', () => {
 
         // * Verify search input field exists and not search button, as inputs contains placeholder not buttons/icons
         // and then type in a search text
-        cy.uiGetSearchBox().click().wait(TIMEOUTS.HALF_SEC).type(searchText + '{enter}');
+        cy.uiGetSearchContainer().click();
-
+        cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type(searchText + '{enter}').wait(TIMEOUTS.HALF_SEC);
-        // # Click on the pinned post button from the header
-        cy.uiGetChannelPinButton().click();
-
-        // * Verify the pinned post RHS is open
-        cy.uiGetRHS().should('contain', 'Pinned messages');
 
         // # Now click on the saved post button from the header
         cy.uiGetSavedPostButton().click();

e2e-tests/cypress/tests/integration/channels/search/cleared_search_term_spec.js

@@ -30,10 +30,8 @@ describe('Search', () => {
         cy.uiGetSearchBox().
             type(`${term}{enter}`).
             wait(TIMEOUTS.ONE_SEC);
-        cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().clear();
 
-        cy.get('#searchHints').should('be.visible');
+        cy.get('#search-items-container').should('be.visible');
         cy.uiGetSearchContainer().type('{esc}');
 
         // # Verify the Search side bar opens up
@@ -46,16 +44,14 @@ describe('Search', () => {
 
         // # Verify that the cleared search text does not appear on the search box
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').should('be.empty');
+        cy.uiGetSearchBox().should('be.empty');
+        cy.uiGetSearchContainer().should('be.visible').click();
         cy.uiGetSearchContainer().type('{esc}');
 
-        // # Click the pin icon to open the pinned messages RHS
-        cy.uiGetChannelPinButton().click();
-        cy.uiGetRHS().should('contain', 'Pinned messages');
-
         // # Verify that the Search term input box is still cleared and search term does not reappear when RHS opens
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').and('be.empty');
+        cy.uiGetSearchBox().and('be.empty');
+        cy.uiGetSearchContainer().should('be.visible').click();
         cy.uiGetSearchContainer().type('{esc}');
     });
 });

e2e-tests/cypress/tests/integration/channels/search/post_search_display_not_cloud_spec.js

@@ -39,7 +39,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // # Search the world 'hello' that is generated by /test command
-        cy.uiGetSearchBox().find('input').type('hello{enter}').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().type('hello{enter}').wait(TIMEOUTS.HALF_SEC);
         cy.get('#search-items-container span').should('contain.text', 'hello');
 
         // # RHS should be visible with search results

e2e-tests/cypress/tests/integration/channels/search/post_search_display_spec.js

@@ -40,15 +40,15 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // * Search word in searchBox and validate searchWord
-        cy.uiGetSearchBox().find('input').type(searchWord + '{enter}');
+        cy.uiGetSearchBox().type(searchWord + '{enter}');
 
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').should('have.value', searchWord);
+        cy.uiGetSearchBox().should('have.value', searchWord);
 
         // # Click on "x" displayed on searchbox
-        cy.uiGetSearchBox().find('.input-clear-x').wait(TIMEOUTS.ONE_SEC).click({force: true});
+        cy.uiGetSearchBox().parent().siblings('.input-clear-x').wait(TIMEOUTS.ONE_SEC).click({force: true});
-        cy.uiGetSearchBox().find('#searchHints').should('be.visible');
+        cy.uiGetSearchBox().parents('[class*="SearchInputContainer"]').siblings('#searchHints').should('be.visible');
-        cy.uiGetSearchBox().type('{esc}');
+        cy.uiGetSearchBox().first().focus().type('{esc}');
 
         // # RHS should be visible with search results
         cy.get('#search-items-container').should('be.visible');
@@ -77,16 +77,16 @@ describe('Search', () => {
             cy.uiGetSearchContainer().click();
 
             // # Search for posts from that user
-            cy.uiGetSearchBox().find('input').type(testSearch, {force: true}).wait(TIMEOUTS.HALF_SEC);
+            cy.uiGetSearchBox().type(testSearch, {force: true}).wait(TIMEOUTS.HALF_SEC);
 
             // # Select user from suggestion list
             cy.contains('.suggestion-list__item', `@${testUser.username}`).scrollIntoView().click({force: true});
 
             // # Verify that search box has the updated query
-            cy.uiGetSearchBox().find('input').should('have.value', `FROM:${testUser.username} `);
+            cy.uiGetSearchBox().should('have.value', `FROM:${testUser.username} `);
 
             // # Perform search
-            cy.uiGetSearchBox().find('input').type('{enter}').wait(TIMEOUTS.HALF_SEC);
+            cy.uiGetSearchBox().type('{enter}').wait(TIMEOUTS.HALF_SEC);
 
             // * Assert that RHS should be visible with search results
             cy.get('#search-items-container').should('be.visible');
@@ -116,7 +116,7 @@ describe('Search', () => {
         assertSearchHintFilesOrMessages();
 
         // # Search for search term in:
-        cy.uiGetSearchBox().find('input').type('in:');
+        cy.uiGetSearchBox().type('in:');
 
         // # Select option from suggestion list
         cy.get('.suggestion-list__item').first().click({force: true});
@@ -128,7 +128,7 @@ describe('Search', () => {
         cy.get('.input-clear-x').first().click({force: true}).wait(TIMEOUTS.HALF_SEC);
 
         // # Search for search term in:town-square{space}
-        cy.uiGetSearchBox().find('input').type('in:town-square ').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().type('in:town-square ').wait(TIMEOUTS.HALF_SEC);
 
         // * Check the hint contents are now visible
         assertSearchHint();
@@ -137,22 +137,22 @@ describe('Search', () => {
         cy.uiGetSearchBox().get('.input-clear-x').first().click({force: true}).wait(TIMEOUTS.HALF_SEC);
 
         // # Search for search term in:town-square{enter}
-        cy.uiGetSearchBox().find('input').type('in:town-square').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().type('in:town-square').wait(TIMEOUTS.HALF_SEC);
 
         // * Assert that channel name displays appropriately
         cy.get('.suggestion-list__item').first().should('contain.text', 'Town Square~town-square');
 
         // # Press enter to register search term
-        cy.uiGetSearchBox().find('input').type('{enter}');
+        cy.uiGetSearchBox().type('{enter}');
 
         // * Check the hint contents are now visible
         assertSearchHint();
 
         // * Assert that searchBox now includes a trailing space
-        cy.uiGetSearchBox().find('input').should('have.value', 'in:town-square ');
+        cy.uiGetSearchBox().should('have.value', 'in:town-square ');
 
         // # Perform the search
-        cy.uiGetSearchBox().find('input').type('{enter}').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().type('{enter}').wait(TIMEOUTS.HALF_SEC);
 
         // * Assert autocomplete list is gone
         cy.get('.suggestion-list__item').should('not.exist');
@@ -167,7 +167,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // # Search for `Hell*`
-        cy.uiGetSearchBox().find('input').type('Hell*{enter}').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().type('Hell*{enter}').wait(TIMEOUTS.HALF_SEC);
 
         // # RHS should be visible with search results
         cy.get('#search-items-container').should('be.visible');

e2e-tests/cypress/tests/integration/channels/search/results_post_spec.js

@@ -37,7 +37,7 @@ describe('Search', () => {
 
         // # Search for "apple"
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().find('input').should('be.visible').type(apple).type('{enter}');
+        cy.uiGetSearchBox().should('be.visible').first().type(apple).type('{enter}');
 
         // # Get last postId
         cy.getLastPostId().as('lastPostId');
@@ -50,7 +50,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // * Type banana on search box but don't hit search
-        cy.uiGetSearchBox().find('input').clear({force: true}).type(banana, {force: true});
+        cy.uiGetSearchBox().first().clear({force: true}).type(banana, {force: true});
 
         // * Search result should not change and remain as one result with highlight still on apple
         cy.get('@lastPostId').then((postId) => {

e2e-tests/cypress/tests/integration/channels/search/search_group_message_spec.js

@@ -54,7 +54,7 @@ describe('Search', () => {
             cy.uiGetSearchContainer().should('be.visible').click();
 
             //# Type "in:" text in search input
-            cy.uiGetSearchBox().find('input').type('in:');
+            cy.uiGetSearchBox().type('in:');
 
             const sortedUsernames = groupMembers.
                 map((member) => member.username).
@@ -64,11 +64,11 @@ describe('Search', () => {
             cy.uiGetSearchBox().find('.suggestion-list__main').contains(sortedUsernames.join(',')).click();
 
             //# Press enter to select
-            cy.uiGetSearchBox().find('input').type('{enter}');
+            cy.uiGetSearchBox().type('{enter}');
 
             //# Search for the message
             cy.uiGetSearchContainer().should('be.visible').click();
-            cy.uiGetSearchBox().find('input').clear().type(`${message}{enter}`);
+            cy.uiGetSearchBox().first().clear().type(`${message}{enter}`);
 
             // * Should return exactly one result from the group channel and matches the message
             cy.findAllByTestId('search-item-container').should('be.visible').and('have.length', 1).within(() => {
@@ -91,7 +91,7 @@ describe('Search', () => {
             cy.uiGetSearchContainer().should('be.visible').click();
 
             //# Type "in:" text in search input
-            cy.uiGetSearchBox().find('input').type('in:');
+            cy.uiGetSearchBox().type('in:');
 
             const sortedUsernames = groupMembers.
                 map((member) => member.username).
@@ -101,7 +101,7 @@ describe('Search', () => {
             cy.uiGetSearchBox().find('.suggestion-list__main').contains(sortedUsernames.join(',')).click();
 
             //# Search for the message
-            cy.uiGetSearchBox().find('input').type('word-file{enter}');
+            cy.uiGetSearchBox().type('word-file{enter}');
 
             // # Click the files tab
             cy.get('.files-tab').should('be.visible').click();

e2e-tests/cypress/tests/integration/channels/search/search_user_file_spec.js

@@ -62,16 +62,16 @@ describe('Search in DMs', () => {
         cy.uiGetSearchContainer().should('be.visible').click();
 
         // # Type `in:` in searchbox
-        cy.uiGetSearchBox().find('input').type('in:');
+        cy.uiGetSearchBox().type('in:');
 
         // # Select user from suggestion list
         cy.contains('.suggestion-list__item', `@${otherUser.username}`).scrollIntoView().click();
 
         // # Validate searchbox contains the username
-        cy.uiGetSearchBox().find('input').should('have.value', 'in:@' + otherUser.username + ' ');
+        cy.uiGetSearchBox().should('have.value', 'in:@' + otherUser.username + ' ');
 
         // # Press Enter in searchbox
-        cy.uiGetSearchBox().find('input').type('word-file').type('{enter}');
+        cy.uiGetSearchBox().type('word-file').type('{enter}');
 
         // # Click the files tab
         cy.get('.files-tab').should('be.visible').click();

e2e-tests/cypress/tests/integration/channels/search/search_user_post_spec.js

@@ -60,16 +60,16 @@ describe('Search in DMs', () => {
 
         // # Type `in:` in searchbox
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').type('in:');
+        cy.uiGetSearchBox().type('in:');
 
         // # Select user from suggestion list
         cy.contains('.suggestion-list__item', `@${otherUser.username}`).scrollIntoView().click();
 
         // # Validate searchbox contains the username
-        cy.uiGetSearchBox().find('input').should('have.value', 'in:@' + otherUser.username + ' ');
+        cy.uiGetSearchBox().should('have.value', 'in:@' + otherUser.username + ' ');
 
         // # Press Enter in searchbox
-        cy.uiGetSearchBox().find('input').type(message).type('{enter}');
+        cy.uiGetSearchBox().type(message).type('{enter}');
 
         // # Search message in each filtered result
         cy.get('#search-items-container').find('.search-highlight').each(($el) => {

e2e-tests/cypress/tests/integration/channels/search_filter/input_spec.js

@@ -54,7 +54,7 @@ describe('Search Date Filter', () => {
 
         // # Type before: in search field
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').clear().type('before:');
+        cy.uiGetSearchBox().first().clear().type('before:');
 
         // * Day picker should be visible
         cy.get('.rdp').
@@ -68,13 +68,13 @@ describe('Search Date Filter', () => {
         cy.get('@dayPicker').should('not.exist');
 
         // * Verify date picker output gets put into field as expected date
-        cy.uiGetSearchBox().find('input').should('have.value', `before:${today} `);
+        cy.uiGetSearchBox().should('have.value', `before:${today} `);
 
         // # Click "x" to the right of the search term
-        cy.uiGetSearchBox().find('.input-clear-x').click({force: true});
+        cy.uiGetSearchBox().parent('.input-wrapper').siblings('.input-clear-x').click({force: true});
 
         // * The "x" to clear the search query has disappeared
-        cy.uiGetSearchBox().find('input').should('have.value', '');
+        cy.uiGetSearchBox().first().should('have.value', '');
 
         cy.uiGetSearchContainer().should('be.visible').click();
     });
@@ -84,7 +84,7 @@ describe('Search Date Filter', () => {
 
         // # Type before: in search field
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').clear().type('before:');
+        cy.uiGetSearchBox().first().clear().type('before:');
 
         // * Date picker should be visible
         cy.get('.rdp').
@@ -99,7 +99,7 @@ describe('Search Date Filter', () => {
         cy.get('@dayPicker').should('not.exist');
 
         // # Hit backspace with focus right after the date
-        cy.uiGetSearchBox().find('input').
+        cy.uiGetSearchBox().
             should('have.value', `before:${today} `).
             focus().
             type('{backspace}');
@@ -127,7 +127,7 @@ describe('Search Date Filter', () => {
 
         // * Filter can be removed with keyboard
         cy.uiGetSearchContainer().should('be.visible').click();
-        cy.uiGetSearchBox().find('input').
+        cy.uiGetSearchBox().
             clear().
             wait(TIMEOUTS.HALF_SEC).
             type(queryString).
@@ -135,10 +135,10 @@ describe('Search Date Filter', () => {
             should('have.value', '');
 
         // # Enter query to search box and then click "x" to the right of the search term
-        cy.uiGetSearchBox().find('input').clear().wait(TIMEOUTS.HALF_SEC).type(queryString);
+        cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type(queryString);
-        cy.uiGetSearchBox().find('.input-clear-x').click({force: true});
+        cy.uiGetSearchBox().parent('.input-wrapper').siblings('.input-clear-x').click({force: true});
 
         // * The "x" to clear the search query has disappeared
-        cy.uiGetSearchBox().find('input').should('have.value', '');
+        cy.uiGetSearchBox().should('have.value', '');
     });
 });

e2e-tests/cypress/tests/integration/channels/search_filter/negative_spec.js

@@ -65,7 +65,8 @@ describe('Negative search filters will omit results', () => {
 
 function search(query) {
     cy.reload();
-    cy.uiGetSearchBox().clear().wait(TIMEOUTS.HALF_SEC).type(query).wait(TIMEOUTS.HALF_SEC).type('{enter}');
+    cy.uiGetSearchContainer().should('be.visible').click();
+    cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type(query).wait(TIMEOUTS.HALF_SEC).type('{enter}');
 
     cy.get('#loadingSpinner').should('not.exist');
     cy.uiGetRHSSearchContainer();

e2e-tests/cypress/tests/integration/channels/toast/permalink_jump_to_spec.js

@@ -28,6 +28,7 @@ describe('Toast', () => {
         // # Search for a term e.g.test
         const searchTerm = 'test';
         cy.postMessage(searchTerm);
+        cy.uiGetSearchContainer().should('be.visible').click();
         cy.uiGetSearchBox().type(searchTerm).type('{enter}');
 
         // # Click on Jump to link in search results

e2e-tests/cypress/tests/support/ui/global_header.js

@@ -107,7 +107,7 @@ Cypress.Commands.add('uiGetSearchContainer', () => {
 });
 
 Cypress.Commands.add('uiGetSearchBox', () => {
-    return cy.get('#searchBox').should('be.visible');
+    return cy.get('.search-bar').should('be.visible');
 });
 
 Cypress.Commands.add('uiGetRecentMentionButton', () => {