test(e2e): implement accessibility regression tests [WPB-19934] (#19525)

xdubx · web-flow · commit fb0e6bccb469 · 2025-09-24T11:31:31.000Z
diff --git a/test/e2e_tests/pageManager/webapp/components/conversationSidebar.component.ts b/test/e2e_tests/pageManager/webapp/components/conversationSidebar.component.ts
@@ -30,6 +30,7 @@ export class ConversationSidebar {
   readonly allConverationsButton: Locator;
   readonly connectButton: Locator;
   readonly archiveButton: Locator;
+  readonly sidebar: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -40,6 +41,7 @@ export class ConversationSidebar {
     this.allConverationsButton = page.locator(`${selectByDataAttribute('go-recent-view')}`);
     this.connectButton = page.locator(`button${selectByDataAttribute('go-people')}`);
     this.archiveButton = page.locator(selectByDataAttribute('go-archive'));
+    this.sidebar = page.locator(`.conversations-sidebar-items`);
   }
 
   async getPersonalStatusName() {
diff --git a/test/e2e_tests/pageManager/webapp/pages/account.page.ts b/test/e2e_tests/pageManager/webapp/pages/account.page.ts
@@ -36,6 +36,7 @@ export class AccountPage {
   readonly emailInput: Locator;
   readonly resetPasswordButton: Locator;
   readonly receiveNewsletterCheckbox: Locator;
+  readonly typingIndicator: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -52,6 +53,7 @@ export class AccountPage {
     this.emailDisplay = page.locator(selectByDataAttribute('email-display'));
     this.resetPasswordButton = page.locator(selectByDataAttribute('do-reset-password'));
     this.receiveNewsletterCheckbox = page.locator("[data-uie-name='status-preference-marketing']+label");
+    this.typingIndicator = page.locator("[data-uie-name='status-preference-typing-indicator']+label");
   }
 
   async clickBackUpButton() {
@@ -74,6 +76,10 @@ export class AccountPage {
     await this.receiveNewsletterCheckbox.click();
   }
 
+  async toggleTypingIndicator() {
+    await this.typingIndicator.click();
+  }
+
   async isSendUsageDataEnabled() {
     return this.sendUsageDataCheckbox.isChecked();
   }
diff --git a/test/e2e_tests/pageManager/webapp/pages/conversation.page.ts b/test/e2e_tests/pageManager/webapp/pages/conversation.page.ts
@@ -48,6 +48,7 @@ export class ConversationPage {
   readonly conversationInfoButton: Locator;
   readonly pingButton: Locator;
   readonly messages: Locator;
+  readonly isTypingIndicator: Locator;
 
   readonly getImageAltText = (user: User) => `Image from ${user.fullName}`;
 
@@ -80,6 +81,7 @@ export class ConversationPage {
     this.messages = page.locator(
       `${selectByDataAttribute('item-message')} ${selectByClass('message-body')}:not(:has(p${selectByClass('text-foreground')})):has(${selectByClass('text')})`,
     );
+    this.isTypingIndicator = page.locator(selectByDataAttribute('typing-indicator-title'));
   }
 
   private getImageLocator(user: User): Locator {
@@ -117,6 +119,14 @@ export class ConversationPage {
     await this.page.waitForTimeout(5000); // Wait for the message to be sent
   }
 
+  async typeMessage(message: string) {
+    await this.messageInput.click();
+    for (let i = 0; i < message.length; i++) {
+      await this.page.keyboard.press(message[i]);
+      await this.page.waitForTimeout(300); // sim user input
+    }
+  }
+
   async createGroup(groupName: string) {
     await this.createGroupButton.click();
     await this.createGroupNameInput.fill(groupName);
diff --git a/test/e2e_tests/pageManager/webapp/pages/conversationList.page.ts b/test/e2e_tests/pageManager/webapp/pages/conversationList.page.ts
@@ -73,7 +73,7 @@ export class ConversationListPage {
   }
 
   async openConversation(conversationName: string) {
-    await this.getConversationLocator(conversationName).click();
+    await this.getConversationLocator(conversationName).first().click();
   }
 
   async openPendingConnectionRequest() {
diff --git a/test/e2e_tests/specs/Accessibility/Accessibility.spec.ts b/test/e2e_tests/specs/Accessibility/Accessibility.spec.ts
@@ -0,0 +1,176 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {getUser} from 'test/e2e_tests/data/user';
+import {PageManager} from 'test/e2e_tests/pageManager';
+import {setupBasicTestScenario} from 'test/e2e_tests/utils/setup.util';
+import {tearDownAll} from 'test/e2e_tests/utils/tearDown.util';
+import {createGroup, loginUser} from 'test/e2e_tests/utils/userActions';
+
+import {test, expect} from '../../test.fixtures';
+
+test.describe('Accessibility', () => {
+  test.slow();
+
+  let owner = getUser();
+  const members = Array.from({length: 2}, () => getUser());
+  const [memberA, memberB] = members;
+  const teamName = 'Accessibility';
+  const conversationName = 'AccTest';
+  const textMessage = 'long text message';
+  const narrowViewport = {width: 480, height: 800};
+  const loginTimeOut = 60_000;
+
+  test.beforeAll(async ({api}) => {
+    const user = await setupBasicTestScenario(api, members, owner, teamName);
+    owner = {...owner, ...user};
+  });
+
+  const navigateToConversation = async (pageManager: PageManager, name: string) => {
+    await pageManager.webapp.pages.conversationList().openConversation(name);
+  };
+
+  test(
+    'I want to see typing indicator in group conversation',
+    {tag: ['@TC-46', '@regression']},
+    async ({pageManager: memberPageManagerA, browser}) => {
+      const memberContext = await browser.newContext();
+      const memberPage = await memberContext.newPage();
+      const memberPageManagerB = new PageManager(memberPage);
+
+      const toggleTypingIndicator = async (pageManager: PageManager) => {
+        await pageManager.webapp.components.conversationSidebar().clickPreferencesButton();
+        await pageManager.webapp.pages.account().toggleTypingIndicator();
+        await pageManager.webapp.components.conversationSidebar().clickAllConversationsButton();
+      };
+
+      const typeAndCheckIndicator = async (
+        senderPage: PageManager,
+        receiverPage: PageManager,
+        message: string,
+        expectedState: boolean,
+      ) => {
+        await senderPage.webapp.pages.conversation().typeMessage(message);
+        // Wait for a short moment for the indicator to appear/disappear
+        await senderPage.waitForTimeout(800);
+        const isVisible = await receiverPage.webapp.pages.conversation().isTypingIndicator.isVisible();
+        expect(isVisible).toBe(expectedState);
+      };
+
+      // Initial setup
+      await memberPageManagerA.openMainPage();
+      await memberPageManagerB.openMainPage();
+      await loginUser(memberA, memberPageManagerA);
+      await loginUser(memberB, memberPageManagerB);
+
+      await memberPageManagerA.webapp.components
+        .conversationSidebar()
+        .personalUserName.waitFor({state: 'visible', timeout: loginTimeOut});
+
+      await memberPageManagerA.webapp.modals.dataShareConsent().clickDecline();
+      await memberPageManagerB.webapp.modals.dataShareConsent().clickDecline();
+
+      await createGroup(memberPageManagerA, conversationName, [memberB]);
+
+      await navigateToConversation(memberPageManagerA, conversationName);
+      await navigateToConversation(memberPageManagerB, conversationName);
+
+      await test.step('User A starts typing in group and B sees typing indicator', async () => {
+        await typeAndCheckIndicator(memberPageManagerA, memberPageManagerB, textMessage, true);
+      });
+
+      await test.step('User A starts typing in group and B does not see typing indicator', async () => {
+        // Disable typing indicator for user A
+        await toggleTypingIndicator(memberPageManagerA);
+        await navigateToConversation(memberPageManagerA, conversationName);
+
+        await typeAndCheckIndicator(memberPageManagerA, memberPageManagerB, textMessage, false);
+
+        // Re-enable typing indicator for user A for subsequent tests
+        await toggleTypingIndicator(memberPageManagerA);
+        await navigateToConversation(memberPageManagerA, conversationName);
+      });
+
+      await test.step('User B turns indicator off and does not see typing indicator', async () => {
+        // Disable typing indicator for user B
+        await toggleTypingIndicator(memberPageManagerB);
+        await navigateToConversation(memberPageManagerB, conversationName);
+
+        await typeAndCheckIndicator(memberPageManagerA, memberPageManagerB, textMessage, false);
+      });
+
+      await test.step('User B turns indicator on again and sees typing indicator', async () => {
+        // Re-enable typing indicator for user B
+        await toggleTypingIndicator(memberPageManagerB);
+        await navigateToConversation(memberPageManagerB, conversationName);
+
+        await typeAndCheckIndicator(memberPageManagerA, memberPageManagerB, textMessage, true);
+      });
+
+      await memberContext.close();
+    },
+  );
+
+  test('I want to see collapsed view when app is narrow', {tag: ['@TC-48', '@regression']}, async ({pageManager}) => {
+    await (await pageManager.getPage()).setViewportSize(narrowViewport);
+
+    await pageManager.openMainPage();
+    await loginUser(memberA, pageManager);
+    const {components, pages} = pageManager.webapp;
+
+    await pages.historyInfo().clickConfirmButton();
+    await components.conversationSidebar().sidebar.waitFor({state: 'visible', timeout: loginTimeOut});
+
+    await expect(components.conversationSidebar().sidebar).toHaveAttribute('data-is-collapsed', 'true');
+  });
+
+  test(
+    'I should not lose a drafted message when switching between conversations in collapsed view',
+    {tag: ['@TC-51', '@regression']},
+    async ({pageManager}) => {
+      const message = 'test';
+      const {components, modals, pages} = pageManager.webapp;
+      await pageManager.openMainPage();
+      await loginUser(memberA, pageManager);
+
+      await pages.historyInfo().clickConfirmButton();
+      await components.conversationSidebar().sidebar.waitFor({state: 'visible', timeout: loginTimeOut});
+
+      await createGroup(pageManager, conversationName, [memberB]);
+
+      await pages.conversation().typeMessage(message);
+      const page = await pageManager.getPage();
+
+      await components.conversationSidebar().clickConnectButton();
+
+      await page.locator('[data-uie-name="highlighted"]').nth(0).click();
+      await modals.userProfile().clickStartConversation();
+      await expect(page.locator('[data-uie-name="secondary-line"]')).toHaveText(message);
+
+      await pages.conversationList().openConversation(memberB.fullName);
+
+      await pages.conversationList().openConversation(conversationName);
+      await expect(await pages.conversation().messageInput).toHaveText(message);
+    },
+  );
+
+  test.afterAll(async ({api}) => {
+    await tearDownAll(api);
+  });
+});
diff --git a/test/e2e_tests/utils/setup.util.ts b/test/e2e_tests/utils/setup.util.ts
@@ -0,0 +1,39 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {addCreatedTeam, addCreatedUser} from './tearDown.util';
+import {inviteMembers} from './userActions';
+
+import {ApiManagerE2E} from '../backend/apiManager.e2e';
+import {User} from '../data/user';
+
+/**
+ * add an team with one owner and 2 member
+ */
+export const setupBasicTestScenario = async (api: ApiManagerE2E, member: User[], owner: User, teamName: string) => {
+  const user = await api.createTeamOwner(owner, teamName);
+  // register credentials for cleanup later
+  addCreatedTeam(user, user.teamId);
+  await inviteMembers(member, user, api);
+
+  for (const [, user] of member.entries()) {
+    addCreatedUser(user);
+  }
+  return user;
+};
diff --git a/test/e2e_tests/utils/userActions.ts b/test/e2e_tests/utils/userActions.ts
@@ -84,3 +84,10 @@ export const sendTextMessageToConversation = async (
 
   expect(await pages.conversation().isMessageVisible(message)).toBeTruthy();
 };
+
+export const createGroup = async (pageManager: PageManager, conversationName: string, user: User[]) => {
+  await pageManager.webapp.pages.conversationList().clickCreateGroup();
+  await pageManager.webapp.pages.groupCreation().setGroupName(conversationName);
+  await pageManager.webapp.pages.startUI().selectUsers(user.flatMap(user => user.username));
+  await pageManager.webapp.pages.groupCreation().clickCreateGroupButton();
+};

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export class ConversationListPage {`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`async openConversation(conversationName: string) {`
`76`		`- await this.getConversationLocator(conversationName).click();`
	`76`	`+ await this.getConversationLocator(conversationName).first().click();`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`async openPendingConnectionRequest() {`