MM-52641 MM-52645 Playwright/Accessibility: Initial setup and accessibility fix on login page (#23254)

* MM-52641 Playwright/Accessibility: initial setup

* upgrade Playwright to 1.36.1

* fix accessibility at login page

* fix lint

* update snapshot

e2e-tests/playwright/README.md

@@ -45,7 +45,7 @@ npm run test
 Change to root directory, run docker container
 
 ```
-docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.32.0-focal /bin/bash
+docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.36.0-focal /bin/bash
 ```
 
 #### 2. Inside the docker container

e2e-tests/playwright/global_setup.ts

@@ -4,7 +4,7 @@
 import {expect} from '@playwright/test';
 
 import {UserProfile} from '@mattermost/types/users';
-import { PreferenceType } from '@mattermost/types/preferences';
+import {PreferenceType} from '@mattermost/types/preferences';
 
 import {Client, createRandomTeam, getAdminClient, getDefaultAdminUser, makeClient} from './support/server';
 import {defaultTeam} from './support/util';
@@ -197,10 +197,15 @@ async function savePreferences(client: Client, userId: UserProfile['id']) {
 
         const preferences: PreferenceType[] = [
             {user_id: userId, category: 'tutorial_step', name: userId, value: '999'},
-            {user_id: userId, category: 'drafts', name: 'drafts_tour_tip_showed', value: JSON.stringify({drafts_tour_tip_showed: true})},
+            {
+                user_id: userId,
+                category: 'drafts',
+                name: 'drafts_tour_tip_showed',
+                value: JSON.stringify({drafts_tour_tip_showed: true}),
+            },
             {user_id: userId, category: 'crt_thread_pane_step', name: userId, value: '999'},
         ];
-        
+
         await client.savePreferences(userId, preferences);
     } catch (error) {
         // eslint-disable-next-line no-console

e2e-tests/playwright/package.json

@@ -12,23 +12,25 @@
         "show-report": "npx playwright show-report"
     },
     "dependencies": {
-        "@percy/cli": "1.23.0",
+        "@axe-core/playwright": "4.7.3",
+        "@percy/cli": "1.26.2",
         "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.32.3",
+        "@playwright/test": "1.36.1",
         "async-wait-until": "2.0.12",
+        "axe-core": "4.7.2",
         "chalk": "4.1.2",
         "deepmerge": "4.3.1",
-        "dotenv": "16.0.3",
+        "dotenv": "16.3.1",
         "form-data": "4.0.0",
         "isomorphic-unfetch": "4.0.2",
         "uuid": "9.0.0"
     },
     "devDependencies": {
-        "@types/uuid": "9.0.1",
-        "@typescript-eslint/eslint-plugin": "5.59.0",
-        "@typescript-eslint/parser": "5.59.0",
+        "@types/uuid": "9.0.2",
+        "@typescript-eslint/eslint-plugin": "6.1.0",
+        "@typescript-eslint/parser": "6.1.0",
         "cross-env": "7.0.3",
-        "eslint": "8.38.0",
+        "eslint": "8.45.0",
         "prettier": "2.8.7",
         "typescript": "5.0.4"
     }

e2e-tests/playwright/support/server/init.ts

@@ -52,7 +52,12 @@ export async function initSetup({
         // Update user preference
         const preferences: PreferenceType[] = [
             {user_id: user.id, category: 'tutorial_step', name: user.id, value: '999'},
-            {user_id: user.id, category: 'drafts', name: 'drafts_tour_tip_showed', value: JSON.stringify({drafts_tour_tip_showed: true})},
+            {
+                user_id: user.id,
+                category: 'drafts',
+                name: 'drafts_tour_tip_showed',
+                value: JSON.stringify({drafts_tour_tip_showed: true}),
+            },
             {user_id: user.id, category: 'crt_thread_pane_step', name: user.id, value: '999'},
         ];
         await userClient.savePreferences(user.id, preferences);

e2e-tests/playwright/support/test_fixture.ts

@@ -1,4 +1,6 @@
-import {test as base, Browser, ViewportSize} from '@playwright/test';
+import {test as base, Browser, Page, ViewportSize} from '@playwright/test';
+import {AxeResults} from 'axe-core';
+import AxeBuilder from '@axe-core/playwright';
 
 import {TestBrowser} from './browser_context';
 import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldSkipInSmallScreen, shouldRunInLinux} from './flag';
@@ -11,11 +13,16 @@ import {matchSnapshot} from './visual';
 export {expect} from '@playwright/test';
 
 type ExtendedFixtures = {
+    axe: AxeBuilderExtended;
     pw: PlaywrightExtended;
     pages: typeof pages;
 };
 
 export const test = base.extend<ExtendedFixtures>({
+    axe: async ({page}, use) => {
+        const ab = new AxeBuilderExtended(page);
+        await use(ab);
+    },
     pw: async ({browser, viewport}, use) => {
         const pw = new PlaywrightExtended(browser, viewport);
         await use(pw);
@@ -84,3 +91,39 @@ class PlaywrightExtended {
         this.matchSnapshot = matchSnapshot;
     }
 }
+
+class AxeBuilderExtended {
+    /**
+     * Each page should have its own Axe Builder to specifically list known issues
+     * which are to be excluded from being scanned until issues are fixed.
+     * Excluded element should have a corresponding ticket.
+     */
+
+    // '<site_url>/login'
+    readonly loginPage: () => AxeBuilder;
+
+    // See https://github.com/dequelabs/axe-core/blob/master/doc/API.md#axe-core-tags
+    readonly tags: string[] = ['wcag2a', 'wcag2aa'];
+
+    // See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
+    readonly disabledRules: string[] = [];
+
+    constructor(page: Page) {
+        this.loginPage = () => {
+            return new AxeBuilder({page}).withTags(this.tags).disableRules(this.disabledRules);
+        };
+    }
+
+    violationFingerprints(accessibilityScanResults: AxeResults) {
+        const fingerprints = accessibilityScanResults.violations.map((violation) => ({
+            rule: violation.id,
+            description: violation.description,
+            helpUrl: violation.helpUrl,
+            targets: violation.nodes.map((node) => {
+                return {target: node.target, impact: node.impact, html: node.html};
+            }),
+        }));
+
+        return JSON.stringify(fingerprints, null, 2);
+    }
+}

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

@@ -11,7 +11,7 @@ export default class PostDotMenu {
     constructor(container: Locator) {
         this.container = container;
 
-        this.deleteMenuItem = this.container.getByText('Delete', {exact: true});   
+        this.deleteMenuItem = this.container.getByText('Delete', {exact: true});
     }
 
     async toBeVisible() {

e2e-tests/playwright/tests/accessibility/common/login.spec.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('/login', async ({pw, pages, page, axe}) => {
+    // # Go to login page
+    const {adminClient} = await pw.getAdminClient();
+    const adminConfig = await adminClient.getConfig();
+    const loginPage = new pages.LoginPage(page, adminConfig);
+    await loginPage.goto();
+    await loginPage.toBeVisible();
+
+    // # Analyze the page
+    const accessibilityScanResults = await axe.loginPage().analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+});

e2e-tests/playwright/tests/functional/channels/drafts/drafts_on_deleted_message.spec.ts

@@ -20,8 +20,8 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
     // # Create a post in the channel by admin
     const adminPost = await adminClient.createPost(
         createRandomPost({
-                channel_id: channel.id,
-                user_id: adminUser.id,
+            channel_id: channel.id,
+            user_id: adminUser.id,
         })
     );
 
@@ -35,7 +35,7 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
 
     const lastPostByAdmin = await channelPage.getLastPost();
     await lastPostByAdmin.toBeVisible();
-    
+
     // # Open the last post sent by admin in RHS
     await lastPostByAdmin.hover();
     await lastPostByAdmin.postMenu.toBeVisible();
@@ -52,7 +52,7 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
     await sidebarRight.postMessage(draftMessageByUser);
 
     // # Close the RHS for draft to be saved
-    await sidebarRight.close()
+    await sidebarRight.close();
 
     // * Verify drafts link in channel sidebar is visible
     await channelPage.sidebarLeft.draftsVisible();
@@ -111,7 +111,7 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
     await sidebarRight.postMessage('I should be in drafts');
 
     // # Close the RHS for draft to be saved
-    await sidebarRight.close()
+    await sidebarRight.close();
 
     // * Verify drafts link in channel sidebar is visible
     await channelPage.sidebarLeft.draftsVisible();
@@ -120,7 +120,7 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
     await post.hover();
     await post.postMenu.toBeVisible();
     await post.postMenu.openDotMenu();
-    await channelPage.postDotMenu.toBeVisible()
+    await channelPage.postDotMenu.toBeVisible();
     await channelPage.postDotMenu.delete();
 
     // # Confirm the delete from the modal