From d35a125e0d2227b2557db7b3e181851520738d6f Mon Sep 17 00:00:00 2001 From: Luis E <35935591+luisecm@users.noreply.github.com> Date: Wed, 2 Oct 2024 15:45:23 -0600 Subject: [PATCH] update(fix): fix input text locators (#168) --- playwright/PageObjects/AuthNewAccount.ts | 12 ++--- .../PageObjects/ChatsElements/EmojiPicker.ts | 6 +-- playwright/PageObjects/FriendsScreen.ts | 12 +++-- playwright/PageObjects/MainPage.ts | 8 +++- .../Settings/SettingsCustomizations.ts | 5 ++- .../PageObjects/Settings/SettingsProfile.ts | 45 +++++++++---------- .../specs/02-friends-one-instance.spec.ts | 5 ++- .../specs/03-friends-two-instances.spec.ts | 2 + playwright/specs/05-chats-sidebar.spec.ts | 4 +- playwright/specs/07-settings-profile.spec.ts | 4 +- 10 files changed, 56 insertions(+), 47 deletions(-) diff --git a/playwright/PageObjects/AuthNewAccount.ts b/playwright/PageObjects/AuthNewAccount.ts index 68f7f96f..12e42c35 100644 --- a/playwright/PageObjects/AuthNewAccount.ts +++ b/playwright/PageObjects/AuthNewAccount.ts @@ -28,12 +28,12 @@ export class AuthNewAccount extends MainPage { ); this.identiconNewAccount = this.page.locator(".identicon").locator("img"); this.inputNewAccountFileUpload = this.page.locator("input[type=file]"); - this.inputNewAccountStatus = this.page.getByTestId( - "input-new-account-status", - ); - this.inputNewAccountUsername = this.page.getByTestId( - "input-new-account-username", - ); + this.inputNewAccountStatus = this.page + .getByTestId("input-new-account-status") + .locator("input"); + this.inputNewAccountUsername = this.page + .getByTestId("input-new-account-username") + .locator("input"); this.labelNewAccountUsername = this.page.getByTestId( "label-new-account-username", ); diff --git a/playwright/PageObjects/ChatsElements/EmojiPicker.ts b/playwright/PageObjects/ChatsElements/EmojiPicker.ts index 5df659ba..7ac4eb2c 100644 --- a/playwright/PageObjects/ChatsElements/EmojiPicker.ts +++ b/playwright/PageObjects/ChatsElements/EmojiPicker.ts @@ -21,9 +21,9 @@ export class EmojiPicker extends CombinedSelector { constructor(public readonly page: Page) { super(page); this.categoryNav = this.page.getByTestId("emoji-category-nav"); - this.emojiContainerSearchInput = this.page.getByTestId( - "emoji-container-search-input", - ); + this.emojiContainerSearchInput = this.page + .getByTestId("emoji-container-search-input") + .locator("input"); this.emojiContainerSizeLabel = this.page.getByTestId( "emoji-container-size-label", ); diff --git a/playwright/PageObjects/FriendsScreen.ts b/playwright/PageObjects/FriendsScreen.ts index 62526e2f..71ad1ba3 100644 --- a/playwright/PageObjects/FriendsScreen.ts +++ b/playwright/PageObjects/FriendsScreen.ts @@ -70,14 +70,18 @@ export class FriendsScreen extends MainPage { this.friendsSectionRequests = this.page.getByTestId( "friends-section-requests", ); - this.inputAddFriend = this.page.getByTestId("input-add-friend"); + this.inputAddFriend = this.page + .getByTestId("input-add-friend") + .locator("input"); this.inputContainerAddFriend = this.page .getByTestId("input-add-friend") - .locator("xpath=.."); + .locator(".input-container"); this.inputContainerSearchFriends = this.page .getByTestId("input-search-friends") - .locator("xpath=.."); - this.inputSearchFriends = this.page.getByTestId("input-search-friends"); + .locator(".input-container"); + this.inputSearchFriends = this.page + .getByTestId("input-search-friends") + .locator("input"); this.labelAddSomeone = this.page.getByTestId("label-add-someone"); this.labelBlockedUsers = this.page.getByTestId("label-blocked-users"); this.labelFriendList = this.page.locator('[data-cy^="label-friend-list-"]'); diff --git a/playwright/PageObjects/MainPage.ts b/playwright/PageObjects/MainPage.ts index cdbf23d5..3c9eb8ad 100644 --- a/playwright/PageObjects/MainPage.ts +++ b/playwright/PageObjects/MainPage.ts @@ -24,6 +24,7 @@ export default class MainPage { readonly favoriteProfileStatusIndicator: Locator; readonly favoritesLabel: Locator; readonly inputSidebarSearch: Locator; + readonly inputSidebarSearchContainer: Locator; readonly navigationBar: Locator; readonly sidebar: Locator; readonly sidebarChatPreview: Locator; @@ -66,7 +67,12 @@ export default class MainPage { this.favoriteProfileStatusIndicator = this.favoriteProfilePicture.getByTestId("status-indicator"); this.favoritesLabel = this.page.getByTestId("label-favorites"); - this.inputSidebarSearch = this.page.getByTestId("input-sidebar-search"); + this.inputSidebarSearch = this.page + .getByTestId("input-sidebar-search") + .locator("input"); + this.inputSidebarSearchContainer = this.page + .getByTestId("input-sidebar-search") + .locator(".input-container"); this.navigationBar = this.page.getByTestId(".navigation"); this.sidebar = this.page.getByTestId("sidebar"); this.sidebarChatPreview = this.sidebar.locator(".chat-preview"); diff --git a/playwright/PageObjects/Settings/SettingsCustomizations.ts b/playwright/PageObjects/Settings/SettingsCustomizations.ts index cecde285..65d6c33c 100644 --- a/playwright/PageObjects/Settings/SettingsCustomizations.ts +++ b/playwright/PageObjects/Settings/SettingsCustomizations.ts @@ -120,8 +120,9 @@ export class SettingsCustomizations extends SettingsBase { this.fontScalingSectionIncreaseButton = this.fontScalingSection.getByTestId( "button-font-scaling-increase", ); - this.fontScalingSectionInput = - this.fontScalingSection.getByTestId("input-font-scaling"); + this.fontScalingSectionInput = this.fontScalingSection + .getByTestId("input-font-scaling") + .locator("input"); this.fontScalingSectionLabel = this.fontScalingSection.getByTestId( "setting-section-label", ); diff --git a/playwright/PageObjects/Settings/SettingsProfile.ts b/playwright/PageObjects/Settings/SettingsProfile.ts index 261105dc..411a1a3e 100644 --- a/playwright/PageObjects/Settings/SettingsProfile.ts +++ b/playwright/PageObjects/Settings/SettingsProfile.ts @@ -100,10 +100,9 @@ export class SettingsProfile extends SettingsBase { this.accountIntegrationsItem = this.page.getByTestId( "account-integrations-item", ); - this.accountIntegrationsItemAddressInput = - this.accountIntegrationsItem.getByTestId( - "input-address-account-integration-item", - ); + this.accountIntegrationsItemAddressInput = this.accountIntegrationsItem + .getByTestId("input-address-account-integration-item") + .locator("input"); this.accountIntegrationsItemCopyButton = this.accountIntegrationsItem.getByTestId( "button-account-integration-item", @@ -116,10 +115,9 @@ export class SettingsProfile extends SettingsBase { this.accountIntegrationsItem.getByTestId( "button-account-integrations-item-edit", ); - this.accountIntegrationsItemInput = - this.accountIntegrationsItem.getByTestId( - "input-account-integration-item", - ); + this.accountIntegrationsItemInput = this.accountIntegrationsItem + .getByTestId("input-account-integration-item") + .locator("input"); this.accountIntegrationsItemLabel = this.accountIntegrationsItem.getByTestId( "label-account-integrations-item", @@ -130,25 +128,24 @@ export class SettingsProfile extends SettingsBase { this.accountIntegrationsItemLogo = this.accountIntegrationsItem.getByTestId( "account-integration-item-logo", ); - this.accountIntegrationsItemPlatformInput = - this.accountIntegrationsItem.getByTestId( - "input-platform-account-integration-item", - ); + this.accountIntegrationsItemPlatformInput = this.accountIntegrationsItem + .getByTestId("input-platform-account-integration-item") + .locator("input"); this.accountIntegrationsNewAddButton = this.page.getByTestId( "button-account-integrations-new-add", ); this.accountIntegrationsNewCancelButton = this.page.getByTestId( "button-account-integrations-new-cancel", ); - this.accountIntegrationsNewAddressInput = this.page.getByTestId( - "input-account-integrations-new-address", - ); + this.accountIntegrationsNewAddressInput = this.page + .getByTestId("input-account-integrations-new-address") + .locator("input"); this.accountIntegrationsNewAddressLabel = this.page.getByTestId( "label-account-integration-new-address", ); - this.accountIntegrationsNewGenericInput = this.page.getByTestId( - "input-account-integrations-new-generic", - ); + this.accountIntegrationsNewGenericInput = this.page + .getByTestId("input-account-integrations-new-generic") + .locator("input"); this.accountIntegrationsNewLogo = this.page.getByTestId( "logo-account-integrations-new", ); @@ -192,12 +189,12 @@ export class SettingsProfile extends SettingsBase { this.inputSettingsProfileShortIDGroup = this.page.locator( '[data-tooltip="Copy"]', ); - this.inputSettingsProfileStatus = this.page.getByTestId( - "input-settings-profile-status-message", - ); - this.inputSettingsProfileUsername = this.page.getByTestId( - "input-settings-profile-username", - ); + this.inputSettingsProfileStatus = this.page + .getByTestId("input-settings-profile-status-message") + .locator("input"); + this.inputSettingsProfileUsername = this.page + .getByTestId("input-settings-profile-username") + .locator("input"); this.labelSettingsProfileStatusMessage = this.page.getByTestId( "label-settings-profile-status-message", ); diff --git a/playwright/specs/02-friends-one-instance.spec.ts b/playwright/specs/02-friends-one-instance.spec.ts index c1032992..1e3b4838 100644 --- a/playwright/specs/02-friends-one-instance.spec.ts +++ b/playwright/specs/02-friends-one-instance.spec.ts @@ -98,8 +98,9 @@ test.describe("Friends tests", () => { await expect(friendsScreen.buttonAddFriend).toBeDisabled(); // H8 - Highlighted border should appear around Search Friends textbox when user enters a text on input field - await friendsScreen.inputSearchFriends.focus(); - await expect(friendsScreen.inputContainerSearchFriends).toHaveCSS( + await friendsScreen.inputSearchFriends.fill("1234"); + const container = friendsScreen.inputContainerSearchFriends; + await expect(container).toHaveCSS( "box-shadow", "rgb(77, 77, 255) 0px 0px 0px 1px", ); diff --git a/playwright/specs/03-friends-two-instances.spec.ts b/playwright/specs/03-friends-two-instances.spec.ts index 813ef1a2..11e03abb 100644 --- a/playwright/specs/03-friends-two-instances.spec.ts +++ b/playwright/specs/03-friends-two-instances.spec.ts @@ -1748,9 +1748,11 @@ test.describe("Two instances tests - Friends and Chats", () => { const imageSent = chatsMainPageSecond.messageBubbleContent .last() .locator("img"); + await imageSent.waitFor({ state: "attached" }); const imageReceived = chatsMainPageFirst.messageBubbleContent .last() .locator("img"); + await imageReceived.waitFor({ state: "attached" }); await expect(imageSent).toHaveAttribute("alt", "Power Up"); await expect(imageSent).toBeVisible(); await expect(imageReceived).toHaveAttribute("alt", "Power Up"); diff --git a/playwright/specs/05-chats-sidebar.spec.ts b/playwright/specs/05-chats-sidebar.spec.ts index f6b4cca0..ab9abdb6 100644 --- a/playwright/specs/05-chats-sidebar.spec.ts +++ b/playwright/specs/05-chats-sidebar.spec.ts @@ -130,9 +130,7 @@ test.describe("Chats Sidebar Tests", () => { await chatsMainPage.inputSidebarSearch.focus(); - const inputContainer = chatsMainPage.inputSidebarSearch.locator("xpath=.."); - - await expect(inputContainer).toHaveCSS( + await expect(chatsMainPage.inputSidebarSearchContainer).toHaveCSS( "box-shadow", "rgb(77, 77, 255) 0px 0px 0px 1px", ); diff --git a/playwright/specs/07-settings-profile.spec.ts b/playwright/specs/07-settings-profile.spec.ts index 6964b127..400019c7 100644 --- a/playwright/specs/07-settings-profile.spec.ts +++ b/playwright/specs/07-settings-profile.spec.ts @@ -217,7 +217,7 @@ test.describe("Settings Profile Tests", () => { // User clicks on username textbox and all text is selected await settingsProfile.assertInputTextSelected( - "[data-cy='input-settings-profile-username']", + "[data-cy='input-settings-profile-username'] input", ); }); @@ -347,7 +347,7 @@ test.describe("Settings Profile Tests", () => { // User clicks on status textbox and all text is selected await settingsProfile.assertInputTextSelected( - "[data-cy='input-settings-profile-status-message']", + "[data-cy='input-settings-profile-status-message'] input", ); });