React native test implementation mention csk 319

samples/e2e-tests/playwright.config.ts

@@ -32,26 +32,16 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
+    // {
+    //   name: "Mobile Safari",
+    //   use: { ...devices["iPhone 13"] },
+    // },
 
+    /* Test against mobile viewports. */
     {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },

samples/e2e-tests/screen-object/channel-list.ts

@@ -1,11 +1,49 @@
-import { expect, Locator, Page } from "@playwright/test"
+import { Locator, Page } from "@playwright/test"
 
 export class ChannelListComponent {
   readonly page: Page
   readonly containerChannelList: Locator
+  readonly inputSearchChannelList: Locator
+  readonly headerUser: Locator
+  readonly sectionUnread: Locator
+  readonly sectionPublicChannels: Locator
+  readonly sectionGroups: Locator
+  readonly sectionDirectMessages: Locator
+  readonly iconChat: Locator
+  readonly iconFooterHome: Locator
+  readonly iconFooterMentions: Locator
+  readonly iconFooterProfile: Locator
 
   constructor(page: Page) {
     this.page = page
-    this.containerChannelList = page.getByTestId("channel-list-container")
+    this.containerChannelList = page.locator(
+      '//*[@id="root"]/div/div[2]/div/div/div/div/div/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div/div[1]/div[1]/div/div/div/div/div/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div[1]'
+    )
+    this.inputSearchChannelList = page.getByPlaceholder("Search")
+    this.headerUser = page
+      .locator(
+        "div:nth-child(2) > div > div > div > div:nth-child(2) > div > div > .css-view-175oi2r"
+      )
+      .first()
+    this.sectionUnread = page
+      .locator("div")
+      .filter({ hasText: /^UNREAD󰇘󰅃$/ })
+      .first()
+    this.sectionPublicChannels = page
+      .locator("div")
+      .filter({ hasText: /^PUBLIC CHANNELS󰅃$/ })
+      .first()
+    this.sectionGroups = page
+      .locator("div")
+      .filter({ hasText: /^GROUPS󰅃$/ })
+      .first()
+    this.sectionDirectMessages = page
+      .locator("div")
+      .filter({ hasText: /^DIRECT MESSAGES󰅃$/ })
+      .first()
+    this.iconChat = page.locator("div").filter({ hasText: /^$/ }).first()
+    this.iconFooterHome = page.getByRole("link", { name: "󰚡 󰚡 Home" })
+    this.iconFooterMentions = page.getByRole("link", { name: "  Mentions" })
+    this.iconFooterProfile = page.getByRole("link", { name: "  Mentions" })
   }
 }

samples/e2e-tests/screen-object/login-page.ts

@@ -0,0 +1,16 @@
+import { Locator, Page } from "@playwright/test"
+
+export class LoginPageComponent {
+  readonly page: Page
+  readonly buttonLogin: Locator
+  readonly inputUserId: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.buttonLogin = page
+      .locator("div")
+      .filter({ hasText: /^Log in$/ })
+      .first()
+    this.inputUserId = page.getByRole("textbox")
+  }
+}

samples/e2e-tests/screen-object/message-list.ts

@@ -1,13 +1,65 @@
-import { expect, Locator, Page } from "@playwright/test"
+import { Locator, Page } from "@playwright/test"
 
 export class MessageListComponent {
   readonly page: Page
-  readonly containerMessageList: Locator
-  readonly containerUserMessage: Locator
+  readonly buttonLoadEarlierMessages: Locator
+  readonly inputMessage: Locator
+  readonly buttonSendMessage: Locator
+  readonly buttonPinIconHead: Locator
+  readonly wrapperMentionUserList: Locator
+  readonly containerMentionsList: Locator
+  readonly messageSent: Locator
+  readonly messageQuoted: Locator
+  readonly containerActions: Locator
+  readonly buttonCopyMessageActions: Locator
+  readonly buttonReplyInThreadActions: Locator
+  readonly buttonQuoteMessageActions: Locator
+  readonly buttonPinMessage: Locator
+  readonly messagePinned: Locator
 
   constructor(page: Page) {
     this.page = page
-    this.containerMessageList = page.getByTestId("message-list-container")
-    this.containerUserMessage = page.getByTestId("message-list-container-user-message")
+    this.buttonLoadEarlierMessages = page.getByRole("button", { name: "Load earlier messages" })
+    this.inputMessage = page.getByTestId("Type a message...")
+    this.buttonSendMessage = page.getByTestId("GC_SEND_TOUCHABLE")
+    this.wrapperMentionUserList = page
+      .getByTestId("GC_WRAPPER")
+      .locator("div")
+      .filter({ hasText: /^test-user$/ })
+      .nth(1)
+    this.containerMentionsList = page
+      .locator(
+        "div:nth-child(2) > div > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div > div > div:nth-child(2) > div > div > div"
+      )
+      .first()
+    this.containerActions = page
+      .locator("div")
+      .filter({ hasText: /^ActionsCopy messageReply in threadQuote messagePin message$/ })
+      .nth(1)
+    this.buttonCopyMessageActions = page
+      .locator("div")
+      .filter({ hasText: /^Copy message$/ })
+      .first()
+    this.buttonReplyInThreadActions = page
+      .locator("div")
+      .filter({ hasText: /^Reply in thread$/ })
+      .first()
+    this.buttonQuoteMessageActions = page
+      .locator("div")
+      .filter({ hasText: /^Pin message$/ })
+      .first()
+    this.buttonPinMessage = page
+      .locator("div")
+      .filter({ hasText: /^Pin message$/ })
+      .first()
+    this.buttonPinIconHead = page.getByText("󰤱")
+    this.messagePinned = page
+      .locator(
+        "div:nth-child(3) > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div > div"
+      )
+      .first()
+    this.messageSent = page.locator(
+      "div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div > div > div > div > div > div > div > div > div > div > div:nth-child(2) > div > div > div > div > div"
+    )
   }
 }

