Chore(cypress): Review and Fix tests failing on master (#26954)

e2e-tests/cypress/tests/fixtures/markdown/markdown_code_block.html

@@ -1 +1 @@
-<h3 class="markdown__heading">Code Blocks</h3><div class="post-code post-code--wrap"><div class="post-code__overlay"><span class="post-code__clipboard"><i role="button" class="icon icon-content-copy"></i></span></div><div class="hljs"><code>This text should render in a code block</code></div></div>
+<h3 class="markdown__heading">Code Blocks</h3><div class="post-code post-code--wrap"><div class="post-code__overlay"><span class="post-code__clipboard" aria-label="Copy code" role="button"><i class="icon icon-content-copy"></i></span></div><div class="hljs"><code>This text should render in a code block</code></div></div>

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

@@ -70,7 +70,7 @@ describe('Verify Accessibility Support in different Buttons', () => {
             tab();
 
         // # Press tab until the focus is on the Pinned messages button
-        cy.focused().tab().tab();
+        cy.focused().tab().tab().tab();
 
         // * Verify accessibility support in Pinned messages button
         cy.uiGetChannelPinButton().

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

@@ -26,7 +26,7 @@ describe('Archived channels', () => {
 
     it('MM-T1721 Archive channel posts menu should have copy link and reply options', () => {
         // # Click to add a channel description
-        cy.findByRoleExtended('button', {name: 'Add a channel header'}).should('be.visible').click();
+        cy.findByRoleExtended('button', {name: 'Set header'}).should('be.visible').click();
 
         // # Add channel header for system message
         const header = 'this is a header!';

e2e-tests/cypress/tests/integration/channels/channel_settings/channel_header_spec.ts

@@ -76,12 +76,7 @@ function hoverOnChannelDescriptionAndVerifyBehavior() {
     cy.wait(TIMEOUTS.ONE_SEC);
 
     // # Scan within channel header description area
-    cy.get('#channelHeaderDescription').should('be.visible').within(() => {
+    cy.get('#channelHeaderDescription').should('be.visible').find('span').invoke('show').click({multiple: true, force: true});
-        // * Verify that empty header text is exists and click it.
-        //   Note that it is invisible until the mouse hovers it, which is unfeasible in Cypress
-        //   https://docs.cypress.io/api/commands/hover
-        cy.findByText('Add a channel header').click({force: true});
-    });
 
     // # Scan inside the channel header modal
     cy.get('.a11y__modal.modal-dialog').should('be.visible').within(() => {

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

@@ -87,7 +87,7 @@ describe('Guest Account - Guest User Experience', () => {
 
         // * Verify Guest Badge in Channel Header
         cy.get('#channelHeaderDescription').within(($el) => {
-            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'This channel has guests');
+            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'Channel has guests');
         });
 
         // * Verify list of Users in Direct Messages Dialog

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

@@ -48,10 +48,10 @@ describe('Verify Guest User Identification in different screens', () => {
         });
     });
 
-    it('MM-T1419 Deactivating a Guest removes "This channel has guests" message from channel header', () => {
+    it('MM-T1419 Deactivating a Guest removes "Channel has guests" message from channel header', () => {
-        // * Verify the text 'This channel has guests' is displayed in the header
+        // * Verify the text 'Channel has guests' is displayed in the header
         cy.get('#channelHeaderDescription').within(($el) => {
-            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'This channel has guests');
+            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'Channel has guests');
         });
 
         // # Deactivate Guest user
@@ -61,7 +61,7 @@ describe('Verify Guest User Identification in different screens', () => {
         cy.get('.SidebarChannel:contains(Town Square)').click();
         cy.get(`.SidebarChannel:contains(${testChannel.display_name})`).click();
 
-        // * Verify the text 'This channel has guests' is removed from the header
+        // * Verify the text 'Channel has guests' is removed from the header
         cy.get('#channelHeaderDescription').within(($el) => {
             cy.wrap($el).find('.has-guest-header').should('not.exist');
         });

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

@@ -173,7 +173,7 @@ describe('Verify Guest User Identification in different screens', () => {
         // * Verify Guest Badge in DM header
         cy.get('#channelHeaderTitle').should('be.visible').find('.Tag').should('be.visible').and('have.text', 'GUEST');
         cy.get('#channelHeaderDescription').within(($el) => {
-            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'This channel has guests');
+            cy.wrap($el).find('.has-guest-header').should('be.visible').and('have.text', 'Channel has guests');
         });
 
         // # Open a GM with Guest User and Sysadmin

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/support_packet_generation_spec.js

@@ -27,7 +27,7 @@ describe('Support Packet Generation', () => {
 
         goToSupportPacketGenerationModal();
 
-        cy.get('.AlertBanner__body').should('have.text', 'Before downloading the support packet, set Output Logs to File to true and set File Log Level to DEBUG here.');
+        cy.get('div.AlertBanner__body span').should('have.text', 'Before downloading the Support Packet, set Output Logs to File to true and set File Log Level to DEBUG here.');
     });
 
     it('MM-T3818 - Commercial Support Dialog UI - Links', () => {
@@ -37,7 +37,7 @@ describe('Support Packet Generation', () => {
         goToSupportPacketGenerationModal();
 
         // * Verify that the "submit a support ticket." link exist and points to Customer Support Request page
-        cy.findByRole('link', {name: 'submit a support ticket.'}).should('have.attr', 'href').and('include', 'https://support.mattermost.com/hc/en-us/requests/new');
+        cy.findByText('submit a support ticket').should('have.attr', 'href').and('include', 'https://support.mattermost.com/hc/en-us/requests/new');
 
         // * Verify that the "here" link exist and points to Logging admin page
         cy.findByRole('link', {name: 'here'}).should('have.attr', 'href').and('include', '/admin_console/environment/logging');
@@ -50,5 +50,5 @@ const goToSupportPacketGenerationModal = () => {
     cy.findByRole('button', {name: 'Commercial Support dialog'}).click();
 
     // * Ensure the download support packet button exist and that text regarding setting the proper settings exist
-    cy.findByRole('link', {name: 'Download Support Packet'}).should('exist');
+    cy.get('a.DownloadSupportPacket').should('exist');
 };

e2e-tests/cypress/tests/integration/channels/integrations/integrations_spec.js

@@ -194,7 +194,7 @@ describe('Integrations page', () => {
 
         integrationPageTitleIsBold('Incoming Webhooks');
         integrationPageTitleIsBold('Outgoing Webhooks');
-        integrationPageTitleIsBold('Slash Commands');
+        integrationPageTitleIsBold('Slash Commands', false);
         integrationPageTitleIsBold('OAuth 2.0 Applications');
         integrationPageTitleIsBold('Bot Accounts');
     });
@@ -443,7 +443,7 @@ describe('Integrations page', () => {
     });
 });
 
-function integrationPageTitleIsBold(title) {
+function integrationPageTitleIsBold(title, isBold = true) {
     cy.get('.section-title__text').contains(title).click();
-    cy.get('.item-details__name').should('be.visible').and('have.css', 'font-weight', '400');
+    cy.get('.item-details__name').should('be.visible').and('have.css', 'font-weight', isBold ? '600' : '400');
 }

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

@@ -48,7 +48,10 @@ describe('Keyboard Shortcuts', () => {
             cy.get('.status--group').click();
 
             // * Check if channel intro message with usernames is visible
-            cy.findByText(/This is the start/).should('be.visible').contains(secondUser.username).contains(thirdUser.username);
+            cy.get('.channel-intro__text').contains('This is the start of your group message history with these teammates').
+                should('be.visible');
+
+            cy.get('.channel-intro__title').contains(secondUser.username).contains(thirdUser.username);
         });
     });
 });

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

@@ -26,7 +26,7 @@ describe('Keyboard Shortcuts', () => {
         cy.postMessage(message);
 
         // # Open the edit the channel header modal
-        cy.findByRole('button', {name: 'Set a Header dialog'}).click();
+        cy.get('[aria-label="Set header dialog"]').click();
 
         // * Verify modal is open
         cy.findByRole('dialog', {name: 'Edit Header for Off-Topic'}).within(() => {

e2e-tests/cypress/tests/integration/channels/markdown/markdown_text_spec.js

@@ -49,7 +49,7 @@ describe('Markdown message', () => {
     testCases.forEach((testCase) => {
         it(testCase.name, () => {
             // #  Post markdown message
-            cy.postMessageFromFile(`markdown/${testCase.fileKey}.md`).wait(TIMEOUTS.FIVE_SEC);
+            cy.postMessageFromFile(`markdown/${testCase.fileKey}.md`).wait(TIMEOUTS.TWO_SEC);
 
             // * Verify that HTML Content is correct
             cy.compareLastPostHTMLContentFromFile(`markdown/${testCase.fileKey}.html`);
@@ -58,14 +58,10 @@ describe('Markdown message', () => {
 
     it('Markdown - block quotes 2', () => {
         const baseUrl = Cypress.config('baseUrl');
-        const expectedHtml = `<h3 class="markdown__heading">Block Quotes</h3><p><strong>The following markdown should render within the block quote:</strong></p>
+        const expectedHtml = `<h3 class="markdown__heading">Block Quotes</h3><p><strong>The following markdown should render within the block quote:</strong></p>\n<blockquote>\n<h4 class="markdown__heading">Heading 4</h4><p><em>Italics</em>, <em>Italics</em>, <strong>Bold</strong>, <strong><em>Bold-italics</em></strong>, <strong><em>Bold-italics</em></strong>, <del>Strikethrough</del>\n<span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" data-testid="postEmoji.:slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" data-testid="postEmoji.:slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="wink"><span alt=":wink:" class="emoticon" data-testid="postEmoji.:wink:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f609.png&quot;);">:wink:</span></span> <span data-emoticon="scream"><span alt=":scream:" class="emoticon" data-testid="postEmoji.:scream:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f631.png&quot;);">:scream:</span></span> <span data-emoticon="bamboo"><span alt=":bamboo:" class="emoticon" data-testid="postEmoji.:bamboo:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38d.png&quot;);">:bamboo:</span></span> <span data-emoticon="gift_heart"><span alt=":gift_heart:" class="emoticon" data-testid="postEmoji.:gift_heart:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f49d.png&quot;);">:gift_heart:</span></span> <span data-emoticon="dolls"><span alt=":dolls:" class="emoticon" data-testid="postEmoji.:dolls:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38e.png&quot;);">:dolls:</span></span></p>\n</blockquote>`;
-<blockquote>
-<h4 class="markdown__heading">Heading 4</h4><p><em>Italics</em>, <em>Italics</em>, <strong>Bold</strong>, <strong><em>Bold-italics</em></strong>, <strong><em>Bold-italics</em></strong>, <del>Strikethrough</del>
-<span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" title=":slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" title=":slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="wink"><span alt=":wink:" class="emoticon" title=":wink:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f609.png&quot;);">:wink:</span></span> <span data-emoticon="scream"><span alt=":scream:" class="emoticon" title=":scream:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f631.png&quot;);">:scream:</span></span> <span data-emoticon="bamboo"><span alt=":bamboo:" class="emoticon" title=":bamboo:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38d.png&quot;);">:bamboo:</span></span> <span data-emoticon="gift_heart"><span alt=":gift_heart:" class="emoticon" title=":gift_heart:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f49d.png&quot;);">:gift_heart:</span></span> <span data-emoticon="dolls"><span alt=":dolls:" class="emoticon" title=":dolls:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38e.png&quot;);">:dolls:</span></span></p>
-</blockquote>`;
 
         // #  Post markdown message
-        cy.postMessageFromFile('markdown/markdown_block_quotes_2.md').wait(TIMEOUTS.FIVE_SEC);
+        cy.postMessageFromFile('markdown/markdown_block_quotes_2.md').wait(TIMEOUTS.TWO_SEC);
 
         // * Verify that HTML Content is correct
         cy.getLastPostId().then((postId) => {

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

@@ -57,7 +57,7 @@ describe('Messaging', () => {
             cy.get('.channel-intro__text').
                 should('be.visible').
                 and('contain', `This is the start of your direct message history with ${secondUser.username}.`).
-                and('contain', 'Direct messages and files shared here are not shown to people outside this area.');
+                and('contain', 'Messages and files shared here are not shown to anyone else.');
         });
 
         // # Verify that the focus is on the message box

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

@@ -15,7 +15,7 @@ function emojiVerification(postId) {
     const postMessageTextId = `#postMessageText_${postId}`;
 
     // * Check for the emoji attr of :) is exists
-    cy.get(`${postMessageTextId} p span span.emoticon`).should('have.attr', 'title', ':slightly_smiling_face:');
+    cy.get(`${postMessageTextId} p span span.emoticon`).should('have.attr', 'alt', ':slightly_smiling_face:');
 
     // * Check for the punctuation('=') is exists without space
     cy.get(`${postMessageTextId} p`).should('same.text', ':slightly_smiling_face:=');

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

@@ -36,6 +36,6 @@ describe('Messaging', () => {
         cy.uiGetPostTextBox().type('{enter}');
 
         // * The emoji should be displayed in the post at the position inserted.
-        cy.getLastPost().find('p').should('have.html', `Hello <span data-emoticon="grinning"><span alt=":grinning:" class="emoticon" title=":grinning:" style="background-image: url(&quot;${Cypress.config('baseUrl')}/static/emoji/1f600.png&quot;);">:grinning:</span></span> World!`);
+        cy.getLastPost().find('p').should('have.html', `Hello <span data-emoticon="grinning"><span alt=":grinning:" class="emoticon" data-testid="postEmoji.:grinning:" style="background-image: url(&quot;${Cypress.config('baseUrl')}/static/emoji/1f600.png&quot;);">:grinning:</span></span> World!`);
     });
 });

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

@@ -99,7 +99,7 @@ describe('MM-T154 Use keyboard navigation in emoji picker', () => {
             cy.uiGetPostTextBox().type('{enter}');
 
             // * Compare selected emoji with last post
-            cy.getLastPost().find('.emoticon').should('have.attr', 'title', selectedEmoji);
+            cy.getLastPost().find('.emoticon').should('have.attr', 'alt', selectedEmoji);
         });
     });
 });

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

@@ -42,13 +42,15 @@ describe('Messaging', () => {
                 cy.postMessage(gesture + skinTone);
 
                 // * Check if gesture with skin tone is visible
-                cy.findByTitle(gesture + skinTone).should('be.visible');
+                cy.getLastPost().within(() => {
+                    cy.get('span[data-emoticon] span').should('be.visible').should('have.attr', 'alt', gesture + skinTone);
+                });
 
                 // # Set viewport to mobile
                 cy.viewport('iphone-se2');
 
                 // * Check if gesture with skin tone is visible
-                cy.findByTitle(gesture + skinTone).should('be.visible');
+                cy.get('span[data-emoticon] span').should('be.visible');
             });
         });
     });

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

@@ -69,7 +69,8 @@ function createAndVerifyMessage(message, isCode) {
             cy.get('@' + alias).
                 children().should('have.class', 'all-emoji').
                 children().find('span').last().should('have.class', 'emoticon').
-                and('have.attr', 'title', message.trim() === ':D' ? ':smile:' : ':taco:');
+                and('have.attr', 'alt', message.trim() === ':D' ? ':smile:' : ':taco:').
+                and('have.text', message.trim() === ':D' ? ':smile:' : ':taco:');
         });
     }
 }

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

@@ -157,7 +157,7 @@ function verifyFocusInAddChannelMemberModal() {
     cy.get('#selectItems input').should('have.value', 'A');
 
     // # Click anywhere in the modal that is not on a field that can take focus
-    cy.get('.channel-invite__header').click();
+    cy.get('#deletePostModalLabel > span').click();
 
     // * Note the focus has been removed from the search box
     cy.get('#selectItems input').should('not.be.focused');

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

@@ -43,7 +43,7 @@ describe('Messaging', () => {
     function verifyPostedMessage(postId, text) {
         cy.get(`#postMessageText_${postId}`).should('be.visible').within((el) => {
             cy.wrap(el).should('have.text', text);
-            cy.get('.emoticon').should('be.visible').and('have.attr', 'title', ':confused:');
+            cy.get('.emoticon').should('be.visible').and('have.attr', 'alt', ':confused:').and('have.text', ':confused:');
         });
     }
 });

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

@@ -79,7 +79,7 @@ describe('Emoji reactions to posts/messages in GM channels', () => {
             cy.viewport('iphone-6');
 
             // * Verify that the Add Reaction button is once again visible
-            cy.findByLabelText('Add a reaction').should('be.visible');
+            cy.findByLabelText('Add a reaction').scrollIntoView().should('be.visible');
         });
     });
 });

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

@@ -72,7 +72,7 @@ describe('Messaging', () => {
                 cy.wait(TIMEOUTS.FIVE_SEC).url().should('include', `/${testTeam.name}/channels/${testPrivateChannel.name}`).and('not.include', `/${permalinkPostId}`);
 
                 // * Check if the matching channel intro title is visible
-                cy.get('#channelIntro').contains('.channel-intro__title', `Beginning of ${testPrivateChannel.display_name}`).scrollIntoView().should('be.visible');
+                cy.get('#channelIntro').contains('p.channel-intro__text', `This is the start of ${testPrivateChannel.display_name}`).scrollIntoView().should('be.visible');
             });
 
             // # Get last post id from open channel

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

@@ -114,7 +114,8 @@ describe('Messaging', () => {
 
     it('MM-T2195 Emoji reaction - not available on system message Save - not available on system message Pin - not available on system message Can delete your own system message', () => {
         // # Click add a channel header
-        cy.findByRoleExtended('button', {name: 'Add a channel header'}).should('be.visible').click();
+        cy.get('button.header-placeholder').invoke('show').trigger('mouseover');
+        cy.findByRoleExtended('button', {name: 'Add a channel header'}).trigger('mouseover').should('be.visible').click();
 
         // # Add or update a channel header
         cy.get('#editChannelHeaderModalLabel').should('be.visible');

e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/gm_header_spec.js

@@ -48,6 +48,7 @@ describe('Multi-user group header', () => {
         cy.visit(`/${testTeam.name}/channels/${groupChannel.name}`);
 
         // * no channel header is set
+        cy.get('button.header-placeholder').invoke('show').trigger('mouseover');
         cy.contains('#channelHeaderDescription button span', 'Add a channel header').should('be.visible');
 
         // # click add a channel heander

e2e-tests/cypress/tests/integration/channels/settings/display/message_display_mode_colorize_username_spec.js

@@ -141,7 +141,7 @@ function goToMessageDisplaySetting() {
     // # Go to Settings modal - Display section - Message Display
     cy.uiOpenSettingsModal('Display').within(() => {
         cy.get('#displayButton').scrollIntoView().click();
-        cy.get('#message_displayEdit').should('be.visible');
+        cy.get('#message_displayEdit').scrollIntoView().should('be.visible');
         cy.get('#message_displayEdit').click();
     });
 }

e2e-tests/cypress/tests/integration/channels/settings/display/theme/code_theme_colors_spec.js

@@ -38,7 +38,7 @@ describe('Settings > Display > Theme > Custom Theme Colors', () => {
             cy.get('#centerChannelStyles').click({force: true}).wait(TIMEOUTS.ONE_HUNDRED_MILLIS);
 
             // # Select custom code theme
-            cy.get('#codeThemeSelect').scrollIntoView().should('be.visible').select(theme.name);
+            cy.get('#codeThemeSelect').should('be.visible').scrollIntoView().select(theme.name);
 
             // * Verify that the setting changes in the background?
             verifyLastPostStyle(theme);

e2e-tests/cypress/tests/integration/channels/settings/display/theme/settings_view_spec.js

@@ -36,10 +36,10 @@ function verifyMinDisplayView() {
     cy.get('#clockTitle').should('be.visible', 'contain', 'Clock Display');
     cy.get('#clockEdit').should('be.visible', 'contain', 'Edit');
 
-    cy.get('#name_formatTitle').should('be.visible', 'contain', 'Teammate Name Display');
+    cy.get('#name_formatTitle').scrollIntoView().should('be.visible', 'contain', 'Teammate Name Display');
     cy.get('#name_formatEdit').should('be.visible', 'contain', 'Edit');
 
-    cy.get('#collapseTitle').should('be.visible', 'contain', 'Default appearance of image previews');
+    cy.get('#collapseTitle').scrollIntoView().should('be.visible', 'contain', 'Default appearance of image previews');
     cy.get('#collapseEdit').should('be.visible', 'contain', 'Edit');
 
     cy.get('#message_displayTitle').scrollIntoView().should('be.visible', 'contain', 'Message Display');

e2e-tests/cypress/tests/integration/channels/signin_authentication/login_open_server_spec.js

@@ -62,7 +62,7 @@ describe('Login page with open server', () => {
         cy.findByText('Forgot your password?').should('exist').and('be.visible').should('have.attr', 'href', '/reset_password');
 
         // * Verify create an account link is present
-        cy.findByText('Don\'t have an account?').should('exist').and('be.visible').should('have.attr', 'href', '/signup_user_complete');
+        cy.findByText('Don\'t have an account?').should('exist').and('be.visible').should('have.attr', 'href').and('contain', '/signup_user_complete');
 
         // # Move inside of footer section
         cy.get('.hfroute-footer').should('exist').and('be.visible').within(() => {
@@ -75,19 +75,19 @@ describe('Login page with open server', () => {
 
             // * Check if about footer link is present
             cy.findByText('About').should('exist').
-                and('have.attr', 'href', config.SupportSettings.AboutLink || ABOUT_LINK);
+                and('have.attr', 'href').and('contain', config.SupportSettings.AboutLink || ABOUT_LINK);
 
             // * Check if privacy footer link is present
             cy.findByText('Privacy Policy').should('exist').
-                and('have.attr', 'href', config.SupportSettings.PrivacyPolicyLink || PRIVACY_POLICY_LINK);
+                and('have.attr', 'href').and('contain', config.SupportSettings.PrivacyPolicyLink || PRIVACY_POLICY_LINK);
 
             // * Check if terms footer link is present
             cy.findByText('Terms').should('exist').
-                and('have.attr', 'href', config.SupportSettings.TermsOfServiceLink || TERMS_OF_SERVICE_LINK);
+                and('have.attr', 'href').and('contain', config.SupportSettings.TermsOfServiceLink || TERMS_OF_SERVICE_LINK);
 
             // * Check if help footer link is present
             cy.findByText('Help').should('exist').
-                and('have.attr', 'href', config.SupportSettings.HelpLink || HELP_LINK);
+                and('have.attr', 'href').and('contain', config.SupportSettings.HelpLink || HELP_LINK);
 
             const todaysDate = new Date();
             const currentYear = todaysDate.getFullYear();

e2e-tests/cypress/tests/integration/channels/system_console/environment_spec.js

@@ -39,14 +39,8 @@ describe('Environment', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // clicking on edit button
+            // # Verify upload icon button is visible
-            cy.get('#team_iconEdit').should('be.visible').click();
+            cy.get('i[title="Edit Icon"]').should('be.visible');
-
-            // verify the settings picture button is visible to click
-            cy.findByTestId('inputSettingPictureButton').should('be.visible').click();
-
-            // * Before uploading the picture the save button must be disabled
-            cy.uiSaveButton().should('be.disabled');
 
             // # Upload a file on center view
             cy.findByTestId('uploadPicture').attachFile(mattermostIcon);
@@ -89,14 +83,8 @@ describe('Environment', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // clicking on edit button
+            // # Verify upload icon button is visible
-            cy.get('#team_iconEdit').should('be.visible').click();
+            cy.get('i[title="Edit Icon"]').should('be.visible');
-
-            // verify the settings picture button is visible to click
-            cy.findByTestId('inputSettingPictureButton').should('be.visible').click();
-
-            // * Before uploading the picture the save button must be disabled
-            cy.uiSaveButton().should('be.disabled');
 
             // # Upload a file on center view
             cy.findByTestId('uploadPicture').attachFile(mattermostIcon);
@@ -139,14 +127,8 @@ describe('Environment', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // clicking on edit button
+            // # Verify upload icon button is visible
-            cy.get('#team_iconEdit').should('be.visible').click();
+            cy.get('i[title="Edit Icon"]').should('be.visible');
-
-            // verify the settings picture button is visible to click
-            cy.findByTestId('inputSettingPictureButton').should('be.visible').click();
-
-            // * Before uploading the picture the save button must be disabled
-            cy.uiSaveButton().should('be.disabled');
 
             // # Upload a file on center view
             cy.findByTestId('uploadPicture').attachFile(mattermostIcon);

e2e-tests/cypress/tests/integration/channels/system_console/inactive_users_spec.js

@@ -23,8 +23,10 @@ describe('System Console', () => {
         // # Go to users management page
         cy.visit('/admin_console/user_management/users');
 
-        // # Select inactive users
+        // # Select Deactivated users
-        cy.get('#selectUserStatus').select('Inactive');
+        cy.get('div.systemUsersFilterContainer button').click();
+        cy.get('#DropdownInput_filterStatus').click();
+        cy.get('#react-select-5-option-2').click();
 
         cy.apiGetAnalytics().then(({analytics}) => {
             const inactiveUsers = analytics.filter((d) => {

e2e-tests/cypress/tests/integration/channels/system_console/main_menu_spec.js

@@ -19,11 +19,16 @@ describe('Main menu', () => {
     });
 
     const verifyLink = (text, link) => {
+        cy.get('li.MenuItem').
+            contains(text).
+            scrollIntoView().
+
         // * Verify link opens in new tab
-        cy.get('a[href="' + link + '"]').scrollIntoView().should('have.attr', 'target', '_blank');
+            should('have.attr', 'target', '_blank').
 
         // * Verify link text matches correct href value
-        cy.get('a[href="' + link + '"]').contains(text);
+            should('have.attr', 'href').
+            and('contain', link);
     };
 
     it('MM-T909 Can switch to team', () => {

e2e-tests/cypress/tests/integration/channels/system_console/reporting/team_statistics_spec.js

@@ -38,7 +38,7 @@ describe('System Console > Team Statistics', () => {
         cy.get('.grid-statistics__card').should('have.length', 4);
 
         // * Check that the title content for the stats is as expected.
-        cy.get('.admin-console__content').eq(0).find('.title').eq(0).should('contain', 'Total Active Users');
+        cy.get('.admin-console__content').eq(0).find('.title').eq(0).should('contain', 'Total Activated Users');
         cy.get('.admin-console__content').eq(0).find('.title').eq(1).should('contain', 'Public Channels');
         cy.get('.admin-console__content').eq(0).find('.title').eq(2).should('contain', 'Private Channels');
         cy.get('.admin-console__content').eq(0).find('.title').eq(3).should('contain', 'Total Posts');

e2e-tests/cypress/tests/integration/channels/system_console/site_configuration/announcement_banner_spec.js

@@ -34,7 +34,7 @@ describe('Announcement Banner', () => {
         cy.findByTestId('AnnouncementSettings.EnableBanner').
             should('be.visible').
             within(() => {
-                cy.findByText('true').
+                cy.findByTestId('AnnouncementSettings.EnableBannertrue').
                     should('be.visible').
                     click({force: true});
             });
@@ -75,7 +75,7 @@ describe('Announcement Banner', () => {
         cy.findByTestId('AnnouncementSettings.AllowBannerDismissal').
             should('be.visible').
             within(() => {
-                cy.findByText('true').
+                cy.findByTestId('AnnouncementSettings.AllowBannerDismissaltrue').
                     should('be.visible').
                     click({force: true});
             });

e2e-tests/cypress/tests/integration/channels/system_console/site_configuration/customization_spec.js

@@ -11,6 +11,7 @@
 // Group: @channels @system_console
 
 import * as TIMEOUTS from '../../../../fixtures/timeouts';
+import {getRandomId} from '../../../../utils';
 
 describe('Customization', () => {
     beforeEach(() => {
@@ -46,8 +47,8 @@ describe('Customization', () => {
         cy.url().should('include', '/login');
 
         // * Ensure Site Name and Description are shown the updated values in the login screen
-        cy.findByRole('link', {name: siteName}).should('be.visible');
+        cy.get('div.header-main a').should('be.visible').should('have.text', siteName);
-        cy.get('.login-body-card-title').should('have.text', siteDescription);
+        cy.get('p.login-body-card-title').should('have.text', siteDescription);
     });
 
     it('MM-T1025 - Site Name - Product Menu ➜ About and About Modal show custom name', () => {
@@ -156,6 +157,8 @@ describe('Customization', () => {
     });
 
     it('MM-T1029 - Custom branding text can render markdown text', () => {
+        const emojiText = getRandomId(3);
+
         // # Visit emoji system console page
         cy.visit('/admin_console/site_config/emoji');
         cy.get('.admin-console__header').should('be.visible').and('have.text', 'Emoji');
@@ -173,7 +176,7 @@ describe('Customization', () => {
         // * Ensure the form is visible
         cy.get('.backstage-form').should('be.visible').within(() => {
             // # Fill the emoji data
-            cy.get('input#name').clear().type('yay');
+            cy.get('input#name').clear().type(emojiText);
             cy.get('input#select-emoji').attachFile('mattermost-icon.png');
 
             // # Save emoji
@@ -189,7 +192,7 @@ describe('Customization', () => {
         cy.get('.admin-console__header').should('be.visible').and('have.text', 'Customization');
 
         // eslint-disable-next-line no-irregular-whitespace
-        const customBrandText = `​​​​:yay:
+        const customBrandText = `​​​​:${emojiText}:
 :smile:
 
 - This is a bullet point
@@ -214,12 +217,8 @@ describe('Customization', () => {
         cy.url().should('include', '/login');
 
         cy.get('.login-body-custom-branding-markdown').first().scrollIntoView().should('be.visible').within(() => {
-            // * Ensure custom emoji has been rendered
-            // ToDo: uncomment after fixing MM-12657
-            //cy.get('span.emoticon').should('have.attr', 'title', ':yay:');
-
             // * Ensure default emoji has been rendered
-            cy.get('span.emoticon').should('have.attr', 'title', ':smile:');
+            cy.get('span.emoticon').should('have.attr', 'alt', ':smile:');
 
             // * Ensure the list and two bullets have been rendered
             cy.get('ul.markdown__list').should('be.visible').within(() => {
@@ -306,7 +305,7 @@ describe('Customization', () => {
         cy.url().should('include', '/login');
 
         // * Ensure that the custom Site Name is shown
-        cy.findByRole('link', {name: siteName}).should('be.visible');
+        cy.get('div.header-main a').should('be.visible').should('have.text', siteName);
 
         // # Log back in as an administrator
         cy.apiAdminLogin();

e2e-tests/cypress/tests/integration/channels/system_console/site_configuration/link_customization_cloud_spec.js

@@ -28,14 +28,15 @@ describe('SupportSettings', () => {
             // * Verify links changed
             [
                 {text: 'Ask the community', link: SupportSettings.ASK_COMMUNITY_LINK},
-                {text: 'Help resources', link: SupportSettings.HELP_LINK},
+                {text: 'Mattermost user guide', link: SupportSettings.MATTERMOST_USER_GUIDE},
                 {text: 'Report a problem', link: SupportSettings.REPORT_A_PROBLEM_LINK},
                 {text: 'Keyboard shortcuts'},
             ].forEach(({text, link}) => {
                 if (link) {
                     cy.findByText(text).
                         parent().
-                        should('have.attr', 'href', link);
+                        should('have.attr', 'href').
+                        and('contain', link);
                 } else {
                     cy.findByText(text);
                 }
@@ -58,7 +59,8 @@ describe('SupportSettings', () => {
         // * Verify that links are correct at login page
         guides.forEach((guide) => {
             cy.findByText(guide.text).
-                should('have.attr', 'href', guide.link);
+                should('have.attr', 'href').
+                and('contain', guide.link);
         });
 
         // # Visit signup page
@@ -68,7 +70,8 @@ describe('SupportSettings', () => {
         // * Verify that links are correct at signup page
         guides.forEach((guide) => {
             cy.findByText(guide.text).
-                should('have.attr', 'href', guide.link);
+                should('have.attr', 'href').
+                and('contain', guide.link);
         });
     });
 });

e2e-tests/cypress/tests/integration/channels/system_console/user_management/users_deactivation_not_cloud_spec.js

@@ -35,31 +35,28 @@ describe('System Console > User Management > Deactivation', () => {
         cy.findByPlaceholderText('Search users').should('be.visible').clear().type(testUser.email).wait(TIMEOUTS.HALF_SEC);
 
         // * Verify that user is listed
-        cy.findByText(`@${testUser.username}`).should('be.visible');
+        cy.findByText(`${testUser.username}`).should('be.visible');
 
-        // # Scan on the first item's row in the list
+        // * Verify before deactivation email is visible
-        cy.findByTestId('userListRow').should('be.visible').within(() => {
+        cy.get('#systemUsersTable-cell-0_emailColumn').should('be.visible').should('have.text', testUser.email);
-            // * Verify before deactivation email is visible
-            cy.findByText(testUser.email).should('be.visible');
 
-            // # Open the actions menu.
+        // # Open the actions menu.
-            cy.findByText('Member').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('#actionMenuButton-systemUsersTable-0').should('have.text', 'Member').click().wait(TIMEOUTS.HALF_SEC);
 
-            // # Click on deactivate menu button
+        // # Click on deactivate menu button
-            cy.findByLabelText('User Actions Menu').findByText('Deactivate').click();
+        cy.get('#actionMenuItem-systemUsersTable-0-deactivate').should('have.text', 'Deactivate').click();
-        });
 
         // # Click confirm deactivate in the modal
         cy.get('.a11y__modal').should('exist').and('be.visible').within(() => {
             cy.findByText('Deactivate').should('be.visible').click();
         });
 
-        cy.findByTestId('userListRow').should('be.visible').within(() => {
+        cy.get('#actionMenuButton-systemUsersTable-0').should('have.text', 'Deactivated').should('be.visible');
-            // * Verify that the user is now inactive
-            cy.findByText('Inactive').should('be.visible');
 
-            // * Verify once again if email is visible
+        // * Verify once again if email is visible
-            cy.findByText(testUser.email).should('be.visible');
+        cy.findByText(testUser.email).should('be.visible');
-        });
+
+        // * Verify once again if email is visible
+        cy.get('#systemUsersTable-cell-0_emailColumn').should('be.visible').should('have.text', testUser.email);
     });
 });

e2e-tests/cypress/tests/integration/channels/system_console/user_management_not_cloud_spec.js

@@ -155,21 +155,17 @@ describe('User Management', () => {
         cy.visit('/admin_console/user_management/users');
 
         // # Search for the user.
-        cy.get('#searchUsers').clear().type(user.email, {delay: TIMEOUTS.ONE_HUNDRED_MILLIS}).wait(TIMEOUTS.HALF_SEC);
+        cy.get('#input_searchTerm').clear().type(user.email, {delay: TIMEOUTS.ONE_HUNDRED_MILLIS}).wait(TIMEOUTS.HALF_SEC);
 
-        cy.findByTestId('userListRow').within(() => {
+        cy.get('#actionMenuButton-systemUsersTable-0').click().wait(TIMEOUTS.HALF_SEC);
-            if (activate) {
-                cy.findByText('Inactive').click().wait(TIMEOUTS.HALF_SEC);
 
-                // # Click on the "Activate" button.
+        if (activate) {
-                cy.findByLabelText('User Actions Menu').findByText('Activate').click();
+            // # Click on the "Activate" button.
-            } else {
+            cy.get('#actionMenuItem-systemUsersTable-0-active').click().wait(TIMEOUTS.HALF_SEC);
-                cy.findByText('Member').click().wait(TIMEOUTS.HALF_SEC);
+        } else {
-
+            // # Click on the "Deactivate" button.
-                // # Click on the "Deactivate" button.
+            cy.get('#actionMenuItem-systemUsersTable-0-deactivate').click().wait(TIMEOUTS.HALF_SEC);
-                cy.findByLabelText('User Actions Menu').findByText('Deactivate').click();
+        }
-            }
-        });
 
         if (!activate) {
             // # Verify the modal opened and then confirm.

e2e-tests/cypress/tests/integration/channels/system_console/user_management_spec.js

@@ -187,7 +187,7 @@ describe('User Management', () => {
             cy.get('#input_searchTerm').clear().type(gitlabUser.email).wait(TIMEOUTS.HALF_SEC);
 
             // # Open actions menu.
-            cy.get('#systemUsersTable-cell-0_actionsColumn').click();
+            cy.get('#systemUsersTable-cell-0_actionsColumn').click().wait(TIMEOUTS.HALF_SEC);
 
             // * Verify Switch to Email/Password is visible.
             cy.findByText('Switch to Email/Password').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);

e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js

@@ -123,7 +123,7 @@ describe('Team Settings', () => {
         // * Check that the display name of the team the user was invited to is being correctly displayed
         cy.uiGetLHSHeader().findByText(testTeam.display_name);
 
-        // * Check that the 'Beginning of Town Square' message is visible
+        // * Check that the 'Town Square' channel title is visible
-        cy.findByText('Beginning of Town Square').should('be.visible');
+        cy.get('h2.channel-intro__title').should('be.visible').should('have.text', 'Town Square');
     });
 });

e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js

@@ -76,7 +76,7 @@ describe('Teams Suite', () => {
             // # Open team menu and click "Invite People"
             cy.uiOpenTeamMenu();
             cy.uiGetLHSTeamMenu().findByText('Add people to the team');
-            cy.uiGetLHSTeamMenu().findByText('Invite People').click();
+            cy.uiGetLHSTeamMenu().findByText('Invite People').click().wait(TIMEOUTS.HALF_SEC);
 
             // * Check that the Invitation Modal opened up
             cy.findByTestId('invitationModal', {timeout: TIMEOUTS.HALF_SEC}).should('be.visible');
@@ -134,7 +134,7 @@ describe('Teams Suite', () => {
                     and('have.text', 'System');
                 cy.wrap($el).get('.post-message__text-container').
                     should('be.visible').
-                    and('contain', `@${sysadmin.username} joined the team.`).
+                    and('contain', `@${sysadmin.username} and @${testUser.username} joined the team.`).
                     and('contain', `You were added to the team by @${sysadmin.username}.`);
             });
 
@@ -145,7 +145,7 @@ describe('Teams Suite', () => {
                     and('have.text', 'System');
                 cy.wrap($el).get('.post-message__text-container').
                     should('be.visible').
-                    and('contain', `@${sysadmin.username} joined the channel.`).
+                    and('contain', `@${sysadmin.username} and @${testUser.username} joined the channel.`).
                     and('contain', `You were added to the channel by @${sysadmin.username}.`);
             });
 
@@ -283,7 +283,7 @@ describe('Teams Suite', () => {
 
         // # Verify Town square is visible
         cy.url().should('include', `/${testTeam.name}/channels/town-square`);
-        cy.findByText('Beginning of Town Square').should('be.visible');
+        cy.get('h2.channel-intro__title').should('be.visible').should('have.text', 'Town Square');
     });
 
     it('MM-T2322 Do not allow anyone to join this team', () => {

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

@@ -138,7 +138,7 @@ describe('Toast', () => {
             cy.uiClickSidebarItem(testChannelName);
 
             // # Scroll up so bottom is not visible
-            scrollUp();
+            scrollUpAndPostAMessage(otherUser, testChannelId, oldPostNumber);
 
             // # New message toast is present with expected number of messages
             cy.get('div.toast').should('be.visible');

e2e-tests/cypress/tests/utils/constants.js

@@ -2,12 +2,13 @@
 // See LICENSE.txt for license information.
 
 export const FEEDBACK_EMAIL = 'test@example.com';
-export const ABOUT_LINK = 'https://docs.mattermost.com/pl/about-mattermost';
+export const ABOUT_LINK = 'https://mattermost.com/pl/about-mattermost';
 export const ASK_COMMUNITY_LINK = 'https://mattermost.com/pl/default-ask-mattermost-community/';
 export const HELP_LINK = 'https://mattermost.com/pl/help/';
 export const PRIVACY_POLICY_LINK = 'https://mattermost.com/pl/privacy-policy/';
 export const REPORT_A_PROBLEM_LINK = 'https://mattermost.com/pl/report-a-bug';
 export const TERMS_OF_SERVICE_LINK = 'https://mattermost.com/pl/terms-of-use/';
+export const MATTERMOST_USER_GUIDE = 'https://docs.mattermost.com/guides/use-mattermost.html';
 
 export const CLOUD = 'Cloud';
 export const E20 = 'E20';
@@ -25,7 +26,9 @@ export const SupportSettings = {
     PRIVACY_POLICY_LINK,
     REPORT_A_PROBLEM_LINK,
     TERMS_OF_SERVICE_LINK,
+    MATTERMOST_USER_GUIDE,
 };
+
 export const FixedCloudConfig = {
     EmailSettings: {
         FEEDBACK_EMAIL,