chore(ci): attempt to run parallel tests for mobile and desktop (#164)

playwright.config.ts

@@ -46,14 +46,30 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: "Automated Tests on Chrome Desktop",
-      use: { ...devices["Desktop Chrome"] },
+      name: "desktop-chrome",
+      use: {
+        browserName: "chromium",
+        viewport: { width: 1280, height: 720 }, // Desktop viewport
+      },
     },
 
-    /* Test against mobile viewports. */
+    // Mobile Chrome (Pixel 5)
     // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
+    //   name: "mobile-chrome",
+    //   use: {
+    //     browserName: "chromium",
+    //     ...devices["Pixel 5"], // Use predefined mobile device
+    //   },
+    //   testIgnore: "./playwright/specs/13-settings-keybinds.spec.ts",
+    // },
+
+    // iPhone 12 (Safari)
+    // {
+    //   name: "mobile-safari",
+    //   use: {
+    //     browserName: "webkit",
+    //     ...devices["iPhone 12"], // Use predefined iPhone 12 device
+    //   },
     // },
     // {
     //   name: 'Mobile Safari',

playwright/PageObjects/AuthNewAccount.ts

@@ -16,8 +16,11 @@ export class AuthNewAccount extends MainPage {
   readonly textNewAccountSecondary: Locator;
   readonly titleNewAccount: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.buttonNewAccountCreate = this.page.getByTestId(
       "button-new-account-create",
     );

playwright/PageObjects/CallControls.ts

@@ -13,8 +13,11 @@ export class CallControls extends MainPage {
   readonly inCallLabel: Locator;
   readonly incomingCallLabel: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.callAnswerButton = this.page.getByTestId("button-call-answer");
     this.callControls = this.page.getByTestId("call-controls");
     this.callDeafenButton = this.page.getByTestId("button-call-deafen");

playwright/PageObjects/CallScreen.ts

@@ -27,8 +27,11 @@ export class CallScreen extends MainPage {
   readonly remoteUserVideo: Locator;
   readonly usersInCallText: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.callCollapseExpandButton = this.callScreen.getByTestId(
       "button-call-collapse-expand",
     );

playwright/PageObjects/CallSettings.ts

@@ -39,8 +39,11 @@ export class CallSettings extends MainPage {
   readonly videoDeviceSelectorOption: Locator;
   readonly videoDeviceText: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.callSettings = this.page.locator(".call-settings");
     this.audioBitrate = this.page.getByTestId("section-audio-bitrate");
     this.audioBitrateLabel = this.audioBitrate.getByTestId(

playwright/PageObjects/ChatsElements/CombinedSelector.ts

@@ -11,8 +11,11 @@ export class CombinedSelector extends MainPage {
   readonly giphySelector: Locator;
   readonly stickerSelector: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.combinedSelector = this.page.getByTestId("combined-selector");
     this.emojiContainer = this.page.getByTestId("emoji-container");
     this.footerTabs = this.page.getByTestId(".pill-tabs");

playwright/PageObjects/ChatsElements/EmojiPicker.ts

@@ -18,8 +18,11 @@ export class EmojiPicker extends CombinedSelector {
   readonly skinToneSelector: Locator;
   readonly skinToneSelectorButton: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.categoryNav = this.page.getByTestId("emoji-category-nav");
     this.emojiContainerSearchInput = this.page
       .getByTestId("emoji-container-search-input")

playwright/PageObjects/ChatsElements/GifPicker.ts

@@ -14,8 +14,11 @@ export class GifPicker extends CombinedSelector {
   readonly searchInput: Locator;
   readonly textNoFavoritesYet: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.allFavoritesButton = this.page.getByTestId(
       "giphy-selector-favorites-button",
     );

playwright/PageObjects/ChatsElements/StickerPicker.ts

@@ -13,8 +13,11 @@ export class StickerPicker extends CombinedSelector {
   readonly stickerSidebarCollection: Locator;
   readonly stickerSelectorSidebarLabel: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.allStickers = this.page.getByTestId("sticker-contents");
     this.stickerCollection = this.page.getByTestId("sticker-collection");
     this.stickerCollectionItem = this.page.getByTestId(

playwright/PageObjects/ChatsMain.ts

@@ -115,8 +115,11 @@ export class ChatsMainPage extends MainPage {
   readonly uploadFilesSelectedSinglePreviewIcon: Locator;
   readonly uploadFilesSelectedSinglePreviewImage: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.addSomeone = this.page.locator(".add-someone");
     this.buttonAddAttachment = this.page.getByTestId(
       "button-chat-add-attachment",

playwright/PageObjects/CreateOrImport.ts

@@ -6,8 +6,11 @@ export class CreateOrImportPage extends MainPage {
   readonly labelCreateTitle: Locator;
   readonly textCreateDescription: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.buttonCreateAccount = this.page.getByTestId("button-create-account");
     this.labelCreateTitle = this.page.getByTestId("label-create-title");
     this.textCreateDescription = this.page.getByTestId(

playwright/PageObjects/FilesScreen.ts

@@ -27,8 +27,11 @@ export class FilesPage extends MainPage {
   readonly uploadFileButton: Locator;
   readonly uploadFileInput: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.buttonFilesSync = this.page.getByTestId("button-files-sync");
     this.buttonFilesGiftSpace = this.page.getByTestId(
       "button-files-gift-space",

playwright/PageObjects/FriendsScreen.ts

@@ -11,6 +11,10 @@ export class FriendsScreen extends MainPage {
   readonly buttonFriendsActive: Locator;
   readonly buttonFriendsAll: Locator;
   readonly buttonFriendsBlocked: Locator;
+  readonly buttonFriendsHamburger: Locator;
+  readonly contextFriendListOptionAll: Locator;
+  readonly contextFriendListOptionBlocked: Locator;
+  readonly contextFriendListOptionRequests: Locator;
   readonly contextMenuCopyID: Locator;
   readonly contextOptionCopyDid: Locator;
   readonly contextOptionCopyID: Locator;
@@ -41,8 +45,11 @@ export class FriendsScreen extends MainPage {
   readonly textNoOutgoingRequests: Locator;
   readonly textSearchFriendNoResults: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.buttonAddFriend = this.page.getByTestId("button-add-friend");
     this.buttonCopyID = this.page.getByTestId("button-copy-id");
     this.buttonFriendCancel = this.page.getByTestId("button-friend-cancel");
@@ -52,6 +59,18 @@ export class FriendsScreen extends MainPage {
     this.buttonFriendsActive = this.page.getByTestId("button-friends-active");
     this.buttonFriendsAll = this.page.getByTestId("button-friends-all");
     this.buttonFriendsBlocked = this.page.getByTestId("button-friends-blocked");
+    this.buttonFriendsHamburger = this.page
+      .getByTestId("topbar")
+      .getByRole("button")
+      .nth(1);
+    this.contextFriendListOptionAll =
+      this.page.getByTestId("button-friends-all");
+    this.contextFriendListOptionBlocked = this.page.getByTestId(
+      "button-friends-blocked",
+    );
+    this.contextFriendListOptionRequests = this.page.getByTestId(
+      "button-friends-active",
+    );
     this.contextMenuCopyID = this.page.getByTestId("context-menu-copy-id");
     this.contextOptionCopyDid = this.contextMenuCopyID.getByTestId(
       "context-menu-option-Copy DID",
@@ -178,6 +197,21 @@ export class FriendsScreen extends MainPage {
     await this.buttonFriendsActive.click();
   }
 
+  async goToMobleAllFriendsList() {
+    await this.buttonFriendsHamburger.click();
+    await this.contextFriendListOptionAll.click();
+  }
+
+  async goToMobileBlockedList() {
+    await this.buttonFriendsHamburger.click();
+    await this.contextFriendListOptionBlocked.click();
+  }
+
+  async goToMobileRequestList() {
+    await this.buttonFriendsHamburger.click();
+    await this.contextFriendListOptionRequests.click();
+  }
+
   async removeFriend(username: string) {
     const friendUser = await this.getFriendFromList(username);
     await friendUser.getByTestId("button-friend-remove").click();

playwright/PageObjects/LoginPin.ts

@@ -28,8 +28,11 @@ export class LoginPinPage extends MainPage {
   readonly stayUnlockedLabel: Locator;
   readonly stayUnlockedSwitch: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.buttonClearInput = this.page.getByTestId("button-clear-input");
     this.buttonCreateNewProfile = this.page.getByTestId(
       "button-create-new-profile",

playwright/PageObjects/MainPage.ts

@@ -2,6 +2,7 @@ import { expect, type Locator, type Page } from "@playwright/test";
 
 export default class MainPage {
   readonly buttonChat: Locator;
+  readonly buttonDismissInstallAlert: Locator;
   readonly buttonFiles: Locator;
   readonly buttonFriends: Locator;
   readonly buttonHideSidebar: Locator;
@@ -23,6 +24,7 @@ export default class MainPage {
   readonly favoriteProfilePicture: Locator;
   readonly favoriteProfileStatusIndicator: Locator;
   readonly favoritesLabel: Locator;
+  readonly installAlert: Locator;
   readonly inputSidebarSearch: Locator;
   readonly inputSidebarSearchContainer: Locator;
   readonly navigationBar: Locator;
@@ -34,15 +36,22 @@ export default class MainPage {
   readonly toastNotificationButton: Locator;
   readonly toastNotificationText: Locator;
 
-  constructor(public readonly page: Page) {
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
     this.buttonChat = this.page.getByTestId("button-Chat");
+    this.buttonDismissInstallAlert = this.page
+      .locator("#install-banner")
+      .getByRole("button")
+      .first();
     this.buttonFiles = this.page.getByTestId("button-Files");
     this.buttonFriends = this.page.getByTestId("button-Friends");
     this.buttonHideSidebar = this.page.getByTestId("button-hide-sidebar");
     this.buttonSettings = this.page.getByTestId("button-Settings");
     this.buttonShowSidebar = this.page
-      .getByTestId("button-show-sidebar")
-      .first();
+      .getByTestId("slimbar")
+      .getByTestId("button-show-sidebar");
     this.buttonSidebarChats = this.page.getByTestId("button-sidebar-chats");
     this.buttonSidebarFiles = this.page.getByTestId("button-sidebar-files");
     this.buttonWallet = this.page.getByTestId("button-Wallet");
@@ -67,6 +76,7 @@ export default class MainPage {
     this.favoriteProfileStatusIndicator =
       this.favoriteProfilePicture.getByTestId("status-indicator");
     this.favoritesLabel = this.page.getByTestId("label-favorites");
+    this.installAlert = this.page.locator("#install-banner");
     this.inputSidebarSearch = this.page
       .getByTestId("input-sidebar-search")
       .locator("input");
@@ -119,6 +129,11 @@ export default class MainPage {
     await this.toastNotificationButton.click();
   }
 
+  async dismissDownloadAlert() {
+    await this.buttonDismissInstallAlert.click();
+    await this.installAlert.waitFor({ state: "detached" });
+  }
+
   async expectElementToHaveClass(selector: string, className: string) {
     const element = this.page.locator(selector);
     const hasClass = await element.evaluate(
@@ -143,25 +158,25 @@ export default class MainPage {
   }
 
   async goToChat() {
-    await this.buttonChat.click();
+    await this.buttonChat.first().click();
   }
 
   async goToFiles() {
-    await this.buttonFiles.click();
+    await this.buttonFiles.first().click();
     await this.page.waitForURL("/files");
   }
 
   async goToFriends() {
-    await this.buttonFriends.click();
+    await this.buttonFriends.first().click();
     await this.page.waitForURL("/friends");
   }
 
   async goToSettings() {
-    await this.buttonSettings.click();
+    await this.buttonSettings.first().click();
   }
 
   async goToWallet() {
-    await this.buttonWallet.click();
+    await this.buttonWallet.first().click();
   }
 
   async normalizeSvg(svgString: string) {

playwright/PageObjects/PreLoadingScreen.ts

@@ -5,8 +5,11 @@ export class PreLoadingScreen extends MainPage {
   readonly loadingHeader: Locator;
   readonly loadingMessage: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.loadingHeader = this.page.locator(".small");
     this.loadingMessage = this.page.locator(".text.medium");
   }

playwright/PageObjects/QuickProfile.ts

@@ -16,8 +16,11 @@ export class QuickProfile extends MainPage {
   readonly quickProfileUsernameLabel: Locator;
   readonly quickProfileUsernameText: Locator;
 
-  constructor(public readonly page: Page) {
-    super(page);
+  constructor(
+    public readonly page: Page,
+    public readonly viewport: string,
+  ) {
+    super(page, viewport);
     this.quickProfile = this.page.getByTestId("quick-profile");
     this.quickProfileBanner = this.quickProfile.getByTestId(
       "quick-profile-banner",