samples/e2e-tests/screen-object/newchat-page.ts

@@ -0,0 +1,80 @@
+import { Locator, Page } from "@playwright/test"
+
+export class NewChatPageComponent {
+  readonly page: Page
+  readonly headerNewChat: Locator
+  readonly buttonGroupChat: Locator
+  readonly sectionUserDirectChat: Locator
+  readonly inputSearchNewChatPage: Locator
+  readonly inputGroupName: Locator
+  readonly groupMemberOne: Locator
+  readonly groupMemberTwo: Locator
+  readonly groupMemberThree: Locator
+  readonly buttonCreateGroup: Locator
+  readonly buttonCancelCreateGroup: Locator
+  readonly buttonChangeNameGroup: Locator
+  readonly buttonLeaveConversationGroup: Locator
+  readonly iconHeadGroupChat: Locator
+  readonly popupChangeChatName: Locator
+  readonly inputChangeChatName: Locator
+  readonly buttonSaveChatName: Locator
+  readonly groupName: locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.headerNewChat = page.getByRole("heading", { name: "New chat" })
+    this.buttonGroupChat = page
+      .locator("div")
+      .filter({ hasText: /^Create group chat$/ })
+      .first()
+    this.sectionUserDirectChat = page
+      .locator("div")
+      .filter({ hasText: /^Lukasz$/ })
+      .nth(1)
+    this.inputSearchNewChatPage = page.getByRole("textbox", { name: "Search" })
+    this.inputGroupName = page.getByRole("textbox").nth(1)
+    this.groupMemberOne = page
+      .locator(
+        "div:nth-child(2) > div > div > div > div > div > div:nth-child(9) > div > div > div > div > div"
+      )
+      .first()
+    this.groupMemberTwo = page
+      .locator("div:nth-child(9) > div > div:nth-child(4) > div > div > div")
+      .first()
+    this.groupMemberThree = page
+      .locator("div:nth-child(9) > div > div:nth-child(6) > div > div > div")
+      .first()
+    this.buttonCreateGroup = page
+      .locator("div")
+      .filter({ hasText: /^Create$/ })
+      .first()
+    this.buttonCancelCreateGroup = page
+      .locator("div")
+      .filter({ hasText: /^Cancel$/ })
+      .first()
+    this.buttonChangeNameGroup = page
+      .locator(
+        "div:nth-child(3) > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2)"
+      )
+      .first()
+    this.buttonLeaveConversationGroup = page
+      .locator("div")
+      .filter({ hasText: /^Leave conversation$/ })
+      .first()
+    this.iconHeadGroupChat = page.locator(
+      "div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div"
+    )
+    this.popupChangeChatName = page
+      .locator("div")
+      .filter({ hasText: /^Change chat nameNameSaveCancel$/ })
+      .nth(1)
+    this.inputChangeChatName = page.getByRole("textbox")
+    this.buttonSaveChatName = page
+      .locator("div")
+      .filter({ hasText: /^Save$/ })
+      .first()
+    this.groupName = page.locator(
+      '//*[@id="root"]/div/div[2]/div/div/div/div/div/div[1]/div/div[2]/div[2]/div/div/div/div[1]/div/div[1]/div[1]/div/div/div/div/div/div[1]/div[3]/div[2]/div[2]/div/div/div/div[1]/div/div/div[2]/div[1]/div[2]'
+    )
+  }
+}